Internationalised software supports the languages and cultural customs of people throughout the world. The Web reaches all parts of the world. Internationalised web apps provide a great user experience for people everywhere.
Localised software adapts to a specific language and culture by translating text into the user's language and formatting data in accordance with the user's expectations. An app is typically localised for a small set of locales.
Typically, web apps are localised to just the language or language-region combination. Examples of such locale codes are:
en for English
en-US for English as spoken in the United States
en-GB for English as spoken in the United Kingdom
es-AR for Spanish as spoken in Argentina
ar-001 for Arabic as spoken throughout the world
ar-AE for Arabic as spoken in United Arab Emirates
Create a new Next.js project by using below command line:
npx create-next-app@latest nextjs-app-router-i18n
Add React Intl dependency
npm i -S react react-intl
Create localisation files
The en.json file
{
"hello": "Hello, world!",
"welcome": "Welcome to our website"
}
The es.json file
{
"hello": "Hola Mundo",
"welcome": "Bienvenido a nuestro sitio web"
}
The fr.json file
{
"hello": "Bonjour le monde",
"welcome": "Bienvenue sur notre site Internet"
}
Import useTranslation
from react-i18next
in your components
// Page.js Entry point
'use client'
import React, {
useState
} from 'react';
import {
FormattedMessage,
IntlProvider
} from 'react-intl';
import messages_en from '../public/locales/en.json';
import messages_fr from '../public/locales/fr.json';
import messages_sp from '../public/locales/sp.json';
import messages_hi from '../public/locales/hindi.json';
import messages_rs from '../public/locales/rus.json';
const messages = {
en: messages_en,
fr: messages_fr,
sp: messages_sp,
hi: messages_hi,
rs: messages_rs,
};
const App = () => {
const [locale, setLocale] = useState('en');
const handleLanguageChange = (e) => {
setLocale(e.target.value);
};
return (
<IntlProvider locale={locale} messages={messages[locale]}>
<div>
<h1><FormattedMessage id="app.title" /></h1>
<select onChange={handleLanguageChange} value={locale}>
<option value="en">English</option>
<option value="fr">French</option>
<option value="sp">Spanish</option>
<option value="hi">Hindi</option>
<option value="rs">Russian</option>
</select>
<p><FormattedMessage id="app.description" /></p>
</div>
</IntlProvider>
);
};
export default App;
Sample code link : To run the code on your browser.
Conclusion
Next.js offers pretty good support for internationalisation, though recent routing updates have added some complexity. We've shown how to integrate the React Intl library with Next.js, utilizing both the App Router and Pages Router for routing.