MENU
  1. ホーム
  2. React
  3. Next.jsで静的サイト生成と多言語対応を実現する方法を徹底解説

Next.jsで静的サイト生成と多言語対応を実現する方法を徹底解説

React

Next.jsの静的サイト生成（SSG）は、Webサイトのパフォーマンスを最大化し、SEOを向上させる強力な手法です。本記事では、SSGを活用して多言語対応を実現する方法に焦点を当て、具体的な実装手順を解説します。多言語対応は、ユーザー体験を向上させ、グローバル市場での競争力を高めるために欠かせません。Next.jsの特長を活かした多言語対応を学び、次のプロジェクトに役立てましょう。

目次

静的サイト生成（SSG）とは


静的サイト生成（SSG）は、Webページを事前にビルドして静的ファイルとして配信する手法を指します。これにより、サーバーサイドでの処理負荷を軽減し、高速で安定したページロードを実現します。

SSGの仕組み


SSGでは、ビルド時に必要なデータを取得し、それをもとにHTMLファイルを生成します。生成されたHTMLは、CDN（コンテンツデリバリネットワーク）を通じて配信されるため、クライアントのリクエストに対して即座に応答可能です。

Next.jsにおけるSSG


Next.jsでは、getStaticPropsやgetStaticPathsといった関数を使用して、ビルド時にデータを取得し静的ページを生成します。この仕組みを利用することで、データ駆動型の静的サイトを簡単に構築できます。

SSGの主な利点

  1. 高速なパフォーマンス：事前に生成されたHTMLを配信するため、クライアント側のレスポンスが非常に速い。
  2. SEOに優れる：クローラーが完全なHTMLを取得できるため、検索エンジン最適化に効果的。
  3. セキュリティの向上：サーバーサイドでの実行がないため、攻撃対象が限定される。

SSGは特に、内容が頻繁に更新されないブログや製品ページ、多言語対応が必要なサイトに適したアプローチです。次章では、こうしたサイトにおいて多言語対応がなぜ重要なのかを見ていきます。

多言語対応の重要性

Webサイトの多言語対応は、グローバルなユーザーに対応し、ビジネスの成長を促進するための重要な要素です。言語の壁を越えることで、より多くのユーザーにアプローチでき、ユーザー体験の向上につながります。

多言語対応のメリット

1. グローバル市場への進出


多言語対応は、異なる国や地域の市場に参入するための第一歩です。ユーザーが母国語で情報を得られると、信頼感が向上し、購入や問い合わせなどの行動につながりやすくなります。

2. SEOの向上


多言語対応したサイトは、特定の地域や言語での検索ランキングを向上させる可能性があります。適切な翻訳とローカライズが行われたページは、地域ごとのキーワード検索に応答しやすくなります。

3. ユーザー体験の向上


母国語での閲覧が可能なWebサイトは、ユーザーにとって親しみやすく、使いやすいものとなります。これにより、サイトへの滞在時間やコンバージョン率が向上します。

課題と解決方法

多言語対応を実現するには、翻訳品質の確保や地域ごとのコンテンツ管理といった課題があります。Next.jsのi18n（国際化）機能を活用することで、これらの課題を効率的に解決できます。

次章では、Next.jsが提供する多言語対応の仕組みと、その具体的な実装方法について解説します。

Next.jsでの多言語対応の仕組み

Next.jsは、国際化（i18n）機能をネイティブにサポートしており、多言語対応を効率的に実現できます。この仕組みを活用することで、言語ごとに最適化されたページを動的または静的に生成できます。

i18nの基本構造

Next.jsのi18n機能では、next.config.jsファイルに以下のような設定を記述します。

module.exports = {
  i18n: {
    locales: ['en', 'ja', 'fr'], // サポートする言語のリスト
    defaultLocale: 'en', // デフォルトの言語
  },
};

この設定により、Next.jsは各ロケールに対応するページを自動的に生成します。

ルーティングとロケールの切り替え

Next.jsでは、URLパスにロケールを含めることで、多言語対応のルーティングを実現します。
例えば、以下のようなURL構造が生成されます：

  • 英語ページ: /en/about
  • 日本語ページ: /ja/about
  • フランス語ページ: /fr/about

ユーザーはuseRouterフックを使用して、プログラムからロケールを切り替えることが可能です。

import { useRouter } from 'next/router';

