Thực hiện Internationalization (i18n) trong Next.js: Đa ngôn ngữ

Trong phần này, chúng tôi sẽ hướng dẫn bạn cách thực hiện Internationalization (i18n) trong ứng dụng Next.js của bạn. Với i18n, bạn có thể tạo trải nghiệm đa ngôn ngữ cho người dùng và cung cấp nội dung theo ngôn ngữ cụ thể.

Sử dụng thư viện next-i18next

next-i18next là một thư viện phổ biến để thực hiện i18n trong ứng dụng Next.js. Dưới đây là cách bạn có thể thêm i18n vào ứng dụng của mình:

Cài đặt next-i18next:

npm install next-i18next

Cấu hình thư viện trong tệp next.config.js:

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

module.exports = {
  i18n,
};

Sử dụng thư viện trong ứng dụng của bạn:

import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation();

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

Tạo Nội dung đa ngôn ngữ

Sau khi cài đặt next-i18next, bạn có thể tạo các tệp ngôn ngữ như en.json, fr.json, es.json để cung cấp nội dung trong từng ngôn ngữ:

// en.json
{
  "welcome": "Welcome!"
}

// fr.json
{
  "welcome": "Bienvenue!"
}

// es.json
{
  "welcome": "¡Bienvenido!"
}

Chuyển Đổi Ngôn ngữ

Để chuyển đổi ngôn ngữ, bạn có thể tạo một công cụ chuyển đổi ngôn ngữ và sử dụng hàm i18n.changeLanguage:

import { useTranslation } from 'next-i18next';

function LanguageSwitcher() {
  const { i18n } = useTranslation();

  const handleChangeLanguage = (newLanguage) => {
    i18n.changeLanguage(newLanguage);
  };

  return (
    <div>
      <button onClick={() => handleChangeLanguage('en')}>English</button>
      <button onClick={() => handleChangeLanguage('fr')}>Français</button>
      <button onClick={() => handleChangeLanguage('es')}>Español</button>
    </div>
  );
}

Kết Luận

Phần này đã giới thiệu cách thực hiện Internationalization (i18n) trong ứng dụng Next.js của bạn bằng cách sử dụng thư viện next-i18next. Bằng cách cung cấp nội dung theo ngôn ngữ và cho phép người dùng chuyển đổi ngôn ngữ, bạn có thể tạo trải nghiệm đa ngôn ngữ hấp dẫn cho người dùng của mình.