Next.jsの国際化: 多言語対応ウェブサイトの実現

Next.js フロントエンド

目次

  1. 導入
  2. 言語ファイルの作成
  3. ページのローカライズ
  4. 動的なテキストの翻訳
  5. URLの言語別ルーティング
  6. サポートされる言語の切り替え
  7. まとめ

1. 導入

国際化は、ウェブサイトのユーザーが異なる言語や地域に基づいて適切なコンテンツを表示できるようにする重要な要素です。Next.jsでは、国際化を簡単に実現するための豊富な機能が提供されています。

2. 言語ファイルの作成

国際化には、各言語ごとに対応するテキストを含む言語ファイルが必要です。このセクションでは、言語ファイルの作成方法について説明します。

2.1 JSON形式の言語ファイル

各言語に対応するJSON形式の言語ファイルを作成します。例えば、en.jsonとja.jsonのようなファイルを用意します。

// en.json
{
  "welcome": "Welcome to my website!",
  "about": "About",
  "contact": "Contact"
}

// ja.json
{
  "welcome": "私のウェブサイトへようこそ！",
  "about": "紹介",
  "contact": "お問い合わせ"
}

2.2 テキストのキーと値

言語ファイルでは、テキストのキーと対応する値を指定します。キーはコード内で使用され、値は実際に表示されるテキストです。

3. ページのローカライズ

Next.jsでは、各ページのローカライズが容易にできます。このセクションでは、ページのローカライズの手順について説明します。

3.1 ページコンポーネントの作成

ローカライズする各ページに対して、それぞれの言語に対応するコンポーネントを作成します。

// components/HomePage.js
import { useTranslation } from 'next-i18next';

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

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

export default HomePage;

3.2 getStaticPropsの使用

getStaticPropsを使用して、各言語のコンテンツを取得し、ページに渡します。

// pages/index.js
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import HomePage from '../components/HomePage';

const Home = () => {
  return <HomePage />;
};

export const getStaticProps = async ({ locale }) => {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'])),
    },
  };
};

export default Home;

4. 動的なテキストの翻訳

Next.jsでは、動的に生成されるテキストを翻訳する方法も提供されています。このセクションでは、動的なテキストの翻訳方法について説明します。

4.1 useTranslationフックの使用

useTranslationフックを使用して、動的なテキストを翻訳します。このフックを使用すると、テキストを簡単に翻訳することができます。

// components/ContactForm.js
import { useTranslation } from 'next-i18next';

const ContactForm = () => {
  const { t } = useTranslation('common');

  return (
    <form>
      <label>{t('name')}</label>
      <input type="text" />

      <label>{t('email')}</label>
      <input type="email" />

      <button>{t('submit')}</button>
    </form>
  );
};

export default ContactForm;

5. URLの言語別ルーティング

Next.jsでは、URLを使用して異なる言語のページにアクセスできるようにすることも可能です。このセクションでは、URLの言語別ルーティングについて説明します。

5.1 言語別のルーティング設定

異なる言語のページに対応するために、ルーティング設定を行います。これにより、正しい言語のページにリダイレクトされるようになります。

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

6. サポートされる言語の切り替え

多言語対応ウェブサイトでは、ユーザーが表示言語を切り替えることが重要です。このセクションでは、サポートされる言語の切り替えについて説明します。

6.1 言語切り替えのUIの作成

ユーザーが表示言

語を切り替えるためのUIを作成します。一般的には、ドロップダウンメニューなどを使用します。

// components/LanguageSelector.js
import { useTranslation } from 'next-i18next';

const LanguageSelector = () => {
  const { t, i18n } = useTranslation('common');

  const changeLanguage = (event) => {
    const selectedLanguage = event.target.value;
    i18n.changeLanguage(selectedLanguage);
  };

  return (
    <select onChange={changeLanguage} value={i18n.language}>
      <option value="en">{t('english')}</option>
      <option value="ja">{t('japanese')}</option>
    </select>
  );
};

export default LanguageSelector;

6.2 言語切り替えの処理

言語切り替えの処理を実装します。選択された言語に基づいて、適切な言語のページにリダイレクトされるようにします。

// pages/_app.js
import { appWithTranslation } from 'next-i18next';
import LanguageSelector from '../components/LanguageSelector';

const MyApp = ({ Component, pageProps }) => {
  return (
    <>
      <LanguageSelector />
      <Component {...pageProps} />
    </>
  );
};

export default appWithTranslation(MyApp);

7. まとめ

Next.jsを使用して多言語対応ウェブサイトを実現するための手順について説明しました。国際化は、ユーザーの利便性を向上させ、より広範なユーザー層に対して魅力的なウェブサイトを提供するために重要な要素です。

以上で、Next.jsの国際化に関するブログ記事が完成です。国際化の実装手順やコード例を詳しく説明することで、読者の皆さんに役立つ情報を提供できると思います。素晴らしい記事作成をお楽しみください！