Next.js：根据当前激活语言动态修改菜单URL

核心问题 #

1. 字符串模板解析失败：你用单引号包裹/introduction/${locale}，单引号不会解析模板变量，必须改用反引号才能让${locale}生效。
2. 默认语言路径冗余：Next.js默认语言（en）的URL不需要带/en后缀，当前写法会生成不符合需求的/introduction/en路径。
3. 重复调用useRouter：代码里两次调用useRouter()，完全可以合并为一次，避免冗余。

修正后的代码 #

_app.jsx

import { useRouter } from 'next/router';

export default function MyApp({ Component, pageProps }) {
  const { locale, defaultLocale } = useRouter();

  // 封装路径处理逻辑：默认语言时直接返回基础路径，非默认语言拼接locale
  const getLocalizedHref = (basePath) => {
    return locale === defaultLocale ? basePath : `${basePath}/${locale}`;
  };

  const menu = [
    {
      title: 'Introduction', // 可选：后续可通过i18n文案实现多语言标题切换
      links: [
        { 
          title: 'Introduction', 
          href: getLocalizedHref('/introduction') 
        },
      ],
    },
  ];

  return (
    // 渲染你的App组件，可将menu传递给布局组件使用
    <Component {...pageProps} menu={menu} />
  );
}

额外优化建议 #

• 菜单标题国际化：如果需要菜单标题也随语言切换，建议结合next-i18next这类工具，把固定的title替换为国际化函数调用（比如t('menu.introduction')）。
• 复用路径工具函数：把getLocalizedHref抽成项目级的工具函数，避免在多个组件中重复写路径判断逻辑。

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