404 for all routes with included locale - NextJS with next-i18next

Question

Hi I am following the docs from here: github docs

, but all URLs with locales return 404. For the example:

• localhost:3000/de/second-page = 404
• localhost:3000/en/second-page = 404
• localhost:3000/de = 404

• localhost:3000/en = 404

  • same for the default locale.

• localhost:3000/second-page = 200

• localhost:3000 = 200

I guess, this is because there is no pages/de/second-page.js, for the example, but what's the purpose then of this library, if it doesn't solve this problem.

I have searched a lot and I know about localSubpaths, but seems that it doesn't work:

module.exports = new NextI18Next({
otherLanguages: ['fr'],
//localeSubpaths: localeSubpathVariations[localeSubpaths],
localeSubpaths: {
    de: 'de',
    en: 'en',
  }
})

It doesn't work in my app, but it doesn't work in their sample, too: their sample

Answer 1

Have you checked these two steps ?

After creating and exporting your NextI18Next instance, you need to take the following steps to get things working:

Create an _app.js file inside your pages directory, and wrap it with the NextI18Next.appWithTranslation higher order component (HOC). You can see this approach in the examples/simple/pages/_app.js. Your app component must either extend App if it's a class component or define a getInitialProps if it's a functional component (explanation here).

Create a next.config.js file inside your root directory if you want to use locale subpaths. You can see this approach in the examples/simple/next.config.js (Next.js 9.5+ required).

const { nextI18NextRewrites } = require('next-i18next/rewrites')

const localeSubpaths = {
  de: 'de',
  en: 'en',
};

module.exports = {
  rewrites: async () => nextI18NextRewrites(localeSubpaths),
  publicRuntimeConfig: {
    localeSubpaths,
  },
}