You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.01 02:15:34