如何在Heroku部署的Next.js应用中强制HTTPS访问？

方法1：Next.js 中间件（推荐，Next.js 12+） #

通过Next.js中间件在请求抵达页面前完成重定向，适配Heroku的转发协议特性：

1. 在项目根目录创建 middleware.ts（或.js）文件，写入以下代码：

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // Heroku通过x-forwarded-proto传递真实请求协议，不能直接用request.protocol
  const protocol = request.headers.get('x-forwarded-proto')
  const host = request.headers.get('host')

  const isHttps = protocol === 'https'
  const isWww = host?.startsWith('www.')

  if (!isHttps || !isWww) {
    const targetHost = isWww ? host : `www.${host}`
    const targetUrl = new URL(request.url)
    targetUrl.protocol = 'https:'
    targetUrl.host = targetHost

    // 301永久重定向，对SEO更友好
    return NextResponse.redirect(targetUrl, { status: 301 })
  }

  return NextResponse.next()
}

// 对所有路径应用中间件
export const config = {
  matcher: '/:path*',
}

2. 重新部署你的Next.js应用到Heroku即可生效。

方法2：自定义Express服务器（适用于用自定义服务器的项目） #

如果你的Next.js项目基于Express搭建，可以在服务器层处理重定向：

1. 项目根目录创建或修改server.js：

const express = require('express')
const next = require('next')

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

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

  // 重定向逻辑
  server.use((req, res, next) => {
    const protocol = req.headers['x-forwarded-proto']
    const host = req.headers.host

    const isHttps = protocol === 'https'
    const isWww = host?.startsWith('www.')

    if (!isHttps || !isWww) {
      const targetHost = isWww ? host : `www.${host}`
      const redirectUrl = `https://${targetHost}${req.originalUrl}`
      return res.redirect(301, redirectUrl)
    }
    next()
  })

  server.all('*', (req, res) => handle(req, res))

  server.listen(process.env.PORT || 3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

2. 更新项目根目录的Procfile内容：

web: node server.js

3. 重新部署到Heroku。

方法3：Namecheap域名后台直接设置重定向 #

无需改动代码，直接在域名解析层完成重定向：

1. 登录Namecheap后台，进入目标域名的管理页面。
2. 找到Redirect Domain选项：
   • 源地址填@（代表裸域mywebsite.com），目标地址设为https://www.mywebsite.com，重定向类型选Permanent (301)。
   • 新增一条源地址www，目标地址同样设为https://www.mywebsite.com，类型选301。
3. 保存设置，等待DNS生效（通常10-30分钟）。

注意：若使用此方法，建议关闭Heroku后台的域名自动重定向，避免冲突。

验证方式 #

设置完成后，可通过以下方式确认效果：

• 访问http://mywebsite.com或http://www.mywebsite.com，应自动跳转到https://www.mywebsite.com
• 用命令行测试：curl -I http://mywebsite.com，返回状态码301，Location头为目标HTTPS地址

内容的提问来源于stack exchange，提问作者DaMatt91