Next.js 13 + Heroku强制HTTPS最佳实践咨询

问题描述 #

我正在用Next.js 13和Heroku开发项目，发现关于二者SSL配置的最新指南很少。目前我采用了某博客中的客户端重定向方案（代码如下），虽然能生效，但谷歌不认可这种重定向方式，会对SEO造成负面影响。请问当前在Next.js 13与Heroku环境下确保HTTPS的最佳实践是什么？

import React, {useEffect} from 'react';
import {useLocation} from "react-router";

const UseRedirectToHttps = () => {
    let location = useLocation()
    useEffect(() => {
        
        if (window.location.protocol!=="https:") {
            window.location.replace("https://your-website-url.com"+location.pathname);
        }
    })
};

export default UseRedirectToHttps;

客户端重定向依赖浏览器执行JS，爬虫可能无法正确识别，确实会影响SEO。最佳方案是服务器端重定向，利用Next.js的Middleware或服务器端渲染逻辑处理，同时适配Heroku的反向代理环境。

推荐方案：使用Next.js Middleware（适配App Router/Pages Router） #

Middleware在请求到达页面之前运行，属于服务器端逻辑，返回的301永久重定向会被搜索引擎正确识别，完全避免客户端重定向的SEO问题。

在项目根目录创建middleware.ts（或middleware.js）文件：

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

export function middleware(request: NextRequest) {
  // Heroku通过X-Forwarded-Proto头传递原始请求的协议
  const protocol = request.headers.get('x-forwarded-proto')
  
  if (protocol !== 'https') {
    // 构建HTTPS地址，保留原路径和查询参数
    const httpsUrl = new URL(`https://${request.nextUrl.host}${request.nextUrl.pathname}${request.nextUrl.search}`)
    // 返回301永久重定向，对SEO最友好
    return NextResponse.redirect(httpsUrl, { status: 301 })
  }

  // 正常请求直接放行
  return NextResponse.next()
}

// 匹配所有路径，确保全站生效
export const config = {
  matcher: '/:path*',
}

关键说明： #

• 必须检查X-Forwarded-Proto头：Heroku的负载均衡器会将用户的原始请求协议放在这个头里，Next.js在Heroku内部接收到的是HTTP请求，直接检查request.protocol会不准确。
• 使用301永久重定向：告诉搜索引擎该URL已永久迁移到HTTPS版本，有助于传递页面权重，不会影响SEO。

备选方案：Pages Router中使用getServerSideProps #

如果你的项目仍在使用Next.js Pages Router，可以在页面的getServerSideProps中添加重定向逻辑（需要在每个页面复用，不如Middleware高效）：

export async function getServerSideProps(context) {
  const { req } = context
  
  if (req.headers['x-forwarded-proto'] !== 'https') {
    return {
      redirect: {
        destination: `https://${req.headers.host}${req.url}`,
        permanent: true, // 永久重定向
      },
    }
  }

  return { props: {} }
}

额外配置：确保Heroku域名SSL生效 #

1. 确保你的自定义域名已在Heroku中配置，并安装了SSL证书（可通过Heroku SSL插件或免费的Let's Encrypt证书）。
2. 验证Heroku的X-Forwarded-Proto头已正确传递：Heroku默认会为所有请求设置这个头，无需额外配置。

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