如何将非www域名重定向至www域名？（NextJS+Vercel环境）

针对你的需求，有三种简单可行的方法，按推荐程度排序：

方法一：Vercel控制台直接配置（推荐，无需改代码） #

这是最快捷的方式，适合大多数场景：

• 登录你的Vercel项目控制台，进入 Settings > Domains 页面
• 找到不带www的主域名 beamanalytics.io，点击右侧的三个点图标，选择「Edit」
• 在弹出的配置窗口中，设置「Redirect to」为 www.beamanalytics.io，状态码选择 301（Permanent Redirect）（永久重定向对SEO最友好）
• 保存设置，等待数分钟后配置即可生效

方法二：通过NextJS的next.config.js配置 #

如果需要在代码层面统一管理重定向规则：
在项目根目录的next.config.js文件中添加redirects配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/:path*',
        has: [
          {
            type: 'host',
            value: 'beamanalytics.io',
          },
        ],
        destination: 'https://www.beamanalytics.io/:path*',
        permanent: true, // 启用301永久重定向
      },
    ];
  },
};

module.exports = nextConfig;

配置说明：

• 匹配所有来自beamanalytics.io的请求（无论路径是什么）
• 自动重定向到www.beamanalytics.io对应的路径
• permanent: true确保返回301状态码，传递SEO权重

修改后重新部署项目即可生效。

方法三：使用NextJS Middleware（适合复杂逻辑场景） #

如果需要添加自定义判断逻辑（比如排除特定路径），可以用Middleware：
在项目根目录创建middleware.ts（或.js）文件：

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

export function middleware(request: NextRequest) {
  const host = request.headers.get('host');
  
  // 检测请求是否来自非www域名
  if (host === 'beamanalytics.io') {
    const redirectUrl = request.nextUrl.clone();
    redirectUrl.host = 'www.beamanalytics.io';
    // 返回301永久重定向
    return NextResponse.redirect(redirectUrl, { status: 301 });
  }
  
  return NextResponse.next();
}

// 匹配所有路径
export const config = {
  matcher: '/:path*',
};

这种方式灵活性更高，你可以根据需求扩展逻辑（比如只重定向特定路径、添加UA判断等）。

关键注意事项 #

• 务必使用301永久重定向，这是SEO优化的核心，能让搜索引擎将原域名的权重转移到www域名上
• 若使用代码配置的方法，部署后需要等待Vercel完成重新构建和发布
• 配置生效后，可以用浏览器的开发者工具（Network面板）检查重定向状态码是否为301

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