const ChangeLanguage = () => {
  const router = useRouter();

  const switchLocale = (locale) => {
    router.push(router.pathname, router.asPath, { locale });
  };

  return (
    <button onClick={() => switchLocale('ja')}>日本語に切り替え</button>
  );
};

翻訳データの利用

多言語対応には翻訳データが必要です。Next.jsでは、JSONやYAML形式の翻訳ファイルを利用してロケールごとの文字列を管理します。next-i18nextなどのライブラリを組み合わせることで、効率的に翻訳データを取り扱うことができます。

次章では、具体的なi18n設定手順について解説し、プロジェクトに多言語対応を導入する方法を詳しく見ていきます。

i18n設定の実践

Next.jsでのi18n設定は簡単で、プロジェクトに多言語対応を組み込むための基本的な手順を理解することで、効率的に実装できます。以下では、具体的な設定方法を説明します。

1. 必要な設定の追加

プロジェクトのルートディレクトリにあるnext.config.jsファイルを編集して、i18n機能を有効にします。

module.exports = {
  i18n: {
    locales: ['en', 'ja', 'fr'], // 使用する言語をリストアップ
    defaultLocale: 'en', // デフォルトの言語を指定
  },
};

この設定により、指定した言語ごとにURLルーティングが生成されます。

2. 翻訳データの作成

各言語用の翻訳ファイルを作成します。一般的には/public/localesディレクトリに保存します。

フォルダ構造例：

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

common.jsonの内容例（英語版）：

{
  "greeting": "Welcome",
  "description": "This is a multi-language site."
}

日本語版：

{
  "greeting": "ようこそ",
  "description": "これは多言語対応のサイトです。"
}

3. 翻訳データを使用する

Next.jsプロジェクトで翻訳データを表示するには、翻訳ライブラリを使用します。例えば、next-i18nextを利用した場合、コンポーネントで以下のように使用できます。

import { useTranslation } from 'next-i18next';

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

  return (
    <header>
      <h1>{t('greeting')}</h1>
      <p>{t('description')}</p>
    </header>
  );
};

4. i18nを活用した動的ページ生成

静的サイト生成（SSG）でi18nを利用するには、getStaticPropsおよびgetStaticPathsを活用します。

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

export const getStaticPaths = () => {
  return {
    paths: [
      { params: { slug: 'example' }, locale: 'en' },
      { params: { slug: 'example' }, locale: 'ja' },
    ],
    fallback: false,
  };
};

5. デバッグと確認

next devコマンドでローカルサーバーを起動し、URLにロケールを付与して動作確認を行います。例:

  • http://localhost:3000/ja/about
  • http://localhost:3000/en/about

次章では、動的ルーティングとSSGの連携方法について詳しく解説します。

動的ルーティングとSSGの連携

Next.jsで多言語対応を実現する際、動的ルーティングと静的サイト生成（SSG）を組み合わせることで、効率的なページ生成が可能になります。この章では、これらを連携させる方法を解説します。

1. 動的ルーティングの基本

動的ルーティングでは、URLの一部を動的に変更し、さまざまなページを生成します。Next.jsでは、ファイル名に角括弧（[param]）を使うことで動的ルーティングが可能です。

例：pages/[slug].js

import { useRouter } from 'next/router';

const Page = ({ content }) => {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.body}</p>
    </div>
  );
};

export const getStaticPaths = () => {
  return {
    paths: [
      { params: { slug: 'example1' }, locale: 'en' },
      { params: { slug: 'example1' }, locale: 'ja' },
    ],
    fallback: false,
  };
};

export const getStaticProps = async ({ params, locale }) => {
  const content = getContentBySlugAndLocale(params.slug, locale); // カスタム関数
  return {
    props: {
      content,
    },
  };
};

export default Page;

2. 多言語対応と動的ルーティングの組み合わせ

多言語対応のために、getStaticPathsでは各ロケールに対応するパスを明示的に設定します。この例では、英語と日本語のページがそれぞれ生成されます。

export const getStaticPaths = () => {
  return {
    paths: [
      { params: { slug: 'about' }, locale: 'en' },
      { params: { slug: 'about' }, locale: 'ja' },
    ],
    fallback: false,
  };
};

3. 静的ページの生成とロケール管理

getStaticProps関数では、ロケール情報を基にデータを取得します。このデータは、APIから取得したり、ローカルの翻訳ファイルを使用したりして取得します。

