M

MLOG

日本語

Next.jsアプリケーションでシームレスな国際化（i18n）を実装し、世界中の視聴者にリーチする方法を学びます。ルーティング、コンテンツ翻訳、ベストプラクティスを網羅しています。

Next.jsの国際化：グローバルな視聴者向けの多言語アプリの構築

今日の相互接続された世界では、グローバルな視聴者に対応するアプリケーションを構築することはもはや贅沢ではなく、必要不可欠です。強力なReactフレームワークであるNext.jsは、国際化（i18n）を実装するための堅牢な機能を提供し、世界中のユーザーにローカライズされた体験を提供する多言語アプリケーションを作成することができます。この包括的なガイドでは、国際化されたNext.jsアプリケーションを構築するための基本的な概念、技術、ベストプラクティスを解説します。

国際化とローカリゼーションの理解

Next.jsのi18nの詳細に入る前に、重要な用語を明確にしておきましょう：

本質的に、i18nはローカリゼーションのためにアプリケーションを準備するものです。言語に依存する要素をコアコードから分離することで、異なる市場向けにアプリケーションをローカライズしやすくなります。

Next.jsで国際化を実装する理由

Next.jsアプリケーションにi18nを実装することには、数多くの利点があります：

Next.jsのi18n機能と設定

Next.jsは、そのルーティングとコンテンツ管理機能を通じて、i18nの組み込みサポートを提供しています。以下は、重要な機能の内訳です：

1. next.config.jsでのi18nの設定

i18nのコア設定はnext.config.jsファイル内にあります。以下はその例です：


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // サポートするロケール（言語コード）の配列
    defaultLocale: 'en', // 使用するデフォルトのロケール
    localeDetection: true, // ブラウザ設定に基づく自動ロケール検出の有効化/無効化（任意）
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

説明：

2. ロケールプレフィックス付きのルーティング

Next.jsは自動的にルートにロケールをプレフィックスとして付けます。たとえば、/aboutにページがあり、ロケールが'es'（スペイン語）の場合、URLは/es/aboutになります。これにより、ページの異なる言語バージョンが可能になり、検索エンジンが各ロケールのコンテンツをインデックスできるようになります。フレームワークがリダイレクトとルーティングを処理します。

3. useRouterフックの活用

next/routerのuseRouterフックは、現在のロケールやその他のルーティング情報へのアクセスを提供します。


import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    

      
現在のロケール: {locale}

      
利用可能なロケール: {locales.join(', ')}

      
デフォルトのロケール: {defaultLocale}

    

  );
}

export default MyComponent;

routerオブジェクトは以下の主要なプロパティを提供します：

コンテンツ翻訳戦略

Next.jsアプリケーションをi18n用に設定したら、コンテンツを翻訳するための戦略を実装する必要があります。以下にいくつかの人気のあるアプローチを紹介します：

1. 専用の翻訳管理システム（TMS）の使用

多くの言語を持つ大規模なプロジェクトでは、TMSの使用を強くお勧めします。人気のあるオプションには以下があります：

利点：

2. JSON翻訳ファイルの作成

小規模なプロジェクトでは、JSONファイルを使用して翻訳を保存するのは、シンプルで効果的な方法です。

ディレクトリ構造の例：


/src
├── locales
│   ├── en.json
│   └── es.json
├── components
│   └── MyComponent.js
└── pages
    └── index.js

en.jsonの例：


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

es.jsonの例：


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

MyComponent.jsの例：


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';

function MyComponent() {
  const { locale } = useRouter();
  const t = locale === 'es' ? es : en;

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

このアプローチは柔軟性があり、小規模なプロジェクトには簡単です。一般的に更新と保守が容易です。

3. 翻訳ライブラリの使用

いくつかのJavaScriptライブラリは、Reactコンポーネント内でのコンテンツ翻訳を効率化します。

next-i18nextでの例（インストール：npm install next-i18next i18next react-i18next）：

i18n設定ファイルを作成します（例：ルートディレクトリにi18n.js）：


// i18n.js
import { createServerSideHelpers } from 'next-i18next'
import { i18n } from './next-i18next.config'

export function initI18next(req, res, namespaces = ['common']) {
  const helpers = createServerSideHelpers(
    req, 
    res, 
    i18n, 
    namespaces
  )

  return helpers
}

export { appWithTranslation } from 'next-i18next'
export { i18n }

next-i18next用のNext.js設定を作成します。


// next-i18next.config.js
const { i18n } = require('./next-i18next.config');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'],
  },
  // other configuration
}

module.exports = nextConfig

設定と翻訳のインポートを_app.jsに追加します：


import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);

フォルダを作成し、翻訳用のロケールを配置します。


/public
└── locales
    ├── en
    │   └── common.json
    ├── es
    │   └── common.json
    └── fr
        └── common.json

en/common.jsonの例：


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

コンポーネントで翻訳を使用する：


import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

この例では、useTranslationフックを使用して現在のロケールに基づいて翻訳を取得します。

動的ルートと静的サイト生成（SSG）の処理

動的ルート（例：ブログ投稿、商品ページ）や静的サイト生成（SSG）を扱う場合、国際化はより複雑になります。

