Example app with LinguiJS

Install it and run:

npm install
npm run dev
# or
yarn
yarn dev

Deploy it to the cloud with now (download)

now

The idea behind the example

This 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 .linguirc and locale/catalogs.client.js
Importing catalogs isomorphically is done using a module alias called @catalogs as in import 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 (see pages/_document.js) during server-side rendering. You cannot use <Link /> or pushState/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:extract or yarn lingui:extract
Run npm run lingui:compile or yarn lingui:compile
Restart your development server (this can be improved by watching the locale folder but it's out of scope in this demo)