如何在Next.js中实现波斯语路由？

核心思路 #

通过Next.js的路由重写（Rewrites）功能，将波斯语URL映射到项目内部的英文文件名路由，既避免直接使用波斯语文件名的问题，又能让用户看到友好的波斯语路径。

一、App Router（Next.js 13+）方案 #

1. 创建基础路由文件
   在app目录下用英文命名创建对应的路由结构：

• app/home/page.js → 对应波斯语路径 /سلام
• app/start/end/page.js → 对应波斯语路径 /شروع/پایان
• app/[slug]/end/page.js → 对应波斯语路径 /:slug/پایان

2. 配置路由重写
   在项目根目录的next.config.js中添加rewrites配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/سلام',
        destination: '/home',
      },
      {
        source: '/شروع/پایان',
        destination: '/start/end',
      },
      {
        source: '/:slug/پایان',
        destination: '/:slug/end',
      },
    ];
  },
};

module.exports = nextConfig;

3. 动态路由参数获取
   在app/[slug]/end/page.js中，依然通过params对象获取动态参数，和普通动态路由逻辑一致：

export default function EndPage({ params }) {
  return <div>当前Slug：{params.slug}</div>;
}

二、Pages Router（Next.js 12及以下）方案 #

1. 创建基础路由文件
   在pages目录下用英文命名创建路由结构：

• pages/home.js → 对应波斯语路径 /سلام
• pages/start/end.js → 对应波斯语路径 /شروع/پایان
• pages/[slug]/end.js → 对应波斯语路径 /:slug/پایان

2. 配置路由重写
   同样在next.config.js中添加rewrites配置，和App Router的配置完全一致：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/سلام',
        destination: '/home',
      },
      {
        source: '/شروع/پایان',
        destination: '/start/end',
      },
      {
        source: '/:slug/پایان',
        destination: '/:slug/end',
      },
    ];
  },
};

module.exports = nextConfig;

3. 动态路由参数获取
   在pages/[slug]/end.js中，通过router.query获取参数：

import { useRouter } from 'next/router';

export default function EndPage() {
  const router = useRouter();
  const { slug } = router.query;
  return <div>当前Slug：{slug}</div>;
}

注意事项 #

• 确保next.config.js文件以UTF-8编码保存，避免波斯语字符出现乱码问题。
• 页面内跳转时，直接使用波斯语路径（如<Link href="/سلام">或router.push('/سلام')），用户端将显示波斯语URL。
• 若需静态站点生成（SSG），动态路由的静态参数可通过generateStaticParams（App Router）或getStaticPaths（Pages Router）生成，结合重写配置即可生成对应的波斯语静态路径。

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