ssl - 如何强制或重定向我的 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({});