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

Question

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

Answer 1

从 Nextjs v12 开始，您可以使用 middleware 而不是设置 custom server。

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

• 自定义服务器通常需要额外的依赖项（如 express）
• 你放弃了一些盒子功能，比如automatic static optimization
• 使用内置路由范式，中间件可以作用于特定路径

创建一个类似于以下内容的/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.nextUrl.hostname}${req.nextUrl.pathname}`,
           301
        );
    } 
    return NextResponse.next();
}

我还创建了一个npm package for this。

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"
}

它应该可以工作。

请注意，您可以使用本机 Node.js 的 http 模块中的 createServer 方法替换 Express。但我使用 Express 来简化语法。

延伸阅读：How to setup a custom server in Next.js.