Next.js 13 App路由国际化问题：页面导航时Locale未被保留

你遇到的问题是App Router默认不会自动继承当前Locale到导航链接里，官方其实有集成化的处理方式，不用手动写工具函数加前缀，具体如下：

1. 使用router.push时指定Locale #

在App Router的useRouter钩子中，直接通过配置项指定当前Locale：

'use client';
import { useRouter } from 'next/navigation';

const SomeComponent = () => {
  const router = useRouter();

  const handleNavigate = () => {
    // 方式1：直接传入当前locale
    router.push('/some/link', { locale: router.locale });
    // 方式2：Next.js 13.4+ 支持 'current' 关键字，自动使用当前locale
    router.push('/some/link', { locale: 'current' });
  };

  return <button onClick={handleNavigate}>跳转</button>;
};

2. 给<Link>组件添加Locale属性 #

App Router的<Link>组件支持locale属性，同样可以指定为当前Locale或者'current'关键字：

// 客户端组件中使用
'use client';
import Link from 'next/link';
import { useRouter } from 'next/navigation';

const NavLink = () => {
  const router = useRouter();
  return <Link href="/some/link" locale={router.locale}>跳转页面</Link>;
};

// 服务器组件中使用（从params获取locale）
import Link from 'next/link';

const ServerNavLink = ({ params }) => {
  return <Link href="/some/link" locale={params.locale}>跳转页面</Link>;
};

注意：如果你的服务器组件是在[locale]路由下，params会包含当前的locale参数，直接传入即可。

3. 全局封装LocaleLink组件（推荐） #

为了避免每个Link都手动加locale属性，可以封装一个全局的LocaleLink组件，自动继承当前Locale：

// app/components/LocaleLink.jsx
'use client';
import Link from 'next/link';
import { useRouter } from 'next/navigation';

const LocaleLink = ({ href, children, ...props }) => {
  const router = useRouter();
  return <Link href={href} locale={router.locale} {...props}>{children}</Link>;
};

export default LocaleLink;

之后在项目中直接用LocaleLink替代原生Link，不用再手动处理Locale。

4. 检查Next.js配置 #

确保next.config.js中的国际化配置正确，比如：

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'zh-CN'],
    defaultLocale: 'en',
    // 如果希望默认Locale也显示前缀（比如/en/home），开启下面配置
    // prefixDefaultLocale: true,
  },
};

module.exports = nextConfig;

这些都是官方支持的集成化方案，比手动拼接URL前缀更可靠，也能避免因路由结构变化导致的错误。

内容的提问来源于stack exchange，提问作者N. Doe