next-i18next: 404 Error when trying to access any page with localeSubpaths config provided

I’m facing the 404 issue when trying to access any page of my Next.js application.

Next.js latest next-i18next latest

App works fine when no localeSubpaths config is provided. After setup of localeSubpaths config:

next.config.js:

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

app is not working any more.

Every time I’m trying to access main root / or any of the locale pages fr, de-DE browser displays the 404 Error Page (Customized Next.js error page - translation works for the error page).

Error Page contains also a link to the / Home Page. When I’m navigating to the Home Page by clicking on the link -> Home Page loads correctly (including related translations). After another page reload I’m facing again the 404 issue.

i18n config file:

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 };

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 19 (5 by maintainers)

Most upvoted comments

@DamianBusz If I clone this sandbox and run immediately, I do indeed see the “error”, but that’s because the Next version is below v9.5. If I do a yarn add next and run again, the error goes away.

@powerczuk In your repo, you’ve put rewrites inside publicRuntimeConfig in your next.config.js, instead of at the top level, where it should be.

I have same issue. If I enter page with Link component, it works fine. But if I write url directly or refresh page, I get 404 page in dev mode.