尝试使用提供的localeSubpaths配置访问任何页面时，next-i18next 404错误

如何解决尝试使用提供的localeSubpaths配置访问任何页面时，next-i18next 404错误

当尝试访问Next.js应用程序的任何页面时，我都遇到404问题。

在未提供localeSubpaths配置的情况下，应用运行正常。

实施localeSubpaths配置（next.config.js）后：

const localeSubpaths = {
  en: "en","de-DE": "de-DE",fr: "fr"
};

应用程序不再起作用。

每次尝试访问主根/或任何区域设置页面fr时，de-DE浏览器都会显示404错误页面（自定义Next.js错误页面）。此页面包含一些翻译好的内容。

页面还包含指向/主页的链接。当我通过单击链接导航到主页时->主页正确加载（包括相关翻译）

i18n.tsx配置文件：

import NextI18Next from "next-i18next";
import getConfig from "next/config";
import path from "path";

const { publicRuntimeConfig } = getConfig();
const { localeSubpaths } = publicRuntimeConfig;

const NextI18NextInstance = new NextI18Next({
  defaultLanguage: "en",ns: ["common"],defaultNS: "common",otherLanguages: ["de-DE","de-CH","fr"],strictMode: false,localeSubpaths,localePath: path.resolve("./public/static/locales")
});

export default NextI18NextInstance;

const {
  appWithTranslation,i18n,Link,withTranslation,Router
} = NextI18NextInstance;

export { appWithTranslation,Router };

解决方法

请确保您未在​​next.config.js文件中定义任何i18n条目，因为这将与重定向条目重叠。

next.config.js

const localeSubpaths = {
  en: 'en',es: 'es'
}
[...]
//remove any reference to this entry
//i18n: [...]
rewrites: async () => nextI18NextRewrites(localeSubpaths),publicRuntimeConfig: {
    localeSubpaths,} 

i18n.ts

import NextI18Next from 'next-i18next'
import path from 'path'
 
const localeSubpaths = {
  en: 'en',es: 'es'
}

const NextI18NextInstance = new NextI18Next({
  browserLanguageDetection: false,ns: ["common"],defaultNS: "common",fallbackLng: 'en',otherLanguages: ['es'],localeSubpaths: localeSubpaths,defaultLanguage: 'en',localePath: path.resolve('./public/locales'),})

export const { appWithTranslation,useTranslation,withTranslation,Link,i18n} = NextI18NextInstance;
export default NextI18NextInstance;