如何在分部署的Next.js应用中实现路由路径翻译

核心结论：无需创建多个页面文件，推荐两种低成本方案 #

结合你**单独部署、仅修改env.country**的模式，完全不用为每个国家单独写页面文件，这不仅不是唯一方案，反而会大幅增加维护成本。下面是两种最优实现思路：

方案一：动态路由+环境变量映射校验 #

1. 在pages目录下创建动态路由文件，比如pages/[slug].tsx
2. 项目中维护路由映射表，根据环境变量匹配对应slug：

   // route-mappings.ts
   export const ROUTE_SLUGS = {
     de: 'route-path-in-de',
     es: 'route-path-in-es',
     fr: 'route-path-in-fr',
   };
   

3. 在动态路由文件中，通过服务端渲染方法校验请求slug是否匹配当前环境的预期值：

   // pages/[slug].tsx
   import { ROUTE_SLUGS } from '../route-mappings';
   
   export async function getServerSideProps(context) {
     const { slug } = context.params;
     const expectedSlug = ROUTE_SLUGS[process.env.COUNTRY];
   
     if (slug !== expectedSlug) {
       return { notFound: true }; // 或重定向到正确slug
     }
   
     return { props: {} };
   }
   
   export default function TargetPage() {
     return <div>页面内容</div>;
   }
   

4. 内部链接生成时，直接根据环境变量取对应slug：

   import Link from 'next/link';
   import { ROUTE_SLUGS } from '../route-mappings';
   
   function Nav() {
     const targetSlug = ROUTE_SLUGS[process.env.COUNTRY];
     return <Link href={`/${targetSlug}`}>目标页面</Link>;
   }
   

方案二：Next.js路由重写（推荐） #

这种方式更简洁，无需修改页面逻辑，通过配置实现不同slug指向同一页面：

1. 在next.config.js中根据环境变量配置重写规则：

   // next.config.js
   const ROUTE_SLUGS = {
     de: 'route-path-in-de',
     es: 'route-path-in-es',
     fr: 'route-path-in-fr',
   };
   
   module.exports = () => {
     const targetSlug = ROUTE_SLUGS[process.env.COUNTRY];
     return {
       async rewrites() {
         return [
           {
             source: `/${targetSlug}`,
             destination: '/target-page', // 对应pages/target-page.tsx
           },
         ];
       },
     };
   };
   

2. 创建统一页面文件pages/target-page.tsx，所有国家的请求都会通过重写指向这个页面，无需重复创建文件。

不推荐多页面文件的原因 #

• 维护成本高：同一份页面逻辑要复制多份，后续修改需同步所有文件，极易出错
• 违背DRY原则：重复代码会增加项目复杂度，完全没必要

以上两种方案都完美适配你“单独部署、仅改环境变量”的模式，既满足语义化路由需求，又避免了冗余代码。

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