概要

Next.jsで多言語対応を行う際、next-i18nextは非常に便利なライブラリです。このツールを使うことで、翻訳管理や自動言語切り替えが簡単に行えるようになります。国際化対応はユーザーエクスペリエンスの向上や、グローバルな市場への展開に欠かせません。この記事では、next-i18nextを使ってNext.jsアプリケーションに多言語対応を実装する方法を解説します。

必要な依存関係のインストール

まず、必要なパッケージをインストールします。next-i18nextは、i18nextとreact-i18nextも必要なので、一緒にインストールします。

npm install next-i18next i18next react-i18next

設定ファイルの追加

次に、プロジェクトのルートディレクトリにnext-i18next.config.jsを作成し、サポートするロケール（言語）やデフォルトのロケールを定義します。

// next-i18next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr', 'es'],  // 対応する言語
    defaultLocale: 'en',          // デフォルトの言語
  },
};

これをnext.config.jsに追加して、多言語対応を有効にします。

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

翻訳ファイルの作成

次に、翻訳データを保存するフォルダを作成します。public/localesディレクトリ内に各ロケールごとのJSONファイルを用意します。

public/
  locales/
    en/
      common.json
    fr/
      common.json
    es/
      common.json

common.jsonには、ページ全体で使用するテキストを定義します。

{
  "welcome": "Welcome",
  "goodbye": "Goodbye"
}

_app.jsとページでの設定

アプリ全体で翻訳を利用するために、_app.jsを更新して、appWithTranslationでラップします。

// pages/_app.js
import { appWithTranslation } from 'next-i18next';
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
export default appWithTranslation(MyApp);

翻訳の使用

コンポーネント内でuseTranslationフックを使って、翻訳を表示します。

// components/Hello.js
import { useTranslation } from 'next-i18next';
const Hello = () => {
  const { t } = useTranslation('common');
  return <h1>{t('welcome')}</h1>;
};
export default Hello;

サーバーサイド翻訳の処理

getStaticPropsやgetServerSidePropsを使用して、ページコンポーネントにサーバーサイド翻訳を適用します。

// pages/index.js
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'])),
    },
  };
}
export default function Home() {
  return <Hello />;
}

ロケール切り替え機能の追加

言語を切り替えるためのスイッチャーを作成します。useRouterを使ってロケールを変更します。

// components/LocaleSwitcher.js
import { useRouter } from 'next/router';
const LocaleSwitcher = () => {
  const { locale, locales, push } = useRouter();
  const handleLocaleChange = (lng) => {
    push('/', '/', { locale: lng });
  };
  return (
    <div>
      {locales.map((lng) => (
        <button key={lng} onClick={() => handleLocaleChange(lng)}>
          {lng}
        </button>
      ))}
    </div>
  );
};
export default LocaleSwitcher;

まとめ

next-i18nextを使うことで、Next.jsアプリケーションに簡単に多言語対応を追加できます。ロケールの管理、翻訳ファイルの読み込み、サーバーサイドでの翻訳サポートも自動化されており、スムーズな国際化対応が可能です。これにより、グローバルなユーザーに向けて最適化されたアプリケーションを提供することができます。