使用next-i18next刷新/en/test路由出现404错误求助

针对你遇到的非默认语言（如en）子页面刷新404的问题，检查以下几个关键配置：

1. 确认next.config.js的i18n配置 #

确保在next.config.js中正确配置多语言路由规则，示例如下：

module.exports = {
  i18n: {
    locales: ['ko', 'en'],
    defaultLocale: 'ko',
    localeDetection: false, // 按需开启，避免自动跳转
  },
  // 如果使用静态导出（next export），必须添加这一行
  trailingSlash: true,
};

静态导出时trailingSlash: true是关键，它会让Next.js生成带斜杠的目录结构，避免刷新子路由时找不到静态文件。

2. 检查页面组件的静态生成配置 #

如果你的页面使用getStaticProps，需要在对应页面（如pages/test.js）中处理locale参数，并配置getStaticPaths生成所有语言的路径：

import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

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

export async function getStaticPaths({ locales }) {
  return {
    paths: locales.map((locale) => ({
      params: { /* 页面参数，如果有的话 */ },
      locale,
    })),
    fallback: false, // 或按需设为true
  };
}

如果缺少getStaticPaths生成对应语言的路径，Next.js无法预渲染该语言的子页面，刷新时就会404。

3. 确保_app.js正确集成next-i18next #

在pages/_app.js中必须用appWithTranslation包裹组件：

import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);

这是next-i18next生效的基础，缺少的话多语言路由逻辑会失效。

4. 验证next-i18next.config.js配置 #

确认next-i18next.config.js中的localePath指向正确的翻译文件目录，示例：

module.exports = {
  i18n: {
    locales: ['ko', 'en'],
    defaultLocale: 'ko',
  },
  localePath: './public/locales', // 确保路径正确
};

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