Next.js多分区搭配i18n及共享组件使用的相关问题咨询

问题1：i18n路由与multi zone结合时locale位置异常 #

这个问题可以通过配置rewrites规则，手动控制locale的拼接顺序解决，核心是关闭Next.js默认的locale自动追加逻辑：

1. 确保两个应用的next.config.js中的i18n配置完全一致，包含相同的locales列表、默认locale配置
2. 在主应用（3000端口）的next.config.js中添加如下rewrites规则：

// 主应用 next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'zh'], // 和博客应用配置完全一致
    defaultLocale: 'en',
  },
  async rewrites() {
    return [
      {
        // 匹配带locale前缀的博客路径
        source: '/:locale(en|zh)/blog/:path*',
        // 手动把locale放在路径最前面传递给博客应用
        destination: 'http://localhost:4200/:locale/blog/:path*',
        // 关键配置：关闭Next.js自动处理locale的逻辑，避免locale被追加到路径末尾
        locale: false,
      }
    ]
  }
}

3. 博客应用的next.config.js中不需要额外修改rewrites，保持和主应用相同的i18n配置即可，跳转时不需要手动拼接locale参数，next/link会自动匹配规则。

问题2：跨应用导航触发整页刷新 #

这个问题的核心是不要让导航直接跳转到不同端口的地址，所有路径统一走同一个入口域名，通过rewrites做请求转发，就能保留Next.js的客户端导航能力：

1. 调整架构逻辑，用户所有访问都走主应用的3000端口，不会直接访问博客的4200端口，所有博客相关路径都通过主应用的rewrites代理到博客应用服务
2. 在共享的公共组件库中封装自定义的跨应用Link组件，内置路径归属判断逻辑，不需要手动拼接域名：

// 公共组件库的自定义Link组件
import NextLink from 'next/link'

const AppLink = ({ href, ...rest }) => {
  // 所有路径都走当前域名，由rewrites自动转发到对应zone
  // 不需要拼接其他端口的域名，自然支持客户端导航
  return <NextLink href={href} {...rest} />
}

export default AppLink

3. 如果有特殊路径需要区分，只需要预先定义好各zone的路径前缀规则做判断即可，所有跨应用的跳转都会被Next.js识别为同域名下的导航，不会触发整页刷新。

补充说明 #

multi zone完全可以支撑中大型应用的拆分，只要做好统一的路径规则配置、两个应用的Next.js版本保持兼容即可，不需要做额外的复杂适配。

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