目標
- Next.jsにおける多言語対応（i18n）の重要性を理解する。
-
next-i18nextを使って多言語機能をセットアップする。 - ブログに2つの言語（日本語と英語）を追加する。
1. 企業向けウェブアプリにおけるi18nの重要性
グローバルなユーザーに対応するため、多言語対応は企業にとって必須です。Next.jsはビルトインのi18nサポートを提供しており、next-i18nextを使うことでさらに柔軟性が向上します。このエピソードでは、既存のブログを多言語化します。
2. 必要なライブラリのインストール
多言語対応のためにnext-i18nextを導入します。
手順：
ターミナルで以下を実行：
npm install next-i18next
3. 多言語設定の構成
プロジェクトに多言語サポートを追加します。
手順：
-
next-i18next.config.jsを作成し、以下を記述：module.exports = { i18n: { defaultLocale: 'ja', locales: ['ja', 'en'], }, }; -
next.config.jsを編集して統合：const { i18n } = require('./next-i18next.config'); module.exports = { i18n, }; - 翻訳ファイルを準備：
-
public/locales/ja/common.json：{ "home": "ホーム", "about": "About", "addPost": "投稿追加", "welcome": "2025年のNext.js学習シリーズへようこそ" } -
public/locales/en/common.json：{ "home": "Home", "about": "About", "addPost": "Add Post", "welcome": "Welcome to the 2025 Next.js Learning Series" }
-
4. 多言語対応の実装
既存のブログに多言語機能を適用します。
app/layout.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の編集：
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に移動：
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で状態管理を追加し、ユーザー体験を強化します。
この記事が役に立ったと思ったら、ぜひ「いいね」を押して、ストックしていただければ嬉しいです！次回のエピソードもお楽しみに！