Next.js实现非www域名重定向至www域名的方法

方案一：通过 next.config.js 配置重定向 #

如果你的项目部署在Vercel或支持Next.js静态导出的平台，可以直接在配置文件中设置重定向规则，操作简单无需额外文件。

修改项目根目录的 next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/:path*',
        has: [
          {
            type: 'host',
            value: '^yourdomain\\.com$', // 替换为你的非www域名
          },
        ],
        destination: 'https://www.yourdomain.com/:path*', // 替换为带www的目标域名
        permanent: true, // 301永久重定向，利于SEO
      },
    ];
  },
};

module.exports = nextConfig;

• 替换代码中的 yourdomain.com 为实际域名，正则里的.需要用\\转义。
• permanent: true 对应301状态码，适合长期重定向；若需临时重定向，改为 false 返回302状态码即可。

方案二：使用 middleware.js 实现全局重定向 #

如果 next.config.js 的规则在你的部署环境不生效（比如自定义服务器、非Vercel平台），推荐用Next.js中间件实现，兼容性更强，支持Next.js 12及以上版本。

在项目根目录创建 middleware.js 文件，添加以下代码：

import { NextResponse } from 'next/server';

export function middleware(request) {
  const host = request.headers.get('host');
  
  // 匹配非www的主域名请求
  if (host && host === 'yourdomain.com') {
    const url = new URL(request.url);
    url.host = 'www.yourdomain.com';
    // 返回301永久重定向
    return NextResponse.redirect(url, { status: 301 });
  }

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

// 配置中间件作用于所有路径
export const config = {
  matcher: '/:path*',
};

• 替换代码中的 yourdomain.com 和 www.yourdomain.com 为实际域名。
• 中间件会拦截所有请求，检查Host头，非www域名请求会自动重定向到对应www地址。

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