Next.jsを企業向けに最適化！2025年のアプリ構築術 | エピソード1: Next.jsで多言語システムを構築

## 目標
- Next.jsにおける多言語対応（i18n）の重要性を理解する。
- `next-i18next`を使って多言語機能をセットアップする。
- ブログに2つの言語（日本語と英語）を追加する。

---

## 1. 企業向けウェブアプリにおけるi18nの重要性
グローバルなユーザーに対応するため、多言語対応は企業にとって必須です。Next.jsはビルトインのi18nサポートを提供しており、`next-i18next`を使うことでさらに柔軟性が向上します。このエピソードでは、既存のブログを多言語化します。

---

## 2. 必要なライブラリのインストール
多言語対応のために`next-i18next`を導入します。

### 手順：
ターミナルで以下を実行：
```
npm install next-i18next
```

---

## 3. 多言語設定の構成
プロジェクトに多言語サポートを追加します。

### 手順：
1. `next-i18next.config.js`を作成し、以下を記述：
   ```js
   module.exports = {
     i18n: {
       defaultLocale: 'ja',
       locales: ['ja', 'en'],
     },
   };
   ```
2. `next.config.js`を編集して統合：
   ```js
   const { i18n } = require('./next-i18next.config');
   module.exports = {
     i18n,
   };
   ```
3. 翻訳ファイルを準備：
   - `public/locales/ja/common.json`：
     ```json
     {
       "home": "ホーム",
       "about": "About",
       "addPost": "投稿追加",
       "welcome": "2025年のNext.js学習シリーズへようこそ"
     }
     ```
   - `public/locales/en/common.json`：
     ```json
     {
       "home": "Home",
       "about": "About",
       "addPost": "Add Post",
       "welcome": "Welcome to the 2025 Next.js Learning Series"
     }
     ```

---

## 4. 多言語対応の実装
既存のブログに多言語機能を適用します。

### `app/layout.tsx`の編集：
```tsx
import '../globals.css';
import Link from 'next/link';
import { useTranslation } from 'next-i18next';
import { i18n } from 'next-i18next';

export const metadata = {
  title: 'Next.js 2025ブログ',
  description: '2025年の最新技術で作られたブログサイト',
};

export default function RootLayout({ children }) {
  const { t } = useTranslation('common');

  return (
    <html lang={i18n?.language}>
      <body className="font-sans antialiased">
        <header className="bg-blue-800 text-white p-4">
          <nav className="max-w-4xl mx-auto flex justify-between items-center">
            <Link href="/" className="text-xl font-bold">{t('home')}</Link>
            <div className="space-x-4">
              <Link href="/about" className="hover:underline">{t('about')}</Link>
              <Link href="/add-post" className="hover:underline">{t('addPost')}</Link>
              <Link href="/" locale="ja" className="hover:underline">日本語</Link>
              <Link href="/" locale="en" className="hover:underline">English</Link>
            </div>
          </nav>
        </header>
        <main>{children}</main>
        <footer className="bg-gray-200 p-4 text-center text-gray-600">
          © 2025 Next.js学習シリーズ
        </footer>
      </body>
    </html>
  );
}
```

### `app/page.tsx`の編集：
```tsx
import { useTranslation } from 'next-i18next';

export default function Home() {
  const { t } = useTranslation('common');

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-600 mb-4">Next.jsからのHello World!</h1>
      <p className="text-lg text-gray-700 mb-6">{t('welcome')}</p>
    </div>
  );
}
```

### Server Components対応：
`next-i18next`をServer Componentsで使うため、`app/[lng]/page.tsx`に移動：
```tsx
import { useTranslation } from 'next-i18next';

export default function Home({ params }: { params: { lng: string } }) {
  const { t } = useTranslation('common', { lng: params.lng });

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-600 mb-4">Next.jsからのHello World!</h1>
      <p className="text-lg text-gray-700 mb-6">{t('welcome')}</p>
    </div>
  );
}
```

---

## 実践：多言語ブログ
- **ナビゲーション**：日本語と英語でメニューが切り替わる。
- **コンテンツ**：ウェルカムメッセージが選択した言語で表示。

**確認**：
- `npm run dev`で起動し、`http://localhost:3000/ja`と`http://localhost:3000/en`をチェック。

---

## エピソード1の終了
- Next.jsで多言語対応をセットアップしました。
- ブログが日本語と英語で利用可能になりました。

**次回のエピソード**：Zustandで状態管理を追加し、ユーザー体験を強化します。

---

この記事が役に立ったと思ったら、ぜひ「いいね」を押して、ストックしていただければ嬉しいです！次回のエピソードもお楽しみに！