Next.js App Router 中正确获取当前 locale 的方法-js教程-PHP中文网

Next.js App Router 中正确获取当前 locale 的方法

在 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 (
    
      {children}
    
  );
}

⚠️ 注意事项：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

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' —— 它将导致构建失败或运行时错误。