NextJS中如何配置域名重定向到对应locale路径？

两种常用实现方式，根据项目场景选择即可：

方案1：通过 next.config.js 原生重定向规则配置（推荐，性能最优） #

该方案兼容所有NextJS版本（Pages Router/App Router 均支持），规则在构建阶段生效，无额外运行时开销。
直接在项目根目录的next.config.js中添加如下重定向配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/:path*',
        // 匹配访问巴西域名的请求
        has: [
          {
            type: 'host',
            value: 'eldes.com.br',
          },
        ],
        // 跳转到主域名的/br前缀对应路径，自动保留路径参数
        destination: 'https://eldes.com/br/:path*',
        permanent: true, // 返回301永久重定向，利于SEO；调试阶段可临时设为false返回302临时重定向
      },
    ]
  },
}

module.exports = nextConfig

补充配置 #

如果需要同时匹配带www前缀的巴西域名（www.eldes.com.br），将host匹配规则改为正则匹配即可：

has: [
  {
    type: 'host',
    value: '(www\\.)?eldes\\.com\\.br',
  },
]

该规则默认会自动携带原请求的查询参数，比如访问eldes.com.br/cellphone?brand=apple会自动跳转到eldes.com/br/cellphone?brand=apple，无需额外配置。

方案2：通过Middleware中间件实现（适合有复杂逻辑的场景） #

如果重定向规则需要叠加其他判断逻辑（比如区分用户地区、登录状态等），可以用NextJS 12+ 支持的边缘中间件实现。

1. 在项目根目录（和app/pages目录同级）新建middleware.js文件：

import { NextResponse } from 'next/server'

export function middleware(request) {
  const { nextUrl: url } = request
  // 匹配巴西域名（含www前缀）
  if (['eldes.com.br', 'www.eldes.com.br'].includes(url.host)) {
    // 构造目标跳转地址
    const targetUrl = new URL(`/br${url.pathname}`, 'https://eldes.com')
    // 携带原请求的查询参数
    targetUrl.search = url.search
    // 返回301重定向
    return NextResponse.redirect(targetUrl, { status: 301 })
  }
  // 其余请求正常放行
  return NextResponse.next()
}

// 配置中间件生效的路径范围
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'], // 排除接口、静态资源路径，避免不必要的重定向
}

生效说明 #

修改配置后需要重启本地开发服务，线上环境重新构建发布后规则即可生效。

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