Exploring Internationalisation With Nextjs 10 and react-intl
Create a new Next.js 10 project by running
npx create-next-app i18n-example to create a new project name i18n-example.
We will run some other commands to set things up:
react-intl I've used
--legacy-peer-deps as there was a peer dependency of
react@^16.3.0 and I was running npm v7.
Now that we have some files going, let's get started with some basic content!
Setting up Next.js i18n
Follow on from the docs on getting started, we need to update
Here we are going with sub-path routing, so the tl;dr is that
our-website.com will be the default locale (English), whereas
our-website.com/es will direct us to the French and Spanish websites respectively.
Now that we have that out of the way, let's update the
Internationalising our home page
We can use the Next router to grab which locale we are on.
There is a straight forward example from Vercel's GitHub that we can take for inspiration.
pages/index.js to look like the following:
With this, we are ready to start our app and see the results.
npm run dev to start the server and head to the localhost port-specific (likely
Once you are there, you will see the current locale of English as well as what locales are configured!
Given what we mentioned previously about the sub-routing, we can now go to
/es and expect the current locale to change. The below image will be just for the
/fr route to show our sub-routing works.
Amazing! Now that we are done here, we can get to using this with
Switching copy with react-intl
We will run a simple example here with
react-intl, but what we need to do first is prep some content that we wish to swap out!
content/locale/en.js, let's through in some basic JSON to replace our "Hello, world!" and welcome message:
The structure of these files is up to you, but I am going with a top-level key of the page name for now and identifiers in the string. Places I have worked previous keep this as JSON to upload to places such as Smartling, so you may want to go down an avenue that transforms JSON to the above ES6 format I am using.
Let's copy-paste that across to our Spanish and French files and use some possibly inaccurate Google translations to help us out.
For the French:
For the Spanish:
Finally, we want to update our barrel file
Great! Now that we are there, let's go back to
pages/_app.js to add our required provider.
We are doing a number of things here:
- Importing all the locale files through the barrel file we created.
- Import the
react-intlto use in each of our pages as part of the app.
- Using the
pathnamegiven by the Next.js router to determine what copy of the locale to use based on the page.
Now let's go back to
pages/index.js and make use of
On this page, I am importing the
useIntl hook, destructuring
formatMessage from that hook, making a helper function
f that abstract the need to always pass an object with the id and replace the appropriate code with our key name for the page in the locale content.
Let's fire up the app with
npm run dev and see what happens!
If we check
/es we get the following respectively:
As an added bonus to show how the other locale pages would work with the
/alt route key we put in the locale files, we can create a new file
pages/alt.js and add something similar:
/es/alt respectively give us the following:
Alt image - French
Alt image - Spanish
Notice that we have re-used the
hello key for this page too but we are not getting that clash thanks to how we set up the locales and
pages/_app.js page? Very handy. I am unsure if that is the best way to lay it out (there may be issues I am yet to run into at scale) but for this demo, it works rather nicely.
Note: if you are having an error pop up in the terminal about missing Polyfills, refer to the formatjs documentation. The tl;dr is that you need Node v13+ or you can install a package.
In conclusion, we have explored Next.js internationalisation and used the
react-intl package to help make our locales come to life!
Resources and further reading
Image credit: Andrew Butler
See how you can dynamically create UIs based on React State using dynamic imports, Next.js 10 and React State
Have you ever wanted to build a UI Component Library with TypeScript and React? This blog post will take you through a straightforward set up that uses the bare minimum to get a working component library that you can re-use across your different React projects.
This post will go through a simple example of setting up simple authentication with a user and password to your Next.js website.
1,200+ PEOPLE ALREADY JOINED ❤️️
Get fresh posts + news direct to your inbox.
No spam. We only send you relevant content.