Install it and run:
npm install
npm run dev
# or
yarn
yarn devDeploy it to the cloud with now (download)
nowThis project demonstrates how to integrate LinguiJS with Next.js. There are some key pieces that make this integration possible:
- During server rendering, lingui has access to all the language catalogs because there is no transfer cost
- On the client, only the catalog for the detected language is loaded into
window.LINGUI_CATALOG. This is configured in.linguircandlocale/catalogs.client.js - Importing catalogs isomorphically is done using a module alias called
@catalogsas inimport getCatalog from "@catalogs". As mentioned in the previous two points, this alias resolves to different modules for server (locale/catalogs.server.js) and client (locale/catalogs.client.js). - In order to change the language, there needs to be hard browser refresh since the active catalog is inserted into the
<head />of the document (seepages/_document.js) during server-side rendering. You cannot use<Link />orpushState/replaceState.- This is a sensible setup that avoids downloading unused language catalogs on the client
- The active catalog is loaded into lingui's I18nProvider in
pages/_app.js
- Add translations to your React code
- Run
npm run lingui:extractoryarn lingui:extract - Run
npm run lingui:compileoryarn lingui:compile - Restart your development server (this can be improved by watching the locale folder but it's out of scope in this demo)