Next.js 13中app/[locale]子目录国际化失效求助

当前问题说明 #

你在app/目录下创建嵌套的[locale]/文件夹后访问出现404，结合你的next.config.js配置来看，核心原因是Next.js 13的app目录目前不计划内置i18n国际化路由支持，官方已明确该特性不在当前规划内，相关议题暂未给出官方解决方案。

可行替代方案 #

1. 手动实现服务端组件适配的i18n #

通过自定义[locale]路由参数，在服务端组件中手动加载对应语言资源，避免依赖官方未支持的内置i18n逻辑：

步骤示例：

1. 创建语言资源文件（如dictionaries/en.json、dictionaries/fr.json）：

// en.json
{
  "hello": "Hello World",
  "welcome": "Welcome to our app"
}

2. 编写服务端工具函数加载语言资源：

// lib/dictionaries.js
import 'server-only';

const dictionaries = {
  en: () => import('../dictionaries/en.json').then(module => module.default),
  fr: () => import('../dictionaries/fr.json').then(module => module.default),
};

export async function getDictionary(locale) {
  // 非法locale默认回退到英文
  return dictionaries[locale]?.() ?? dictionaries.en();
}

3. 在页面组件中使用：

// app/[locale]/page.js
import { getDictionary } from '@/lib/dictionaries';

export default async function Page({ params: { locale } }) {
  const dict = await getDictionary(locale);
  return (
    <div>
      <h1>{dict.hello}</h1>
      <p>{dict.welcome}</p>
    </div>
  );
}

4. 添加路由校验（可选）：
   在app/[locale]/layout.js中校验locale参数，非法参数重定向到默认语言：

import { redirect } from 'next/navigation';

export default async function LocaleLayout({ children, params: { locale } }) {
  const validLocales = ['en', 'fr'];
  if (!validLocales.includes(locale)) {
    redirect('/fr');
  }
  return <>{children}</>;
}

2. 使用适配app目录的第三方i18n库 #

选择支持React Server Components的第三方库，比如next-intl（需使用适配app目录的版本），这类库已封装好路由适配、服务端资源加载等逻辑，无需手动处理复杂细节。

3. 回退到Pages目录的内置i18n #

如果对app目录的特性需求不迫切，可暂时使用Pages目录的内置i18n方案，它完全支持服务端渲染和国际化路由，等app目录的i18n支持完善后再迁移。

关键注意点 #

• 不要在app目录下依赖官方的i18n配置项，该配置仅对Pages目录生效，会和自定义[locale]路由冲突导致404
• 服务端组件中加载语言资源时，需使用server-only确保代码仅在服务端运行，避免客户端打包错误
• 自定义路由时要做好locale参数的合法性校验，避免非法请求引发错误

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