MENU
  1. ホーム
  2. React
  3. Next.jsで多言語サイトを簡単にVercelにデプロイする手順

Next.jsで多言語サイトを簡単にVercelにデプロイする手順

React

Next.jsで多言語対応ウェブサイトを構築し、Vercelに効率的にデプロイする方法は、グローバルなユーザーに向けたサービスを展開するために非常に重要です。本記事では、Next.jsの強力なi18n（国際化）機能を利用して多言語サイトを作成し、それをVercelにデプロイする手順を具体的に解説します。初めての方でも分かりやすいように、設定からデプロイ後のテストまで、各ステップを丁寧にカバーします。このガイドを参考にすれば、迅速かつ確実に多言語対応ウェブサイトを公開できるようになります。

目次

Next.jsの多言語対応機能の概要


Next.jsは、ウェブアプリケーションの国際化（i18n）を簡単に実現できる機能を標準で提供しています。この機能を利用することで、多言語対応のウェブサイトを効率的に構築できます。

Next.jsのi18nの基本機能


Next.jsのi18n機能には、以下のような特徴があります：

  • URLベースの言語切り替え：example.com/enやexample.com/jaのように、URLに言語コードを含めることで簡単に切り替えが可能です。
  • 言語ごとのルーティング：言語に応じて異なるページやコンテンツを表示できます。
  • ブラウザ設定の自動検出：ユーザーのブラウザ設定に基づいて、最適な言語を自動選択します。

i18nを利用するメリット

  1. ユーザー体験の向上：多言語対応は、ユーザーが母国語でコンテンツを楽しむことを可能にし、満足度を向上させます。
  2. グローバルリーチ：異なる地域のユーザーをターゲットにしたビジネス展開を容易にします。
  3. 開発効率の向上：Next.jsの標準機能を使えば、複雑な設定を省略でき、効率的な開発が可能です。

Next.jsの多言語対応機能を活用することで、ローカライズされた優れたユーザー体験を提供するウェブサイトを作成できます。本記事では、この機能を最大限に活用するための手順を詳しく解説していきます。

必要なツールと環境の準備


Next.jsで多言語対応サイトを構築し、Vercelにデプロイするには、いくつかのツールと環境を整備する必要があります。以下はその手順を具体的に説明します。

1. Node.jsのインストール


Next.jsはNode.js環境で動作するため、最新の安定版（LTSバージョン）のNode.jsをインストールしてください。

  • インストール方法：公式サイト（Node.js）からダウンロードしてインストールします。
  • 確認方法：ターミナルで以下のコマンドを実行し、バージョンを確認します。
  node -v
  npm -v

2. Next.jsプロジェクトのセットアップ


Next.jsをインストールしてプロジェクトを初期化します。

  • ターミナルで以下のコマンドを実行します。
  npx create-next-app@latest multilingual-site
  cd multilingual-site
  • プロジェクトが作成され、multilingual-siteというディレクトリに移動します。

3. Vercel CLIのインストール


Vercelへのデプロイを簡単にするため、Vercel CLIをインストールします。

  • 以下のコマンドを実行します：
  npm install -g vercel
  • 正常にインストールされたことを確認するには：
  vercel --version

4. テキストエディタまたはIDEの準備


効率的にコードを書くために、Visual Studio Codeなどのエディタを用意してください。

  • 推奨プラグイン：
  • Prettier（コードフォーマッタ）
  • ESLint（コード品質向上ツール）

5. Gitのセットアップ


プロジェクトを管理し、Vercelにデプロイする際に使用するGitをセットアップします。

  • Gitがインストールされていない場合は、公式サイトからインストールしてください。
  • 以下のコマンドでGitを初期化します：
  git init

6. 必要なパッケージのインストール


多言語対応に必要なライブラリを追加します。たとえば、next-translateを使用する場合：

npm install next-translate

これで必要なツールと環境が整いました。次は、Next.jsの設定に進みます。

i18nの設定方法


Next.jsで多言語対応サイトを構築するためには、next.config.jsファイルでi18n設定を行う必要があります。このセクションでは、具体的な設定方法を解説します。

