如何用next-intl实现语言切换？next/router报错转next/navigation方案

问题背景 #

原代码使用next/router（Pages Router API）在App Router环境下报错，需切换为next/navigation（App Router导航API）实现EN/ES语言切换功能。

修复后的代码实现 #

"use client";
import { useLocale } from "next-intl";
import { locales, localeNames } from "../../i18nconfig";
import Link from "next/link";
import { Fragment } from "react";
import { usePathname, useSearchParams } from "next/navigation";

export default function LocaleSwitcher() {
  const locale = useLocale();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const queryString = searchParams.toString();

  return (
    <div className="flex space-x-1">
      {locales.map((loc) => (
        <Fragment key={loc}>
          <Link
            href={{
              pathname,
              search: queryString,
            }}
            locale={loc}
            className={`text-blue-500 hover:underline ${
              locale === loc ? "font-semibold" : ""
            }`}
          >
            {localeNames[loc]}
          </Link>
          {loc !== locales[locales.length - 1] && (
            <span className="font-semibold">|</span>
          )}
        </Fragment>
      ))}
    </div>
  );
}

关键修改点 #

1. 替换导航API：移除next/router的useRouter，改用next/navigation的usePathname（自动忽略locale前缀的当前路径）和useSearchParams（获取查询参数）。
2. 简化切换逻辑：利用Link组件的locale属性直接生成对应语言的路由，无需手动调用router.push，next-intl会自动处理本地化路径前缀（如/en/about或/es/about）。
3. 移除过时属性：删除Link的legacyBehavior、passHref属性，这些是Pages Router的兼容特性，App Router下无需使用。
4. 保留页面状态：切换语言时自动保留当前页面的路径和查询参数，避免跳转回首页。

注意事项 #

确保你的i18nconfig.ts配置正确，示例如下：

export const locales = ["en", "es"];
export const localeNames = {
  en: "English",
  es: "Español",
};

内容的提问来源于stack exchange，提问作者Alexis Esteban Herrera Benitez