How to support multiple languages and locales in a Next.js app?

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:

  1. 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
    
  2. 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',
       },
     });
    
  3. 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"
     }
    
  4. 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;
    
  5. Use Translations in Your Components:

    Finally, use the useTranslation hook provided by next-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.

Did you find this article valuable?

Support LingarajTechhub by becoming a sponsor. Any amount is appreciated!