In this post, we will be diving into one of Next.js 10’s new advanced features in internationalised routing and how we can use this with  react-intl.

Getting started

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:

# Create new Next.js 10 project "i18n-example"
npx create-next-app i18n-example
cd i18n-example
# A place to pop some internationalisation content
mkdir -p content/locale
# A place for some languages
# French
touch content/locale/fr.js
# Spanish
touch content/locale/es.js
# English
touch content/locale/en.js
# A barrel file
touch content/locale/index.js
# Installing react-intl for i18n within components
npm i react-intl --legacy-peer-deps
# Required for updating config
touch next.config.js

For installing _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!

#nextjs #i18n #web-development #react