Next.js App v13+中根据当前页面实现语言切换按钮的正确方案

核心思路：用客户端组件处理路径与语言切换逻辑 #

不需要强制页面动态生成，也不用在服务端传递大量URL，具体步骤如下：

• 将语言切换按钮封装为客户端组件
  在导航栏的Layout里，把语言切换的部分单独做成带'use client'指令的客户端组件。这样就能在组件内部正常调用usePathname()获取当前页面的路径，绕开服务端无法使用该API的限制。

• 基于当前路径动态生成本地化URL
  根据你的国际化路由配置（前缀式/域名式），写一个简单的路径转换函数：

  • 如果是前缀式路由（比如/en/about、/fr/about）：

    // 客户端组件内的函数
    const getLocalizedPath = (targetLang) => {
      const pathname = usePathname();
      // 匹配现有语言前缀并替换
      const langRegex = /^\/[a-z]{2}(\/.*)?$/;
      if (langRegex.test(pathname)) {
        return pathname.replace(/^\/[a-z]{2}/, `/${targetLang}`);
      }
      // 没有前缀时添加目标语言前缀
      return `/${targetLang}${pathname}`;
    };
    

  • 如果是域名式路由：
    提前配置好不同语言对应的域名映射，直接替换域名部分，保留当前pathname即可。

• 保持页面静态生成能力
  因为语言切换逻辑完全在客户端执行，静态生成的页面加载后，客户端组件会自动获取当前路径并生成正确的切换链接，既不影响页面的静态构建，也避免了传递数千个页面URL导致的payload过大问题。

对比临时方案的优势 #

你的临时方案需要强制页面动态生成，会牺牲静态页面的性能优势。而上面的方法既满足了语言切换依赖当前页面的需求，又能保留Next.js静态生成的特性，同时不会产生额外的payload负担。

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