如何强制或重定向我的 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

有一个带有 NPM 库的解决方案，称为heroku-ssl-redirect.

首先，使用安装库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 替换createServer为原生 Node.jshttp模块中的方法。但我使用 Express 来简化语法。

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