How to implement internationalization (i18n) in Next.js



Image not found!!

Internationalization, often abbreviated as i18n, is the process of designing and preparing your application to be easily adaptable to different languages and regions. Next.js, a popular React framework, provides built-in support for internationalization through the next-i18next library. Here's a step-by-step guide on how to implement internationalization in Next.js using next-i18next:

Step 1: Install the required packages

bash
npm install next-i18next react-i18next i18next

Step 2: Create a next-i18next.config.js file

Create a next-i18next.config.js file in the root of your project. This file will contain the configuration for next-i18next. Here's a simple example:

javascript
// next-i18next.config.js
const { i18n } = require('./next-i18next.config');

module.exports = {
  i18n,
};

Step 3: Configure i18n in your Next.js application

Create a next-i18next.config.js file in the root of your project to configure the i18n settings. For example:

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

Step 4: Set up your pages and components for translation

You need to structure your project to support translations. Here's a simple example structure:

bash
/pages
  /index.js
  /about.js
/public
  /locales
    /en
      common.json
    /fr
      common.json

In this example, the locales folder contains subfolders for each supported language (en for English, fr for French). Each language folder contains a common.json file, which holds translations for common phrases used across the application.

Step 5: Use translations in your components and pages

Now, you can use the useTranslation hook from react-i18next to access translations in your components and pages:

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

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

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('intro')}</p>
    </div>
  );
};

export default HomePage;

Step 6: Run your Next.js application

Run your Next.js application to see the internationalization in action:

bash
npm run dev

Visit your application in the browser, and you should be able to switch between languages using the provided configuration.

This is a basic setup, and you can explore more advanced features and configurations offered by next-i18next as needed for your specific requirements. Refer to the official documentation for more details: next-i18next Documentation.

Category List