Menu

国際化の使用方法

Nexty.devはnext-intlライブラリを使用して完全な多言語サポートを実装し、ルートレベルの言語切り替え、自動言語検出などの機能を含む柔軟な国際化ソリューションを提供します。

このドキュメントを通じて、next-intlの基本的な使用方法、新しい言語と翻訳コンテンツを拡張する方法、そしてNexty.devがサポートする高度な多言語機能について学習できます。

ファイル構造

i18n/
├── messages/                # 翻訳ファイルディレクトリ
│   ├── en/                  # 英語翻訳
│   │   └── common.json
│   ├── zh/                  # 中国語翻訳
│   │   └── common.json
│   └── ja/                  # 日本語翻訳
│       └── common.json
├── request.ts               # next-intlリクエスト設定
└── routing.ts               # ルートと言語設定
 
components/
├── LocaleSwitcher.tsx       # 言語切り替えコンポーネント
└── LanguageDetectionAlert.tsx  # 言語検出アラートコンポーネント
 
stores/
└── localeStore.ts           # 言語状態管理
 
middleware.ts                # ミドルウェア設定
next.config.mjs              # Next.js設定

基本的な使用方法

コンポーネントでの翻訳使用

フロントエンドコンポーネントでは、useLocaleを使用して現在の言語を取得し、useTranslationsを使用して翻訳コンテンツを取得します。

import { useLocale, useTranslations } from 'next-intl';
 
export default function MyComponent() {
  const locale = useLocale();
  const t = useTranslations('Home');
  
  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('description')}</p>
    </div>
  );
}

サーバーコンポーネントでの使用

サーバーコンポーネントでは、getLocaleを使用して現在の言語を取得し、getTranslationsを使用して翻訳コンテンツを取得します。

import { getLocale, getTranslations } from 'next-intl/server';
 
export default async function ServerComponent() {
  const locale = await getLocale();
  const t = await getTranslations('Home');
  
  return (
    <div>
      <h1>{t('title')}</h1>
    </div>
  );
}

注目すべき点

サーバーコンポーネントがasyncを使用していない場合は、useLocaleとuseTranslationsを使用することもでき、next-intlが自動的に処理します。

パラメータ付き翻訳の使用

JSONファイル内：

{
  "welcome": "ようこそ、{name}さん！",
  "countdown": "{countdown}秒後に閉じます"
}

コンポーネント内：

const message = t('welcome', { name: 'John' });
const timer = t('countdown', { countdown: countdown.toString() });

生データの使用

複雑なデータ構造（配列、オブジェクトなど）にはt.raw()を使用します：

const headerLinks = t.raw('Header.links') as HeaderLink[];
const features = t.raw('Landing.Features.items');

国際化Linkコンポーネント

@/i18n/routingが公開するLinkコンポーネントを使用します。hrefに言語プレフィックスを記述する必要はありません。next-intlが現在の言語に基づいて自動的に処理します。

import { Link as I18nLink } from '@/i18n/routing';
 
<I18nLink href="/about">
  {t('aboutUs')}
</I18nLink>

国際化useRouter

@/i18n/routingが公開するuseRouterコンポーネントを使用します。同様に、言語プレフィックスを記述する必要はありません。next-intlが現在の言語に基づいて自動的に処理します。

import { useRouter } from '@/i18n/routing';
 
const router = useRouter();
 
const handleClick = () => {
  router.push('/dashboard');
};

新しい言語を追加する手順

ステップ1. 言語設定の修正

i18n/routing.tsで新しい言語を追加します：

export const LOCALES = ['en', 'zh', 'ja', 'ko'] // 韓国語を追加
export const DEFAULT_LOCALE = 'en'
export const LOCALE_NAMES: Record<string, string> = {
  'en': "English",
  'zh': "中文", 
  'ja': "日本語",
  'ko': "한국어", // 韓国語表示名を追加
};

ステップ2. 翻訳ファイルの作成

新しい言語ディレクトリと翻訳ファイルを作成します：

mkdir i18n/messages/ko
cp i18n/messages/en/common.json i18n/messages/ko/common.json

ステップ3. コンテンツの翻訳

i18n/messages/ko/common.jsonを編集し、すべての英語コンテンツを韓国語に翻訳します。

ステップ4. ルートリダイレクトの更新（オプション）

必要に応じて、next.config.mjsに対応するリダイレクトルールを追加します：

{
  source: "/ko/dashboard", 
  destination: "/ko/dashboard/settings",
  permanent: true,
}

マルチファイル翻訳アーキテクチャ

翻訳コンテンツが多い場合、翻訳ファイルを複数のモジュールに分割することを推奨します：

モジュラーファイル構造の作成

i18n/messages/en/
├── common.json          # 共通翻訳
├── Landing.json         # 認証関連
├── Dashboard.json       # ダッシュボード
└── Blog.json            # ブログ

request.ts設定の修正

import { getRequestConfig } from 'next-intl/server';
import { routing } from './routing';
 
export default getRequestConfig(async ({ requestLocale }) => {
  let locale = await requestLocale;
 
  if (!locale || !routing.locales.includes(locale as any)) {
    locale = routing.defaultLocale;
  }
 
  // すべての翻訳ファイルを動的にインポート
  const common = (await import(`./messages/${locale}/common.json`)).default;
  const Landing = (await import(`./messages/${locale}/Landing.json`)).default;
  const Dashboard = (await import(`./messages/${locale}/Dashboard.json`)).default;
  const Blog = (await import(`./messages/${locale}/Blog.json`)).default;
 
  return {
    locale,
    messages: {
      ...common,
      Landing,
      Dashboard,
      Blog,
    }
  };
});

名前空間の使用

// 特定の名前空間を使用
const t = useTranslations('Dashboard.User.Settings');
const tLanding = useTranslations('Landing');
const tBlog = useTranslations('Blog');

ファイル組織の推奨事項

// common.json - サイト全体共通
{
  "header": {...},
  "footer": {...},
  "common": {...}
}
 
// Landing.json - ランディングページ
{
  "login": {...},
  "register": {...},
  "forgotPassword": {...}
}
 
// Dashboard.json - ダッシュボードモジュール
{
  "sidebar": {...},
  "settings": {...},
  "profile": {...}
}

Nexty.devの高度な機能

言語検出とアラート

ユーザーが初回訪問時にシステムが自動的にブラウザ言語を検出します。現在のWebサイト言語と一致しない場合、切り替え促進画面が表示されます：

  • 10秒カウントダウンで自動クローズ
  • ユーザーが手動でクローズ可能
  • クローズ状態を30日間保存（Cookieを通じて）

Cookie有効期間内に再度Webサイトを訪問すると、言語が自動的に切り替わります。

SEO最適化

各言語版は独立したURLとメタデータを生成します：

import { constructMetadata } from "@/lib/metadata";
 
export async function generateMetadata({ params }: MetadataProps): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "Home" });
 
  return constructMetadata({
    page: "Home",
    title: t("title"),
    description: t("description"),
    locale: locale as Locale,
    path: `/`,
  });
}