例：ロケールごとに異なるデータを返すカスタム関数の実装

const getContentBySlugAndLocale = (slug, locale) => {
  const data = {
    en: { about: { title: 'About Us', body: 'This is an English page.' } },
    ja: { about: { title: '私たちについて', body: 'これは日本語のページです。' } },
  };
  return data[locale][slug];
};

4. ページ構成の統合

この仕組みを活用することで、各ロケールに対応する静的ページを効率的に生成できます。たとえば、英語用の/en/aboutと日本語用の/ja/aboutがビルド時に作成されます。

5. デプロイ時の確認

多言語対応の動的ルーティングを実装したサイトをデプロイする際は、各ロケールのパスが正しく生成されているか確認します。Vercelなどのホスティングサービスを利用する場合、ロケール設定も考慮に入れて設定を行う必要があります。

次章では、多言語対応に欠かせない翻訳ファイルの管理方法について説明します。

翻訳ファイルの管理方法

多言語対応サイトの運用では、各言語の翻訳データを効率的に管理することが重要です。適切な方法で翻訳ファイルを構築し、拡張性とメンテナンス性を向上させる方法を解説します。

1. 翻訳ファイルの構造

翻訳データは通常、言語ごとにJSONまたはYAMLファイルとして保存されます。Next.jsでは/public/localesディレクトリを利用するのが一般的です。

フォルダ構造例：

/public/locales
  /en
    common.json
    homepage.json
  /ja
    common.json
    homepage.json

この構造では、common.jsonに共通の翻訳文字列を格納し、特定のページ用の翻訳は個別のファイル（例: homepage.json）に分割します。

2. 翻訳ファイルの内容

翻訳ファイルはキーと値のペアで構成されます。キーは英語の意味を示す短い識別子を使うと管理しやすくなります。

例：common.json（英語版）

{
  "welcome": "Welcome",
  "description": "This site supports multiple languages."
}

日本語版：

{
  "welcome": "ようこそ",
  "description": "このサイトは多言語対応です。"
}

3. 名前空間の活用

翻訳データが大規模になると、名前空間を活用して分割管理することが推奨されます。たとえば、homepage.jsonにホームページ特有の翻訳を保存し、特定のコンポーネントでのみ利用します。

例：homepage.json

{
  "hero_title": "Explore Our Features",
  "cta_button": "Learn More"
}

4. 翻訳ファイルの動的読み込み

Next.jsではnext-i18nextライブラリを使用して、名前空間単位で翻訳データを動的に読み込みます。以下のように設定します：

import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

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

このコードにより、common.jsonとhomepage.jsonの両方のデータがページにロードされます。

5. バージョン管理とレビュー

翻訳ファイルは頻繁に更新されるため、Gitを使ったバージョン管理が必須です。また、翻訳内容の正確性を保つために、プルリクエストベースでのレビューを実施することが推奨されます。

6. 外部サービスの活用

大規模な多言語プロジェクトでは、翻訳管理ツール（例: Lokalise、Crowdin）を導入することで、翻訳プロセスを効率化できます。これにより、翻訳者と開発者がスムーズに連携できます。

7. トラブルシューティング

翻訳文字列が正しく表示されない場合は以下を確認します：

  • 翻訳ファイルが正しいディレクトリに配置されているか
  • getStaticPropsで適切な名前空間を読み込んでいるか
  • 翻訳キーが正しく指定されているか

次章では、アクセシビリティ向上のための多言語対応時のポイントについて説明します。

アクセシビリティ向上のためのポイント

多言語対応サイトを構築する際、アクセシビリティ（Webアクセシビリティ）に配慮することは非常に重要です。言語が異なるユーザーが快適に利用できるサイトを提供するために、以下のポイントを押さえましょう。

1. 言語属性の適切な設定

HTMLのlang属性は、ページやセクションごとの言語を指定するために使用します。これにより、スクリーンリーダーや検索エンジンがコンテンツの言語を正しく認識できます。

例：ページ全体の言語設定

<html lang="en">

例：セクションごとの言語切り替え

<p lang="ja">この文章は日本語です。</p>
<p lang="en">This paragraph is in English.</p>

Next.jsでは、動的に言語属性を設定できます。

import Head from 'next/head';

const MyPage = ({ locale }) => (
  <Head>
    <html lang={locale} />
  </Head>
);

2. フォントの選定とレイアウトの調整

