Next.js 13 App Router：非客户端组件如何获取Locale？

完全可以在不添加'use client'指令的服务器组件中获取Locale，核心是利用App Router的路由参数传递特性，替代客户端的useRouter钩子。以下是具体实现步骤：

1. 调整路由结构 #

将路由改为带[lang]动态段的结构，对应你的语言列表（en/ru），示例目录结构：

app/
├── [lang]/
│   ├── layout.js
│   ├── page.js
│   └── Header.js

2. 在布局/页面组件中获取Locale并加载语言文件 #

布局（layout.js）或页面（page.js）作为服务器组件，会自动接收包含lang参数的params对象，直接解构即可获取Locale，再加载对应语言文件：

// app/[lang]/layout.js
import en from '@/public/locales/en.json';
import ru from '@/public/locales/ru.json';
import Header from './Header';

export default function RootLayout({ children, params }) {
  const { lang } = params;
  // 根据Locale加载对应语言包
  const t = lang === 'en' ? en : ru;

  return (
    <html lang={lang}>
      <body>
        {/* 将翻译对象传递给子组件Header（服务器组件） */}
        <Header t={t} />
        {children}
      </body>
    </html>
  );
}

3. 子组件直接使用翻译内容 #

子组件Header无需添加'use client'，直接接收传递过来的翻译对象即可：

// app/[lang]/Header.js
export default function Header({ t }) {
  return <div>{t.title}</div>;
}

4. 静态生成多语言页面（可选） #

如果需要静态生成各语言版本的页面，在页面组件中添加generateStaticParams函数预生成参数：

// app/[lang]/page.js
export async function generateStaticParams() {
  // 返回所有支持的Locale
  return ['en', 'ru'].map(lang => ({ lang }));
}

注意事项 #

• 移除next.config.js中Pages Router风格的i18n配置，App Router推荐使用动态路由实现国际化；
• 服务器组件中无法使用useRouter等客户端钩子，必须通过路由参数或上下文获取Locale；
• 语言文件的静态导入仅在服务器组件中支持，客户端组件需改用动态导入或其他方式。

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