Zenn
🗂

Next.jsで多言語対応の静的サイトを構築する

2025/02/28に公開
Next.js
Next.js
React
i18n
tech

はじめに

この記事は、GPT-4oによって生成された内容です。Next.jsを使用して多言語対応の静的サイトを構築する方法について説明します。特に、メイン言語にはURLプレフィックスを付けず、その他の言語にはプレフィックスを付ける設定に焦点を当てます。GitHub Pagesを使用してデプロイする設定も含まれています。

プロジェクトのセットアップ

まず、Next.jsのプロジェクトを作成します。create-next-appを使用してプロジェクトを初期化します。

npx create-next-app@latest next-intl-ssg

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

多言語対応のために、next-intlをインストールします。

npm install next-intl

プロジェクト構成

プロジェクトのディレクトリ構成は以下の通りです。

  • src/app/[locale]/about/page.tsx
  • src/app/about/page.tsx
  • src/lib/i18n.ts
  • src/components/I18nProvider.tsx
  • src/i18n/ja.json
  • src/i18n/en.json

多言語対応の実装

next-intlを使用して、言語ごとのメッセージを管理します。src/lib/i18n.tsでメッセージを取得する関数を定義しています。

export async function getMessages(locale: string) {
  return (await import(`@/i18n/${locale}.json`)).default;
}

I18nProviderコンポーネントを使用して、各ページでメッセージを提供します。

import { ReactNode } from 'react';
import { NextIntlClientProvider } from 'next-intl';

export default function I18nProvider({ 
  children, 
  locale, 
  messages 
}: { 
  children: ReactNode;
  locale: string;
  messages: Record<string, Record<string, string>>;
}) {
  return (
    <NextIntlClientProvider locale={locale} messages={messages}>
      {children}
    </NextIntlClientProvider>
  );
}

SSGの設定

generateStaticParams関数を使用して、静的ページを生成する際のパラメータを設定します。メイン言語（日本語）にはプレフィックスを付けず、その他の言語にはプレフィックスを付けます。

// src/app/[locale]/about/page.tsx
export function generateStaticParams() {
  return locales.filter(locale => locale !== 'ja').map(locale => ({
    locale
  }));
}

GitHub Pagesへのデプロイ

GitHub Actionsを使用して、GitHub Pagesにデプロイします。.github/workflows/deploy.ymlでデプロイの設定を行います。

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: "npm"

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./out

  deploy:
    environment: github-pages
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

リンク

まとめ

このブログでは、Next.jsを使用して多言語対応の静的サイトを構築し、メイン言語にはプレフィックスを付けず、その他の言語にはプレフィックスを付ける方法を紹介しました。next-intlを活用することで、簡単に多言語対応が可能になります。ぜひ試してみてください。

Discussion