Next.js - How to use ISR along with internationalization

Question

We use ISR for most of the pages in our app and we generate static pages that include localized content fetched from the CMS.

This has been working okay so far when deploying the app with a single available locale — we'd fetch the content for that locale in getStaticProps at build-time and then keep serving that.

However, we now need to support parallel locales in the same deployment of the app and we're not sure if ISR has any mechanism for this out of the box, to statically generate the pages for each locale separately, and then serve different static pages for different locales.

I couldn't find anything in Next.js docs about this. The only solution I am thinking of right now is to split the "pages" folder into several subfolders, one subfolder per locale which would container all pages (duplicated), but that sounds awful.

Is there any native way for Next.js to support ISR for parallel locales? What's the community-approved approach here?

Answer 1

I have looked better and noticed the Next.js docs do specifically mention how it should work here: https://nextjs.org/docs/advanced-features/i18n-routing#how-does-this-work-with-static-generation

Keeping the question up in case others encounter the same confusion

For pages using getStaticProps with Dynamic Routes, all locale variants of the page desired to be prerendered need to be returned from getStaticPaths. Along with the params object returned for paths, you can also return a locale field specifying which locale you want to render.