Next.js: Internationalization capabilities with a full static site (i.e. serverless)

[FarhadG]

Feature request

Internationalization capabilities with a full static site (i.e. serverless)

Is your feature request related to a problem? Please describe.

Inability to compile a static site with all language ahead of time.

A clear and concise description of what you want and what your use case is.

Describe the solution you'd like

The ability to provide a static site with multiple languages pre-compiled.

[anulman]

Working on a solution to this (and other static site permutations) with @iliapir — we are experimenting with:

1. Writing a babel plugin that Inspects the JSX AST for permutable elements (e.g. in our case @marvelapp/react-ab-test <Experiment>/<Variant> pairs; in OP's case maybe a <LanguageProvider>)
   
   
   
   • e.g. pages/faqs might have language permutations en & es
   
   
2. Injecting the compiled permutations per-page into getStaticPaths, + using getStaticProps to compute which permutation to show
   
   
   
   • e.g. pages/faqs might emit pages/faqs_-_en & pages/faqs_-_es
   
   
3. Using CDN rules to route traffic to the correct defaults, while also letting React handle dynamic changes (e.g. via a language dropdown).

@FarhadG does this sound like an approach that will solve your statically-compiled internationalization needs? @timneutkens does this look like the right approach within Next.js?

Early feedback is much appreciated, as we suspect this will require monkeying in next/build/utils.ts#isPageStatic (e.g. by wrapping mod.getStaticPaths). If our spike works out, we expect to have a PR ready for comments in a week or three.

[anulman]

@BiscuiTech @AlexOros — a week or three was a little ambitious. But the PR is up and good to go! #14454

Note that the CI error is due to the addition of a path parameter passed to getStaticProps({ params: { path } }) for files w/o a dynamic segment.

[Timer]

Please see the following RFC for first-class i18n support in Next.js:
https://github.com/vercel/next.js/discussions/17078

Thanks!

[lachlanjc]

This landed! https://nextjs.org/docs/advanced-features/i18n-routing