言語ごとに異なるフォントや文字サイズを適用する必要があります。特に日本語や中国語では、適切なフォントを使用することで読みやすさが向上します。

CSSで言語ごとにスタイルを適用する例：

html[lang="ja"] {
  font-family: 'Noto Sans JP', sans-serif;
}

html[lang="en"] {
  font-family: 'Roboto', sans-serif;
}

3. ユーザーにわかりやすい言語切り替え機能

言語切り替えは、目立つ場所に配置し、現在の言語が明示されるデザインにします。また、ボタンやリンクに代替テキストを設定して、スクリーンリーダーが正しく読み上げるようにします。

例：言語切り替えボタン

<button aria-label="Switch to English">English</button>
<button aria-label="日本語に切り替え">日本語</button>

4. 翻訳品質とコンテンツの一貫性

翻訳の質が低いと、ユーザーの信頼を損ねる可能性があります。プロフェッショナルな翻訳を依頼し、専門用語や表現を統一するガイドラインを設けましょう。

5. コントラスト比と読みやすさの確保

異なる言語での文字長やフォント特性に応じて、十分なコントラスト比を保ち、読みやすいデザインを心掛けます。特に、視覚障害を持つユーザーが利用しやすいデザインが求められます。

例：コントラスト比を確保したスタイル

body {
  color: #333;
  background-color: #fff;
}

6. スクリーンリーダーでの動作確認

多言語対応サイトを構築した後は、スクリーンリーダーを使用して実際に操作感を確認します。特に、言語切り替え時に正しい発音が行われているかを検証します。

7. アクセシビリティテストの実施

アクセシビリティ向上の取り組みが正しく機能しているかを確認するために、axeやLighthouseなどのツールを活用しましょう。

次章では、多言語対応サイトをデプロイする際の注意点について解説します。

デプロイ時の注意点

多言語対応の静的サイトをデプロイする際には、翻訳の精度やパフォーマンスだけでなく、適切な設定とベストプラクティスを考慮する必要があります。以下にデプロイ時の重要な注意点を解説します。

1. 多言語ルーティングの確認

Next.jsでは、各言語ごとに異なるURLパスが生成されます。デプロイ後にこれらのルーティングが正しく機能しているかを確認します。

  • /en/about
  • /ja/about
  • /fr/about

CDN（例: Vercel）を利用する場合、ルートロケール設定を見直し、すべてのロケールでアクセス可能な状態にします。

2. サーバーレス環境での設定

Next.jsはVercelやAWS Lambdaなどのサーバーレス環境で動作します。多言語対応サイトの場合、動的パスのキャッシュが適切に設定されていることを確認してください。

Vercelでは、next.config.jsに以下の設定を加えることで、キャッシュを適切に制御できます。

module.exports = {
  i18n: {
    locales: ['en', 'ja', 'fr'],
    defaultLocale: 'en',
  },
  trailingSlash: true,
};

3. 翻訳データの整合性チェック

翻訳ファイルが正しく読み込まれるように、ファイル構造と名前空間が一致していることを確認します。また、翻訳文字列の漏れがないかテストを行います。

テスト例

  • すべてのページに期待した翻訳が適用されているか
  • 未翻訳のキーがエラーとして表示されないか

4. 言語の自動切り替え

ユーザーのブラウザ言語設定を検出し、最適な言語に自動切り替えする機能を実装する場合、デプロイ後に動作確認を行います。

例：ユーザーのロケールを検出してリダイレクトするコード

export const getServerSideProps = async ({ req, res }) => {
  const locale = req.headers['accept-language'].split(',')[0].split('-')[0];
  res.writeHead(302, { Location: `/${locale}` });
  res.end();
  return { props: {} };
};

5. SEOの最適化

多言語対応サイトのSEOを向上させるため、以下を確認します：

  • 言語ごとのhreflangタグの設定
  • 検索エンジンにインデックスされるURLが意図したものか
  • サイトマップの生成と登録

例：hreflangの設定

<link rel="alternate" hreflang="en" href="https://example.com/en" />
<link rel="alternate" hreflang="ja" href="https://example.com/ja" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr" />

6. パフォーマンス最適化

多言語対応サイトでは、言語数が増えるほどページ数も増加します。そのため、ビルド時間やページロードのパフォーマンスを最適化することが重要です。

  • 画像や翻訳ファイルをCDNにキャッシュ
  • 不要な静的ページの生成を避ける

