Next.js i18n路由下,如何创建仅单语言可用的页面?
解决Next.js国际化路由下仅生成特定语言页面的问题
方法1:动态路由+getStaticPaths限定语言
创建动态语言路由页面pages/[lang]/my-page-just-for-fr.tsx,通过getStaticPaths只返回目标语言的路径,从根源阻止其他语言路由生成:
// pages/[lang]/my-page-just-for-fr.tsx import { GetStaticPaths, GetStaticProps } from 'next'; export default function FrOnlyPage() { return <div>仅法语用户可见的页面</div>; } export const getStaticPaths: GetStaticPaths = async () => { // 只生成fr语言的路由 return { paths: [{ params: { lang: 'fr' } }], fallback: false, // 其他语言路径直接返回404 }; }; export const getStaticProps: GetStaticProps = async ({ params }) => { // 可添加语言相关的数据获取逻辑 return { props: {} }; };
这种方式会严格只生成/fr/my-page-just-for-fr路由,不会为gb、us生成对应页面。
方法2:创建专属语言目录
直接在pages下创建fr目录,放入专属页面pages/fr/my-page-just-for-fr.tsx:
// pages/fr/my-page-just-for-fr.tsx export default function FrOnlyPage() { return <div>仅法语用户可见的页面</div>; }
Next.js的国际化路由只会自动处理根目录下的页面(如pages/my-page.tsx),带语言前缀的子目录页面不会被自动生成多语言路由,因此只会生成/fr/my-page-just-for-fr这一条路由,完全符合需求。
注意事项
- 若使用App Router(Next.js 13+),逻辑类似:在
app/[lang]目录下创建页面,通过generateStaticParams返回仅fr的参数;或直接创建app/fr/my-page-just-for-fr/page.tsx。 - 无需使用rewrites/redirects,这类方案仅在请求时跳转,无用路由仍会被生成,不符合“从一开始不生成”的需求。
内容的提问来源于stack exchange,提问作者Bret Cameron
相关产品推荐
相关产品推荐

