I have encountered a 404 error while trying to access any page of my Next.js application.
The application functions properly when the localeSubpaths configuration is not provided.
However, upon implementing the localeSubpaths config in next.config.js:
const localeSubpaths = {
en: "en",
"de-DE": "de-DE",
fr: "fr"
};
The app stops working altogether.
Whenever I attempt to access the main root / or any of the locale pages like fr, de-DE, the browser displays a customized Next.js error page with translated content that works fine.
This error page also contains a link back to the Home Page /. Clicking on this link successfully loads the Home Page along with the related translations.
The i18n.tsx configuration file looks like this:
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, i18n, Link, withTranslation, Router };