1. 基本的な設定


まず、next.config.jsファイルを開き、以下のようにi18nオプションを追加します。

module.exports = {
  i18n: {
    locales: ['en', 'ja', 'es'], // サポートする言語を配列で指定
    defaultLocale: 'en',        // デフォルト言語を指定
  },
};
  • locales: 対応させたい言語のリストを記述します。例では英語（en）、日本語（ja）、スペイン語（es）を指定しています。
  • defaultLocale: デフォルトで表示される言語を指定します。

2. 言語別ファイルの作成


言語ごとのコンテンツを管理するために、public/localesディレクトリを作成します。

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

各言語フォルダ内にJSONファイルを作成し、テキストリソースを記述します。例えば、英語のcommon.json：

{
  "greeting": "Hello",
  "farewell": "Goodbye"
}

日本語のcommon.json：

{
  "greeting": "こんにちは",
  "farewell": "さようなら"
}

3. 言語リソースの読み込み


Next.jsのuseTranslationフックを使用して、コンポーネント内で言語リソースを利用します。以下は例です：

import { useRouter } from 'next/router';
import useTranslation from 'next-translate/useTranslation';

export default function HomePage() {
  const { t } = useTranslation();
  const router = useRouter();

  return (
    <div>
      <h1>{t('common:greeting')}</h1>
      <button onClick={() => router.push('/about')}>{t('common:farewell')}</button>
    </div>
  );
}
  • t('common:greeting'): JSONファイル内のキーを指定して翻訳文を取得します。
  • router.push: 言語変更やページ遷移を簡単に管理します。

4. ブラウザ言語の自動検出


ユーザーのブラウザ言語を自動検出して適切な言語にリダイレクトするには、以下のように設定を追加します：

module.exports = {
  i18n: {
    locales: ['en', 'ja', 'es'],
    defaultLocale: 'en',
    localeDetection: true, // 自動検出を有効化
  },
};

5. 必要な依存関係の確認


動作確認を行い、エラーがないことを確認します。以下のコマンドで開発サーバーを起動します：

npm run dev

これで、Next.jsのi18n設定が完了しました。次は、実際に多言語ページを構築する方法について解説します。

言語別ページの作成


Next.jsで多言語対応のウェブサイトを構築する際、各言語に対応したページを作成することが重要です。このセクションでは、効率的に言語別ページを作成する手法を解説します。

1. 言語別のページ作成の基本


Next.jsでは、pagesディレクトリ内で言語に対応したページを作成できます。例えば、ホームページを多言語対応にする場合：

pages/
  en/
    index.js
  ja/
    index.js
  es/
    index.js

このように、言語コードごとにディレクトリを作成し、各ディレクトリに言語別のindex.jsファイルを配置します。

2. 再利用性の高いコンポーネントを活用


重複を避けるため、言語ごとに異なるテキストを表示しつつ、同じレイアウトや構造を再利用します。以下の例を見てみましょう：

共通コンポーネント（components/Layout.js）：

import useTranslation from 'next-translate/useTranslation';

export default function Layout({ children }) {
  const { t } = useTranslation();
  return (
    <div>
      <header>
        <h1>{t('common:siteTitle')}</h1>
      </header>
      <main>{children}</main>
    </div>
  );
}

言語別ページ（例：pages/en/index.js）：

import Layout from '../../components/Layout';

export default function HomePage() {
  return (
    <Layout>
      <p>Welcome to our site!</p>
    </Layout>
  );
}

言語別ページ（例：pages/ja/index.js）：

import Layout from '../../components/Layout';

export default function HomePage() {
  return (
    <Layout>
      <p>私たちのサイトへようこそ！</p>
    </Layout>
  );
}

3. 言語別のデータを動的に読み込む


すべての言語で同じ構造のページを作る場合、動的ルーティングとJSONファイルを活用することで、コードの重複を減らせます。以下はその例です。

データファイル（public/locales/en.json）：

{
  "welcomeMessage": "Welcome to our site!"
}

データファイル（public/locales/ja.json）：

{
  "welcomeMessage": "私たちのサイトへようこそ！"
}