1. 動的ルート（例：/blog/[slug]）

動的ルートの場合、ビルド時にgetStaticPathsを使用して各ロケールの正しいパスを生成する必要があります。この関数は、Next.jsが事前レンダリングすべきパスの配列を返します。


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // ブログ投稿データを取得

  posts.forEach(post => {
    locales.forEach(locale => {
      paths.push({
        params: {
          slug: post.slug,
        },
        locale,
      });
    });
  });

  return {
    paths,
    fallback: false, // またはローディング状態を表示したい場合は 'blocking'
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

説明：

2. getStaticPropsによる静的サイト生成（SSG）

getStaticPropsでは、localeパラメータに基づいて翻訳済みコンテンツを取得できます。


export async function getStaticProps({ params, locale }) {
  // ロケールとパラメータに基づいてコンテンツを取得
  const { post } = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

getPostBySlug関数は、指定されたスラッグとロケールの翻訳済みコンテンツを取得する必要があり、これは翻訳ファイル、データベース、またはCMSから取得できます。

3. getServerSidePropsによるサーバーサイドレンダリング（SSR）

リクエスト時に取得する必要があるコンテンツには、getServerSidePropsを使用します。これは、コンテンツが頻繁に変更される場合や、各ユーザーに合わせてパーソナライズされる場合に便利です。


export async function getServerSideProps({ params, locale, req, res }) {
  // ロケールとパラメータに基づいてデータを取得（例：データベースから）
  const data = await fetchData(params.slug, locale);

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

Next.js国際化のベストプラクティス

これらのベストプラクティスに従うことで、堅牢で保守可能、かつユーザーフレンドリーな多言語アプリケーションを構築できます：

国際化されたウェブサイトのSEOに関する考慮事項

国際化されたウェブサイトを検索エンジン向けに最適化することは、世界中からのオーガニックトラフィックを促進するために不可欠です。以下は、主要なSEOのベストプラクティスです：

例：シンプルな多言語ブログの構築

Next.jsを使用して、シンプルな多言語ブログの例を作成してみましょう。これにより、上記で説明した概念をどのように適用するかの具体的な例が示されます。

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

新しいNext.jsプロジェクトを作成します：


npx create-next-app my-multi-lang-blog
cd my-multi-lang-blog

2. i18nの設定（next.config.js）


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig

3. 翻訳ファイルの作成

ルートディレクトリにlocalesフォルダを作成し、次のJSONファイルを追加します：

locales/en.json:


{
  "title": "Welcome to My Blog",
  "postTitle": "My First Post",
  "postContent": "This is the content of my first blog post."
}

locales/es.json:


{
  "title": "Bienvenido a mi Blog",
  "postTitle": "Mi Primer Post",
  "postContent": "Este es el contenido de mi primer publicación de blog."
}

locales/fr.json:


{
  "title": "Bienvenue sur Mon Blog",
  "postTitle": "Mon Premier Article",
  "postContent": "Ceci est le contenu de mon premier article de blog."
}

4. ブログ投稿コンポーネントの作成（例：components/BlogPost.js）


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function BlogPost() {
  const router = useRouter();
  const { locale } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

5. インデックスページの作成（pages/index.js）


import { useRouter } from 'next/router';
import BlogPost from '../components/BlogPost';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function HomePage() {
  const router = useRouter();
  const { locale, locales } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.title}

      
      

        {locales.map((l) => (
          
            {l.toUpperCase()}
          
        ))}
      

    

  );
}

export default HomePage;

この簡略化された例は、Next.jsの国際化の基本原則を示しています。この基本的なフレームワークを拡張して、動的ルートや翻訳管理システムとの統合など、より複雑な機能を含めることができます。上記のリンクをLinkコンポーネントで改善し、適切なlocale属性を追加することを検討してください。

6. アプリケーションの実行

次のコマンドでアプリケーションを実行します：


npm run dev

これで、ブログにhttp://localhost:3000（英語）、http://localhost:3000/es（スペイン語）、http://localhost:3000/fr（フランス語）でアクセスできます。選択したロケールに基づいて、タイトルとブログ投稿のコンテンツが翻訳されているはずです。

結論

Next.jsは、ウェブアプリケーションに国際化を実装するための包括的な機能セットを提供します。このガイドで概説した原則と技術に従うことで、世界中のユーザーにローカライズされた体験を提供する多言語アプリケーションを作成できます。i18n戦略を早期に計画し、ニーズに合った翻訳方法を選択し、ユーザーエクスペリエンスを優先することを忘れないでください。慎重な計画と実行により、グローバルなオーディエンスに響くアプリケーションを構築し、成長のための新たな機会を開くことができます。継続的な学習、最新のリリースやベストプラクティスについていくことで、ツールやテクノロジーを効果的に活用していることを保証します。

テクノロジーが進歩するにつれて、より高度なi18n機能が登場することが期待されます。異なる文化や言語グループのユーザーにリーチする能力は、世界中のアプリケーション開発者にとって引き続き重要な優先事項となります。したがって、i18nの基本をマスターすることは、今日のグローバルな開発環境であなたの価値を高める貴重なスキルです。