Next.js Internationalized Routing: Production build error: Error occurred prerendering page

Question

I've the following next.config.js:

module.exports = withBundleAnalyzer({
  i18n: {
    locales: ['en', 'es'],
    defaultLocale: 'en',
    localeDetection: false,
  },
  ...
});

That enables routes for locales en and es being en the default locale.

In the root of the project lives _posts/en and _post/es holding the .md files for the dynamic post pages.

I see everything working fine when I run the dev script "dev": "next dev" being able to switch between both locales with no problem and navigate through pages.

But if I run the prod script "build-prod": "run-s clean build export" being the scrips called within the following: "clean": "rimraf.next out" , "build": "build": "next build" , "export": "next export"

then I get the following errors:

Error occurred prerendering page "/en/posts/[slug]"
TypeError: Cannot read properties of undefined (reading 'undefined')

Error occurred prerendering page "/en/posts/[slug]"
TypeError: Cannot read properties of undefined (reading 'undefined')

> Build error occurred
Error: Export encountered errors on following paths:
    /posts/[slug]: /en/posts/[slug]
    /posts/[slug]: /es/posts/[slug]

Does anyone know what could be different between dev and prod that could cause this issue?

Thanks

Answer 1

Apparently i18n support is not compatible with static HTML export so I decided to drop it.

Instead, I decided to implement my own solution for internationalised routing.

I used next-language-detector to handle language detection and redirect from the index page in my Next.js project to the content in the preferred language.

To manage the content I enabled a route for each language adding directories with the language code under pages/ . In my case es and en . Each directory will read the translated data stored in markdown.

For a similar approach see this article: https://dev.to/adrai/static-html-export-with-i18n-compatibility-in-nextjs-8cd