動的ページ（例：pages/[locale]/index.js）：

import fs from 'fs';
import path from 'path';

export async function getStaticProps({ params }) {
  const locale = params.locale;
  const filePath = path.join(process.cwd(), `public/locales/${locale}.json`);
  const data = JSON.parse(fs.readFileSync(filePath, 'utf8'));

  return {
    props: { data },
  };
}

export async function getStaticPaths() {
  return {
    paths: [
      { params: { locale: 'en' } },
      { params: { locale: 'ja' } },
    ],
    fallback: false,
  };
}

export default function LocalePage({ data }) {
  return (
    <div>
      <p>{data.welcomeMessage}</p>
    </div>
  );
}

4. URLに基づく言語切り替え


Next.jsのルーティングを活用することで、言語を切り替えるリンクを設置できます：

import Link from 'next/link';

export default function LanguageSwitcher() {
  return (
    <nav>
      <Link href="/en">English</Link> | <Link href="/ja">日本語</Link>
    </nav>
  );
}

これにより、言語別のページ構造を作成しつつ、メンテナンス性の高いコードを実現できます。次のセクションでは、動的ルーティングを活用したページ管理について詳しく説明します。

動的ルーティングを用いた多言語ページの管理


多言語対応サイトを効率的に構築するためには、動的ルーティングを活用することで、コードの重複を最小限に抑えながら柔軟なページ管理を行うことが重要です。このセクションでは、Next.jsの動的ルーティングを使った多言語ページの管理方法を解説します。

1. 動的ルーティングの仕組み


Next.jsでは、ファイル名に中括弧（[]）を使用して動的ルーティングを設定できます。これにより、複数の言語やページを動的に管理可能です。例えば、多言語対応のページを動的に管理する場合、以下のように構成します：

ディレクトリ構造：

pages/
  [locale]/
    [slug].js
  • [locale]: 言語コード（例：en、ja）を動的に取得。
  • [slug]: 各ページのスラッグ（例：about、contact）を動的に管理。

2. 動的ルートを利用したページ作成


以下のコードは、動的ルーティングを利用して言語別のページを管理する例です：

pages/[locale]/[slug].js：

import fs from 'fs';
import path from 'path';

export async function getStaticPaths() {
  const locales = ['en', 'ja']; // サポートする言語
  const pages = ['about', 'contact']; // ページスラッグ

  const paths = locales.flatMap((locale) =>
    pages.map((slug) => ({
      params: { locale, slug },
    }))
  );

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const { locale, slug } = params;

  const filePath = path.join(
    process.cwd(),
    `public/locales/${locale}/${slug}.json`
  );
  const data = JSON.parse(fs.readFileSync(filePath, 'utf8'));

  return { props: { data, locale, slug } };
}

