Skip to content
This repository has been archived by the owner on Oct 13, 2021. It is now read-only.

A Next.js project that uses LinguiJS for internationalization

License

Notifications You must be signed in to change notification settings

disintegrator/next-with-lingui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Workflow

  • 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)

About

A Next.js project that uses LinguiJS for internationalization

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published