NextJS自定义404页面useTranslation翻译失效求助

API 探路者

2026-7-16

自定义404页面翻译失效问题排查与解决

问题根源

自定义404页面（404.tsx）未实现数据获取方法注入翻译资源，useTranslation无法拿到对应语言的翻译数据
全局错误页面（_error.tsx）在接管错误渲染流程时，未注入翻译资源，若404场景走该页面也会导致翻译失效

解决方案

1. 为`404.tsx`添加`getStaticProps`方法

在404.tsx文件末尾添加以下代码，用于在构建阶段获取对应语言的翻译资源：

export async function getStaticProps({ locale }: { locale: string }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'])),
    },
  };
}

注：['common']需与t('page-not-found')使用的翻译命名空间保持一致。

2. 修改`_error.tsx`的`getInitialProps`注入翻译资源

在_error.tsx的初始化方法中加入翻译资源获取逻辑，修改后的代码如下：

AppError.getInitialProps = async (ctx) => {
  const errorInitialProps: AppErrorProps =
    await NextErrorComponent.getInitialProps(ctx);
  errorInitialProps.hasGetInitialPropsRun = true;

  // 注入翻译资源
  const translations = await serverSideTranslations(ctx.locale || 'en', ['common']);

  if (ctx.err) {
    captureError(ctx.err);
    await flush(2000);
    return {
      ...errorInitialProps,
      ...translations,
    };
  }
  captureError(
    new Error(`_error.tsx getInitialProps missing data at path: ${ctx.asPath}`),
  );
  await flush(2000);

  return {
    ...errorInitialProps,
    ...translations,
  };
};

注：ctx.locale依赖Next.js的i18n配置，若项目默认语言不是en，请替换为对应语言标识。