vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.02k stars 26.7k forks source link

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

Closed FarhadG closed 3 years ago

FarhadG commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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

Thanks!

lachlanjc commented 3 years ago

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

balazsorban44 commented 2 years ago

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.