Next.js启用多语言后URL出现Locale重复问题

问题原因 #

启用Next.js的i18n路径路由后，框架会自动为页面添加配置好的locale前缀（比如/lt/），但你手动在pages目录下创建了lt子目录存放hello.jsx，这就导致路由被解析为[locale]/lt/hello，所以必须访问/lt/lt/hello才能匹配到页面。

解决方案 #

方案1：调整页面结构（推荐） #

删除pages下的lt子目录，将hello.jsx移到pages根目录，框架会自动处理locale路由：

• 访问/en/hello会加载pages/hello.jsx并使用en locale
• 访问/lt/hello会加载pages/hello.jsx并使用lt locale

如果不同locale需要不同页面内容，可通过以下方式实现：

• 在hello.jsx中用useRouter()获取当前locale，根据locale渲染对应内容
• 使用Next.js国际化文件命名规则，创建pages/hello.lt.jsx和pages/hello.en.jsx，框架会自动匹配对应locale的页面

调整后的页面结构：

--pages
  hello.jsx
  index.jsx

方案2：保留子目录结构（不推荐） #

若必须保留lt子目录，可改用动态路由适配：

1. 保持next.config.js的i18n配置不变
2. 将pages/lt/hello.jsx替换为pages/[locale]/hello.jsx
3. 在组件中验证locale参数是否合法，不合法则重定向到默认locale

示例代码（pages/[locale]/hello.jsx）：

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function Hello() {
  const router = useRouter();
  const { locale } = router.query;

  useEffect(() => {
    const validLocales = ['en', 'lt'];
    if (!validLocales.includes(locale)) {
      router.push('/en/hello');
    }
  }, [locale, router]);

  return <div>Hello from {locale}</div>;
}

这种方式维护成本较高，优先选择方案1。

验证方法 #

修改后删除.next文件夹和缓存，重新启动开发服务器，访问/lt/hello即可正常打开页面。

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