How to support multiple languages and locales in a Next.js app?
Adding support for multiple languages and locales in a Next.js application involves several steps, including setting up internationalization libraries, managing translations, and implementing language-switching functionality. Below is an example of how you can achieve this:
Install Required Packages:
First, you need to install the necessary packages. You can use libraries like
next-i18next
for internationalization support in Next.js.npm install next-i18next i18next i18next-browser-languagedetector
Set Up Configuration:
Create a
next.config.js
file in the root of your project to configure Next.js to use the i18next translation system.// next.config.js const { i18n } = require('./next-i18next.config'); module.exports = { i18n, };
Create a
next-i18next.config.js
file to configure i18next.// next-i18next.config.js const { i18n } = require('i18next'); const { initReactI18next } = require('react-i18next'); const Backend = require('i18next-http-backend'); const NextI18Next = require('next-i18next').default; module.exports = new NextI18Next({ defaultLanguage: 'en', otherLanguages: ['fr'], // Add more languages as needed localePath: typeof window === 'undefined' ? 'public/locales' : 'locales', ns: ['common'], defaultNS: 'common', keySeparator: false, backend: { loadPath: '/locales/{{lng}}/{{ns}}.json', }, });
Create Translation Files:
Inside your project directory, create a
public/locales
folder. Within this folder, create subfolders for each language (e.g.,en
for English,fr
for French). In each language folder, create JSON files with translations.For example:
// public/locales/en/common.json { "welcome": "Welcome to our website!", "about": "About Us", "contact": "Contact Us" }
// public/locales/fr/common.json { "welcome": "Bienvenue sur notre site Web!", "about": "À Propos", "contact": "Contactez-nous" }
Implement Language Switching:
You can create a language switcher component to allow users to switch between languages. Here's a simple example using React and
next/router
:import { useRouter } from 'next/router'; import { i18n } from 'next-i18next'; const LanguageSwitcher = () => { const router = useRouter(); const changeLanguage = (language) => { i18n.changeLanguage(language); router.push(router.pathname, router.asPath, { locale: language }); }; return ( <div> <button onClick={() => changeLanguage('en')}>English</button> <button onClick={() => changeLanguage('fr')}>French</button> </div> ); }; export default LanguageSwitcher;
Use Translations in Your Components:
Finally, use the
useTranslation
hook provided bynext-i18next
to access translations in your components:import { useTranslation } from 'next-i18next'; const HomePage = () => { const { t } = useTranslation('common'); return ( <div> <h1>{t('welcome')}</h1> <p>{t('about')}</p> <p>{t('contact')}</p> </div> ); }; export default HomePage;
This component will display the translated text based on the current language selected by the user.
This is a simple example of how to support multiple languages and locales in a Next.js app. You can build on this by adding more languages, handling dynamic content, and improving the user experience based on language choices.