Using Internationalization in Next.js

Introduction to Internationalization

Internationalization is an essential feature for any application, as it provides support for multiple languages and regions.

Step 1: Create a New Next.js Project

Create a new Next.js project using npx create-next-app my-i18n.

npx create-next-app my-i18n
cd my-i18n

Step 2: Install Required Dependencies

Install the required dependencies, including next-i18next and i18next.

npm install next-i18next i18next

Step 3: Configure Internationalization

Configure internationalization by creating a new file called next-i18next.config.js.

// next-i18next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
  },
};

Step 4: Add Translations

Add translations by creating a new folder called public/locales and adding JSON files for each language.

// public/locales/en/translation.json
{
  "title": "Welcome to my website"
}

// public/locales/fr/translation.json
{
  "title": "Bienvenue sur mon site web"
}

Step 5: Use Translations in Your Code

Use translations in your code by importing the useTranslation hook from next-i18next.

// pages/index.js
import { useTranslation } from 'next-i18next';

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

return (
    <div>
      <h1>{t('title')}</h1>
    </div>
  );
};

export default Home;

Conclusion

In this tutorial, you learned how to use internationalization in Next.js to support multiple languages.