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.