Next.js 13 App目录下AppRouterInstance无locale属性的替代方案咨询

在Next.js 13的App目录下，next/navigation提供的useRouter确实没有locale属性，且原next/router不再适用，以下是不同场景下获取locale的替代方法：

服务器组件（Server Components） #

方法1：从路由参数获取（推荐） #

如果你的路由结构采用[locale]动态路由（比如app/[locale]/page.js），可直接从组件的params参数中解构locale：

// app/[locale]/page.js
export default function Page({ params }) {
  const { locale } = params;
  return <div>当前语言：{locale}</div>;
}

方法2：从请求头获取 #

通过next/headers提供的headers()方法，读取next-language请求头获取当前locale：

import { headers } from 'next/headers';

export default function Page() {
  const headersList = headers();
  const locale = headersList.get('next-language');
  return <div>当前语言：{locale}</div>;
}

客户端组件（Client Components） #

Next.js 13.4及以上版本提供了专门的useLocale钩子，用于客户端组件获取locale，使用前需先在next.config.js中配置国际化路由：

1. 配置国际化路由 #

在next.config.js中添加i18n配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'zh-CN', 'es'],
    defaultLocale: 'en',
  },
};

module.exports = nextConfig;

2. 使用useLocale钩子 #

在客户端组件中导入并使用useLocale：

'use client';

import { useLocale } from 'next/navigation';

export default function ClientComponent() {
  const locale = useLocale();
  return <div>当前语言：{locale}</div>;
}

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