时间戳

首页 > 解决方案 > 如何强制或重定向我的 next.js 网站以使用 https

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

问题描述

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

标签： sslredirecthttpsnext.js

解决方案

从 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.nextUrl.hostname}${req.nextUrl.pathname}`,
           301
        );
    } 
    return NextResponse.next();
}

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

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

推荐阅读