如何在Next.js中实现www到非www站点的永久重定向？

针对你部署在DigitalOcean静态站点的场景，分两种情况给出可行方案：

情况1：站点为静态导出（next export） #

静态导出的Next.js站点仅包含纯静态文件，无服务器端逻辑支撑，因此Next.js内置的redirects和middleware均无法生效。此时需在DigitalOcean平台层面配置重定向：

• 登录DigitalOcean控制台，进入你的App项目
• 切换到Domains选项卡
• 选中目标域名，添加重定向规则：
  • 源地址：www.cvtips.nl/*
  • 目标地址：https://cvtips.nl/$1
  • 重定向类型：永久重定向（301）
• 保存设置后等待生效即可。

情况2：站点通过Node.js运行（非静态导出） #

若你是用DigitalOcean App Platform部署的完整Next.js应用（运行next start而非静态导出），可通过以下两种方式实现：

方案A：修正Middleware配置 #

Next.js 12.1.4属于Pages Router版本，middleware文件必须放在pages/_middleware.js（下划线开头），并调整代码逻辑：

import { NextRequest, NextResponse } from 'next/server';

export function middleware(req) {
  const host = req.headers.get('host');
  if (!host) return NextResponse.next();

  // 匹配www开头的域名，排除本地开发环境
  const wwwRegex = /^www\./;
  if (wwwRegex.test(host) && !host.includes('localhost')) {
    const newHost = host.replace(wwwRegex, '');
    // 基于原URL构建新地址，避免硬写协议
    const newUrl = new URL(req.nextUrl);
    newUrl.host = newHost;
    return NextResponse.redirect(newUrl, 301);
  }

  return NextResponse.next();
}

方案B：修正next.config.js的redirects配置 #

之前的配置问题在于host匹配规则错误，需指定完整的www域名，且目标地址要包含完整非www域名：

// next.config.js
module.exports = {
  trailingSlash: true,
  async redirects() {
    return [
      {
        source: '/:path*',
        has: [
          {
            type: 'host',
            value: 'www.cvtips.nl', // 填写完整www域名，不带协议
          },
        ],
        destination: 'https://cvtips.nl/:path*', // 完整非www域名+路径
        permanent: true,
      },
    ];
  },
};

之前配置无效的原因 #

1. redirects配置问题：
   • 前两种配置中value: 'www'仅匹配host为www的场景，无法匹配你的实际域名www.cvtips.nl；且目标地址未带完整域名，仅会重定向路径而非域名。
   • 第三种配置中value包含https://，但HTTP请求的host头不包含协议，导致匹配失败。
2. Middleware配置问题：
   • Pages Router版本中，根目录的middleware.js不生效，必须放在pages/_middleware.js；若为静态导出，middleware本身无法运行。

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