Next.js动态页面国际化下回退页的处理问题咨询

方法1：通过useRouter直接获取locale #

在博客页面组件（pages/blog/[slug].js）中，利用Next.js的useRouter钩子直接读取当前路由的locale，无需依赖getStaticProps返回的props。fallback页面阶段，URL中的locale信息已存在，router能直接拿到，确保翻译函数使用正确的语言环境。

示例代码：

import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export default function BlogPost({ post, locale }) {
  const router = useRouter();
  // 优先用props里的locale，fallback阶段则取router.locale
  const currentLocale = locale || router.locale;
  const { t } = useTranslation('common', { locale: currentLocale });

  if (router.isFallback) {
    // 自定义回退页，用t函数渲染翻译文本
    return <div>{t('fallback.page_not_found')}</div>;
  }

  // 正常渲染文章内容
  return <article>{post.content}</article>;
}

export const getStaticPaths = ({ locales }) => {
  return {
    paths: [
      { params: { slug: 'post-1' }, locale: 'en' },
      { params: { slug: 'post-1' }, locale: 'fr' },
    ],
    fallback: true,
  };
};

export async function getStaticProps({ params, locale }) {
  // 模拟获取文章数据
  const post = await fetch(`https://your-api.com/posts/${params.slug}?lang=${locale}`)
    .then(res => res.json());

  return {
    props: {
      post,
      locale,
      ...(await serverSideTranslations(locale, ['common', 'blog'])),
    },
    revalidate: 60,
  };
}

方法2：在_app.js全局注入locale #

在_app.js中通过useRouter获取locale，将其添加到全局页面props中，确保所有页面（包括fallback状态的页面）都能拿到正确的locale。

示例代码：

import { useRouter } from 'next/router';
import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  // 增强pageProps，确保locale存在
  const enhancedProps = {
    ...pageProps,
    locale: pageProps.locale || router.locale,
  };

  return <Component {...enhancedProps} />;
}

export default appWithTranslation(MyApp);

之后在博客页面组件中，直接使用props.locale即可，无需重复获取router信息。

核心逻辑说明 #

Next.js的国际化路由会在URL中嵌入locale标识（如/fr/blog/unknown-post），useRouter钩子在组件初始化时就能读取这个值，不需要等待getStaticProps完成数据获取。配合next-i18next的useTranslation手动指定locale参数，就能在fallback页面中正确加载对应语言的翻译文件，避免显示原始翻译键名。

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