如何强制或重定向我的 next.js 网站以使用 https

Question

我认为这将是一个简单的任务，但我很难找到一种方法来强制我的网页使用 https。 next.js Web 应用程序位于 heroku 服务器上，我已经设置了 SSL。 https 和 http 版本都可以，但如何强制或重定向网站以使用 https 版本。 我见过一些使用express的解决方案，但我的网络应用程序中没有任何内容使用express，这是必需的吗？ 谢谢。

Answer 1

从 Nextjs v12 开始，您可以使用 中间件 而不是设置 自定义服务器。

中间件是更好的解决方案，原因如下：

• 自定义服务器通常需要额外的依赖项（如express）
• 你放弃了一些盒子功能，例如自动静态优化
• 中间件可以使用内置路由范例将范围限制在特定路径上

创建一个

/pages/_middleware.ts

（或

.js

）文件，其内容与此类似：

import  { NextFetchEvent, NextRequest, NextResponse } from 'next/server'

type Environment = "production" | "development" | "other";
export function middleware(req: NextRequest, ev: NextFetchEvent) {
    const currentEnv = process.env.NODE_ENV as Environment;

    if (currentEnv === 'production' && 
        req.headers.get("x-forwarded-proto") !== "https") {
        return NextResponse.redirect(
           `https://${req.headers.get('host')}${req.nextUrl.pathname}`,
           301
        );
    } 
    return NextResponse.next();
}

我还为此创建了一个 npm 包。

import sslRedirect from 'next-ssl-redirect-middleware';
export default sslRedirect({});

Answer 2

有一个名为

heroku-ssl-redirect

的 NPM 库解决方案。

首先，使用

npm i heroku-ssl-redirect

安装库。

然后，使用以下脚本创建一个新的

server.js

文件。

const next = require('next');
const express = require('express');
const sslRedirect = require('heroku-ssl-redirect').default; // to make it work with 'require' keyword.

const PORT = process.env.PORT || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  // Express's middleware to automatically redirect to 'https'.
  server.use(sslRedirect());

  server.all('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(port, err => {
    if (err) throw err;

    console.log(`Server starts on ${PORT}.`);
  });
});

然后，将

start

脚本更改为如下所示：

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "node server.js"
}

应该可以。

请注意，您可以将 Express 替换为原生 Node.js 的

createServer

模块中的

http

方法。但我使用 Express 来简化语法。

进一步阅读：如何在 Next.js 中设置自定义服务器。

Answer 3

在你的 package.json > 脚本 > "dev":"next dev -experimental-https"

我希望这对你有帮助:)