Next.js i18n路由问题：locale、locales及defaultLocale值为undefined

你遇到的核心问题是：Next.js 13 App Router（app目录）下，next/navigation导出的useRouter不再提供locale、locales、defaultLocale属性——这些是Pages Router（pages目录）的专属API，在App Router中已被替换。

以下是两种可行的解决方案：

方案一：使用Next.js官方App Router原生i18n方案 #

1. 调整目录结构 #

App Router的i18n路由需要对应目录结构，推荐两种方式：

• 为每个locale创建独立路由目录：app/tr/page.js、app/en/page.js
• 使用动态路由统一处理：app/[lang]/page.js（更高效，减少重复代码）

2. 获取当前Locale #

• 服务器组件：直接通过params获取（动态路由场景）

  // app/[lang]/page.js
  export default function Home({ params }) {
    const currentLocale = params.lang;
    return (
      <div>
        <h1>Hello World</h1>
        <p>当前Locale：{currentLocale}</p>
        <ClientSideLocale />
      </div>
    );
  }
  

• 客户端组件：使用next/navigation导出的useLocale()

  "use client";
  import { useLocale } from "next/navigation";
  
  export default function ClientSideLocale() {
    const locale = useLocale();
    return <p>客户端获取Locale：{locale}</p>;
  }
  

3. 获取配置的locales和defaultLocale #

客户端无法直接读取next.config.js，建议将i18n配置抽离为单独常量文件，全局复用：

// config/i18n.js
export const i18nConfig = {
  locales: ["tr", "en"],
  defaultLocale: "tr",
};

在next.config.js和组件中引用：

// next.config.js
const { i18nConfig } = require("./config/i18n");

const nextConfig = {
  i18n: i18nConfig,
};

module.exports = nextConfig;

组件内直接使用：

import { i18nConfig } from "../config/i18n";

// 组件渲染部分
<p>默认Locale：{i18nConfig.defaultLocale}</p>
<p>所有配置Locale：{JSON.stringify(i18nConfig.locales)}</p>

方案二：使用next-intl库（更便捷的i18n方案） #

next-intl是专为Next.js设计的国际化库，完美适配App Router，支持翻译、日期/数字格式化等功能。

1. 安装依赖 #

npm install next-intl

2. 创建i18n配置文件 #

// i18n.js
import { createI18nClient } from "next-intl";
import tr from "./locales/tr.js";
import en from "./locales/en.js";

export default createI18nClient({
  locales: ["tr", "en"],
  defaultLocale: "tr",
  messages: { tr, en },
});

3. 配置根布局 #

// app/layout.js
import { NextIntlClientProvider } from "next-intl";
import i18n from "../i18n";

export default function RootLayout({ children, params }) {
  return (
    <html lang={params.lang}>
      <body>
        <NextIntlClientProvider i18n={i18n} locale={params.lang}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

4. 在组件中使用 #

"use client";
import { useTranslations, useLocale } from "next-intl";
import { i18nConfig } from "../config/i18n";

export default function Home() {
  const t = useTranslations();
  const locale = useLocale();

  return (
    <div>
      <h1>{t("hello")}</h1>
      <p>当前Locale：{locale}</p>
      <p>默认Locale：{i18nConfig.defaultLocale}</p>
      <p>所有配置Locale：{JSON.stringify(i18nConfig.locales)}</p>
    </div>
  );
}

额外注意事项 #

• 确保你的Next.js版本≥13.4.0（你的版本13.4.12符合要求），App Router的i18n功能在13.4版本后才稳定。
• 访问根路径/时，Next.js会自动重定向到默认Locale路径（如/tr），若需关闭自动检测，可在next.config.js的i18n配置中添加localeDetection: false。

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