在 Next.js App Router 中，next/router 已不适用于服务端组件且无法访问 locale；应通过页面/布局的 params 解构获取动态路由段（如 [lang]），这是官方推荐、类型安全且 SSR 友好的方式。
在 next.js app router 中，`next/router` 已不适用于服务端组件且无法访问 `locale`；应通过页面/布局的 `params` 解构获取动态路由段（如 `[lang]`），这是官方推荐、类型安全且 ssr 友好的方式。
Next.js 的 App Router 对国际化（i18n）提供了原生、声明式的支持，但其机制与旧的 Pages Router 截然不同。你遇到的 Router was not mounted 错误，根本原因在于：next/router 是 Pages Router 专用的客户端路由工具，它在 App Router 的服务端组件（如 app/[lang]/page.tsx）中不可用，也无法在服务端获取 locale 或 locales 等信息。 即使强制在客户端组件中使用，也因路由未完成挂载而抛出该错误。
✅ 正确做法是：利用 App Router 的动态路由段 + 参数透传机制。
你需要将所有国际化页面组织在 app/[lang] 目录下（例如 app/[lang]/page.tsx、app/[lang]/products/page.tsx），Next.js 会自动将路径中的语言标识（如 en-US、zh-CN）作为 params.lang 注入到每个页面和布局的 props 中：
// app/[lang]/page.tsx
export default function HomePage({
params: { lang }
}: {
params: { lang: string }
}) {
// ✅ 安全、服务端可读、无需等待挂载
console.log('Current locale:', lang); // e.g. "en-US"
return (
<div>
<h1>Welcome to {lang} homepage</h1>
{/* 可用于加载对应 locale 的文案、时区、货币等 */}
</div>
);
}同时，你还可以在根布局中统一处理 locale（如设置 ）：
// app/[lang]/layout.tsx
export default function LocaleLayout({
children,
params: { lang }
}: {
children: React.ReactNode;
params: { lang: string };
}) {
return (
<html lang={lang}>
<body>{children}</body>
</html>
);
}⚠️ 注意事项：
-
next/navigation（含useRouter,useSearchParams）仅提供导航能力，不暴露locale/locales—— 这些信息必须通过params获取； - 确保
i18n配置已在next.config.js中正确声明（如i18n: { locales: ['en-US', 'zh-CN'], defaultLocale: 'en-US' }），否则动态路由不会被识别； - 若需在客户端组件中使用 locale，可通过
props向下传递，或使用usePathname()+ 字符串解析（不推荐，缺乏类型保障）； - 不要尝试在服务端组件中
import 'next/router'—— 它将导致构建失败或运行时错误。
总结：App Router 的国际化是“路由即 locale”，一切以 params 为中心。放弃 next/router 的旧思维，拥抱基于文件系统和参数解构的现代化 i18n 模式，才能写出稳定、可维护、符合 Next.js 设计哲学的多语言应用。