7. 多言語でのユーザーテスト

デプロイ前後に、実際のユーザーが多言語サイトを操作してフィードバックを得ます。特に、異なる文化圏のユーザーにとってUIが使いやすいかを確認します。

次章では、Next.jsを使った多言語対応の応用例として、ECサイト構築について具体的に説明します。

応用例：多言語ECサイトの構築

Next.jsを活用した多言語対応ECサイトの構築は、グローバル市場での販売戦略に大きな効果をもたらします。この章では、Next.jsとSSGを活用した多言語ECサイトの具体的な構築手法を解説します。

1. プロジェクトの設計

多言語対応ECサイトの設計では、以下のポイントを考慮します：

  • 言語ごとの商品情報の翻訳
  • 通貨や税率などの地域ごとの設定
  • ページ遷移時の言語保持（例: カートページ）

フォルダ構成例：

/pages
  /[locale]
    /products
      [id].js
/public/locales
  /en
    products.json
  /ja
    products.json

2. 商品情報の多言語管理

商品情報をJSON形式で保存し、言語ごとに分割して管理します。

例：products.json（英語版）

[
  {
    "id": "1",
    "name": "Running Shoes",
    "description": "Lightweight running shoes for daily use.",
    "price": "$50"
  }
]

例：日本語版

[
  {
    "id": "1",
    "name": "ランニングシューズ",
    "description": "日常使いに最適な軽量ランニングシューズ。",
    "price": "¥5500"
  }
]

3. 商品ページの動的生成

getStaticPathsとgetStaticPropsを使用して、商品ページを言語ごとに生成します。

export const getStaticPaths = () => {
  const locales = ['en', 'ja'];
  const products = [{ id: '1' }, { id: '2' }];

  const paths = locales.flatMap(locale =>
    products.map(product => ({
      params: { id: product.id },
      locale,
    }))
  );

  return { paths, fallback: false };
};

export const getStaticProps = async ({ params, locale }) => {
  const data = await fetchProductData(locale, params.id); // カスタム関数
  return {
    props: { product: data },
  };
};

4. カートとチェックアウトの多言語対応

カートやチェックアウトページでは、選択された言語や通貨を保持します。localStorageを活用することで、言語設定を維持できます。

例：カートの多言語対応

const Cart = ({ products }) => {
  const { t } = useTranslation('cart');
  return (
    <div>
      <h1>{t('cart_title')}</h1>
      {products.map(product => (
        <div key={product.id}>
          <p>{product.name}</p>
          <p>{product.price}</p>
        </div>
      ))}
    </div>
  );
};

5. SEOとマーケティング戦略

  • hreflangタグを設定して検索エンジン最適化を強化
  • 商品データに構造化データを追加してGoogleリッチリザルトに対応

例：構造化データ

{
  "@context": "http://schema.org",
  "@type": "Product",
  "name": "ランニングシューズ",
  "description": "日常使いに最適な軽量ランニングシューズ。",
  "offers": {
    "@type": "Offer",
    "price": "5500",
    "priceCurrency": "JPY"
  }
}

6. 国際化の課題への対応

  • 価格と通貨の自動変換を実装（例: Intl.NumberFormatを使用）
  • 配送や返品ポリシーを地域ごとにカスタマイズ

7. デプロイと運用

多言語対応ECサイトは、VercelやAWSなどのグローバルCDNを利用してデプロイします。実際のユーザー行動をモニタリングし、言語や地域ごとのパフォーマンスを継続的に最適化します。

次章では、全体の内容を振り返り、多言語対応の重要性と今後の展望についてまとめます。

まとめ

本記事では、Next.jsを使用した静的サイト生成（SSG）と多言語対応の実現方法を解説しました。SSGの基本概念から、i18n設定、多言語ルーティング、翻訳ファイルの管理、さらには多言語ECサイトの応用例まで幅広く取り上げました。

多言語対応は、グローバルユーザーにリーチし、SEOやユーザー体験を向上させるために重要です。また、Next.jsの強力なi18n機能を活用することで、効率的かつスケーラブルな多言語サイトを構築できます。

これから多言語対応のプロジェクトを計画している方は、本記事を参考に、課題をクリアしながらプロジェクトを成功に導いてください。多言語対応の未来に向けて、さらに進化したWeb体験を提供しましょう。

React
多言語対応 Next.js SSG

コメント

コメントする

目次