如何在 Next.js 中切换语言时不向浏览器历史栈添加新条目-js教程-PHP中文网

如何在 Next.js 中切换语言时不向浏览器历史栈添加新条目

在 Next.js 应用中使用 next-translate 切换语言时，默认的 setLanguage 会调用 router.push，导致多余的历史记录；本文介绍通过自定义 setLanguage 函数并启用 router.replace 模式，实现无痕语言切换。

在 next.js 应用中使用 `next-translate` 切换语言时，默认的 `setlanguage` 会调用 `router.push`，导致多余的历史记录；本文介绍通过自定义 `setlanguage` 函数并启用 `router.replace` 模式，实现无痕语言切换。

Next.js 的国际化路由机制依赖于 router.push 或 router.replace 来更新 URL 并触发语言切换。默认 next-translate 提供的 setLanguage 内部始终使用 Router.push()，这会在浏览器历史栈中新增一条记录——用户点击「返回」时将回到上一个语言状态，随后又被自动重定向，造成体验割裂与逻辑混乱。

要彻底避免该问题，核心思路是：用 router.replace 替代 router.push，即在不新增历史条目的前提下，就地更新当前路由的 locale 参数。由于 next-translate 的原生 setLanguage 不支持此行为，我们需要封装一个增强版函数。

以下是一个轻量、可复用的自定义 setLanguage 实现（兼容 next@13+ 和 next-translate@v2）：

// lib/setLanguage.ts
import { useRouter } from 'next/router';

export default async function setLanguage(
  locale: string,
  options: { scroll?: boolean; replace?: boolean } = {}
): Promise<boolean> {
  const { scroll = true, replace = false } = options;
  const router = useRouter();

  try {
    await router[replace ? 'replace' : 'push'](
      {
        pathname: router.pathname,
        query: router.query,
      },
      router.asPath,
      {
        locale,
        scroll,
        shallow: true, // 避免重复数据获取（如 getStaticProps）
      }
    );
    return true;
  } catch (err) {
    console.error('Failed to set language:', err);
    return false;
  }
}</boolean>

在组件中调用时，只需传入 { replace: true } 即可：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

// components/LanguageDropdown.tsx
import { useRouter } from 'next/router';
import setLanguage from '@/lib/setLanguage';

export const LanguageDropdown = () => {
  const { locales, locale } = useRouter();

  const updateLanguage = async (language: string) => {
    const selectedLang = language.toLowerCase();
    window.localStorage.setItem('language-selected', selectedLang);

    // 关键：使用 replace 模式，不新增 history entry
    await setLanguage(selectedLang, { replace: true });
  };

  return (
    <select onchange="{(e)"> updateLanguage(e.target.value)} value={locale}>
      {locales?.map((lang) => (
        <option key="{lang}" value="{lang}">
          {lang.toUpperCase()}
        </option>
      ))}
    </select>
  );
};

✅ 注意事项与最佳实践：

shallow: true 是推荐选项（尤其在静态生成页面中），它防止触发服务端数据重新获取，提升响应速度；
若项目启用了 getServerSideProps 或 getStaticProps，请确保语言切换后仍能正确渲染对应 locale 的内容（next-translate 已自动处理 i18n 数据 hydration）；
建议在 useEffect 中同步 localStorage 与初始路由 locale，避免首屏闪烁（例如：从 localStorage 读取语言并提前设置 router.locale）；
如需支持动态路由参数（如 /blog/[slug]），上述代码已通过 router.pathname + router.query 完整保留路径结构，无需额外适配。