Adding Internationalization to Next.js

Posted in Javascript

Internationalization (i18n) is essential for reaching a global audience with your web applications. In this tutorial, we’ll explore how to add internationalization to your Next.js projects using the next-i18next library.

Using next-i18next for Internationalization

next-i18next is a powerful i18n library that integrates seamlessly with Next.js, providing a straightforward way to manage translations.

Step 1: Install Dependencies

Install the necessary packages for internationalization in your Next.js app:

npm install next-i18next

Step 2: Configure next-i18next

Create a next-i18next.config.js file in your project to configure the library:

// next-i18next.config.js

const { i18n } = require('./next.config');

module.exports = {
  i18n,
};

Step 3: Configure Next.js for Internationalization

Update your next.config.js file to include internationalization settings:

// next.config.js

module.exports = {
  i18n: {
    locales: ['en', 'es'],
    defaultLocale: 'en',
  },
};

Step 4: Create Translation Files

Create separate JSON files for each locale in the public/locales directory:

• public/locales/en.json

{
  "welcome": "Welcome to our website!",
  "about": "Learn more about us",
  "contact": "Contact us"
}

• public/locales/es.json

{
  "welcome": "¡Bienvenido a nuestro sitio web!",
  "about": "Conozca más sobre nosotros",
  "contact": "Contáctenos"
}

Step 5: Use Translations in Your Components

Use the useTranslation hook to access translations in your components:

// components/Header.js

import { useTranslation } from 'next-i18next';

const Header = () => {
  const { t } = useTranslation();

  return (
    <header>
      <nav>
        <ul>
          <li>{t('welcome')}</li>
          <li>{t('about')}</li>
          <li>{t('contact')}</li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;

Step 6: Switching Locales

Implement a mechanism to switch between locales, such as language buttons or a dropdown menu.

// components/LocaleSwitcher.js

import { useTranslation } from 'next-i18next';

const LocaleSwitcher = () => {
  const { i18n } = useTranslation();

  const changeLanguage = (locale) => {
    i18n.changeLanguage(locale);
  };

  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('es')}>Español</button>
    </div>
  );
};

export default LocaleSwitcher;

Conclusion

Adding internationalization to your Next.js application with next-i18next opens the door to a global audience. By following these steps, you can seamlessly integrate translations and provide a localized experience for users.

In the upcoming tutorials, we’ll explore advanced topics such as testing strategies and deployment options for Next.js.

Stay tuned for the next tutorial where we’ll dive into testing strategies in Next.js.

Happy coding!