export default function DynamicPage({ data, locale, slug }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

3. JSONファイルでのデータ管理


言語ごと、ページごとのコンテンツをJSONファイルで管理します。以下はサンプルデータです：

ファイル構造：

public/
  locales/
    en/
      about.json
      contact.json
    ja/
      about.json
      contact.json

public/locales/en/about.json：

{
  "title": "About Us",
  "content": "This is the about page for the English version."
}

public/locales/ja/about.json：

{
  "title": "私たちについて",
  "content": "これは日本語版のアバウトページです。"
}

4. 言語切り替えリンクの実装


動的ルートを利用して言語を切り替えるリンクを実装します：

言語切り替えコンポーネント：

import Link from 'next/link';
import { useRouter } from 'next/router';

export default function LanguageSwitcher() {
  const { asPath } = useRouter();

  return (
    <nav>
      <Link href={`/en${asPath}`}>English</Link> | <Link href={`/ja${asPath}`}>日本語</Link>
    </nav>
  );
}

このコードを利用することで、ユーザーは現在のページに対応した別言語版のページに簡単に切り替えられます。

5. デバッグと確認


動的ルーティングが正しく機能しているか確認するため、開発環境で以下を行います：

  • npm run devでローカルサーバーを起動。
  • 各言語・スラッグごとのURL（例：/en/about、/ja/contact）をテストして正しい内容が表示されるか確認。

この方法により、動的ルーティングを活用して効率的かつスケーラブルに多言語対応のページを管理できます。次のセクションでは、Vercelにデプロイするための準備について説明します。

Vercelでのデプロイ準備


Next.jsで構築した多言語対応サイトをVercelにデプロイするには、適切な準備を行う必要があります。このセクションでは、デプロイに必要な事前作業とベストプラクティスを解説します。

1. Vercelアカウントの作成


Vercelでデプロイを行うにはアカウントが必要です。以下の手順で作成してください：

  1. Vercelの公式サイト（https://vercel.com/）にアクセス。
  2. GitHub、GitLab、またはBitbucketアカウントでログインします。
  3. 必要に応じてプロジェクトを作成するワークスペースを設定します。

2. プロジェクトのバージョン管理


Gitを使用してプロジェクトのバージョン管理を行います。以下のコマンドでGitを初期化します：

git init
git add .
git commit -m "Initial commit"

リモートリポジトリを設定し、プッシュします：

git remote add origin <your-repository-url>
git branch -M main
git push -u origin main

3. 環境変数の設定


必要に応じて、環境変数をVercelに設定します。

  • Vercelのダッシュボードでプロジェクトを選択。
  • 「Settings」 > 「Environment Variables」から環境変数を追加します。

例：多言語サイトで外部APIを使用する場合：

NameValueEnvironment
NEXT_PUBLIC_API_KEYyour_api_key_hereAll

4. Next.jsのビルド設定確認


VercelはNext.jsに最適化されていますが、next.config.jsを確認し、正しい設定が行われているか確認してください。例えば、i18n設定が必要です：

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

5. `.gitignore`ファイルの確認


デプロイ時に不要なファイルをアップロードしないよう、.gitignoreファイルを設定します。

例：

node_modules/
.env
.next/

6. プロジェクトをVercelにリンク


ローカルで以下のコマンドを実行してプロジェクトをVercelにリンクします：

vercel

Vercel CLIがプロジェクトのリンクとデプロイ設定を案内してくれます。初回デプロイ時にはプロンプトに従って適切な選択をしてください。

7. ローカルでの最終テスト


デプロイ前に、ローカル環境でビルドとサーバーの動作確認を行います：

npm run build
npm start

このコマンドでビルドが成功し、アプリケーションが正常に動作することを確認してください。

準備が整いました。次のセクションでは、実際にVercelにデプロイする手順を説明します。

Vercelへのデプロイ手順


Next.jsで構築した多言語対応サイトをVercelにデプロイする手順を、具体的なステップごとに解説します。

1. Vercel CLIを使用したデプロイ


ローカル環境から直接Vercelにデプロイするには、Vercel CLIを使用します。以下の手順で進めます。

Vercelにログイン
Vercel CLIでログインします：

vercel login

プロジェクトをデプロイ
プロジェクトのルートディレクトリで以下のコマンドを実行します：

vercel

実行すると、以下のような選択肢が表示されます：

  • プロジェクトをリンクするか、作成するか。
  • 使用するVercelアカウント。
  • 適切なプロジェクト名。

選択が完了すると、自動的にデプロイが開始されます。

2. Gitリポジトリを使用したデプロイ


GitHub、GitLab、またはBitbucketを利用してプロジェクトをVercelにデプロイする手順は以下の通りです。

リポジトリの連携

  1. Vercelのダッシュボードにアクセスします。
  2. 「New Project」をクリックし、デプロイしたいリポジトリを選択します。
  3. 必要な設定（プロジェクト名、環境変数など）を行います。

自動デプロイ設定

  • リポジトリ内の変更がプッシュされるたびに、Vercelが自動的にデプロイを行います。

3. デプロイ中の確認ポイント


デプロイプロセスは通常数分で完了しますが、以下を確認することが重要です：

  • Vercel CLIまたはダッシュボードで、デプロイが成功したかを確認。
  • ビルドエラーや設定ミスがないか、ログをチェックします。

4. デプロイ後の確認


デプロイが完了すると、Vercelは自動的にプレビューURLを提供します。このURLを使って、サイトが正しく動作しているかを確認します。

  • 確認するポイント：
  • 各言語のページが正常に表示されるか。
  • URLベースの言語切り替えが機能するか。
  • 画像やスタイルシートが正しく読み込まれるか。

5. カスタムドメインの設定（必要な場合）


独自ドメインでの運用を行う場合、以下の手順で設定を行います：

  1. Vercelのダッシュボードで「Settings」 > 「Domains」に進みます。
  2. カスタムドメインを追加し、DNS設定を更新します。
  3. DNSが反映されるまで待機し、正常に動作しているか確認します。

6. 自動デプロイの活用


GitリポジトリをVercelに連携している場合、コードをリポジトリにプッシュするだけで自動的にデプロイが行われます。これにより、開発フローが効率化します。

テストを行い、必要に応じて修正
最後に、プレビューURLを使用して動作確認を行い、不具合があればコードを修正し、再デプロイします。

これでNext.jsプロジェクトのデプロイは完了です。次は、デプロイ後の多言語対応機能の確認とテストについて解説します。

デプロイ後の多言語対応確認とテスト


Vercelにデプロイした多言語対応サイトが正しく動作しているかを確認し、必要なテストを実施することは、プロジェクトの成功において非常に重要です。このセクションでは、確認すべきポイントとテスト方法について説明します。

1. 各言語ページの確認


デプロイされたサイトのURL（例：https://your-site.vercel.app）にアクセスし、すべての言語ページが正常に表示されるかを確認します。

確認する内容：

  • デフォルトの言語が正しく表示されるか。
  • URLに基づくページ遷移（例：/en、/ja）が期待通りに動作するか。
  • 各言語のコンテンツが正しくロードされるか。

2. 言語切り替え機能のテスト


サイト内で提供している言語切り替え機能（例：ドロップダウンやリンク）を使用して、以下を確認します：

  • 言語変更後のページ遷移がスムーズか。
  • 切り替えた言語のコンテンツが正しく表示されるか。
  • URLが正しい言語コード（例：/enや/ja）を反映しているか。

3. ブラウザ設定による自動言語検出


ブラウザの言語設定を変更し、サイトが適切な言語を自動選択するかを確認します。

  • 設定方法（Google Chromeの例）：
  1. 「設定」 > 「言語」から表示言語を変更。
  2. サイトをリロードして適切な言語が表示されるか確認。

4. モバイル端末での動作確認


多言語対応サイトはモバイルデバイスでも適切に動作する必要があります。以下を確認してください：

  • モバイルでの言語切り替え操作がスムーズか。
  • 各言語のページレイアウトが崩れていないか。

5. アクセスエラーのチェック


Vercelのデプロイログやエラーログを確認し、以下の問題が発生していないかチェックします：

  • リソースが正しくロードされていない。
  • 動的ルーティングでエラーが発生している。
  • 環境変数の設定ミス。

6. パフォーマンステスト


多言語サイトが適切にパフォーマンスを発揮しているかを測定するために、GoogleのLighthouseやPageSpeed Insightsを使用します。

  • テスト結果でスコアが低い場合は、画像の最適化やキャッシュポリシーの見直しを行いましょう。

7. ローカル環境とデプロイ環境の一致確認


ローカル環境で正常に動作していた機能がデプロイ後も同様に動作することを確認します。特に以下を重点的に確認してください：

  • getStaticPropsやgetStaticPathsでのデータ取得が期待通りに動作しているか。
  • 言語別JSONファイルが正しく読み込まれているか。

8. ユーザーからのフィードバック収集


公開後、ユーザーから寄せられるフィードバックを集め、言語やUIに関する改善を検討します。

サポート方法：

  • サイトにフィードバックフォームを設置する。
  • アクセス解析ツール（例：Google Analytics）を設定してユーザーの動きを分析。

9. テスト結果のまとめ


テスト結果を記録し、不具合があればコードを修正して再デプロイを行います。Vercelは変更を簡単に反映できるため、迅速な改善が可能です。

これらの確認とテストを行うことで、多言語対応サイトの品質を担保し、ユーザーに最適な体験を提供できます。次は、多言語サイトの保守と管理のポイントについて解説します。

多言語サイトの保守と管理のポイント


多言語対応サイトを運用していく上で、継続的な保守と管理が必要です。このセクションでは、効率的な保守方法と運用のポイントを解説します。

1. 新しい言語追加時のプロセス


多言語サイトでは、必要に応じて新しい言語を追加する場合があります。以下の手順で対応します：

  1. next.config.jsのlocalesリストに新しい言語コードを追加。
   module.exports = {
     i18n: {
       locales: ['en', 'ja', 'es', 'fr'], // 新しい言語 'fr' を追加
       defaultLocale: 'en',
     },
   };
  1. 新しい言語用のJSONファイルをpublic/localesディレクトリに作成。
  2. 必要に応じて、UIや翻訳ファイルを更新。

2. 翻訳データの管理


翻訳データを定期的に見直し、更新することでコンテンツの品質を維持します。

  • ツールの活用：CrowdinやLokaliseなどの翻訳管理ツールを使用して効率的に翻訳を管理。
  • バージョン管理：翻訳ファイルをGitで管理し、変更履歴を追跡可能にする。

3. アクセス解析と改善


Google AnalyticsやVercel Analyticsを活用して、多言語サイトのパフォーマンスをモニタリングします：

  • 各言語のページビューを比較し、人気のあるコンテンツを特定。
  • 言語ごとに異なるユーザー行動を分析し、改善ポイントを洗い出す。

4. SEOの最適化


多言語対応サイトでは、検索エンジン最適化（SEO）が重要です。以下のポイントに注意します：

  • hreflangタグの設定：ページが各言語向けであることを検索エンジンに伝える。
  • URLの正規化：言語ごとのURL構造が一貫しているか確認（例：/en/about、/ja/about）。
  • ローカルキーワードの最適化：各言語ごとに適切なキーワードを使用。

5. パフォーマンスの維持


多言語サイトはリソースが増えるため、定期的なパフォーマンスチェックが必要です：

  • 画像の最適化：必要に応じてWebP形式に変換。
  • CDNの活用：Vercelが提供するCDNを活用して高速配信を実現。
  • キャッシュ戦略：言語ごとのリソースに適切なキャッシュポリシーを設定。

6. バグ修正とデプロイの迅速化


Vercelのプレビュー機能を活用して、修正内容をすぐに確認可能にします。

  • Gitリポジトリへのプッシュ後、自動でプレビュー環境が生成されるため、迅速なテストが可能。

7. ユーザーからのフィードバックを反映


多言語サイトを運用する中で、ユーザーからのフィードバックを積極的に収集し、改善に反映します。

フィードバック収集方法：

  • サイト内の問い合わせフォーム。
  • SNSやコミュニティでの意見収集。

8. 定期的なバックアップ


翻訳データや重要な設定ファイルのバックアップを定期的に行います。特に、翻訳データの消失を防ぐため、外部ストレージに保存しておくことが推奨されます。

これらのポイントを実践することで、多言語対応サイトの品質を保ち、ユーザーに最適な体験を提供し続けることができます。次のステップは、改善を繰り返しながらサイトの成長を促進することです。

まとめ


本記事では、Next.jsを使用して多言語対応サイトを構築し、Vercelにデプロイするまでのプロセスを詳しく解説しました。Next.jsのi18n機能を活用することで、効率的に多言語ページを構築でき、Vercelを利用すれば、簡単かつ迅速にデプロイできます。

具体的には、以下のポイントを取り上げました：

  • Next.jsでのi18n設定と動的ルーティングの活用方法。
  • Vercelへのデプロイ準備と実際のデプロイ手順。
  • デプロイ後の多言語機能のテストと管理のポイント。

適切に設計・運用することで、ユーザーに快適な体験を提供する多言語対応サイトを構築できます。この記事を参考に、グローバル展開に向けたウェブサイトの運用をぜひ始めてみてください。

React
多言語対応 ウェブ開発 Next.js Vercel

コメント

コメントする

目次