Intlayerの今後のリリースに関する通知を受け取る
    作成:2024-08-11最終更新:2025-06-29

    next-intlayer: Next.jsアプリケーションを国際化(i18n)するためのNPMパッケージ

    IntlayerはJavaScript開発者向けに特化して設計されたパッケージ群です。React、Next.js、Express.jsなどのフレームワークと互換性があります。

    next-intlayerパッケージは、Next.jsアプリケーションを国際化することを可能にします。Next.jsの国際化のためのコンテキストプロバイダーやフックを提供します。さらに、IntlayerをWebpackやTurbopackと統合するためのNext.jsプラグインや、ユーザーの優先ロケールの検出、クッキー管理、URLリダイレクトの処理を行うミドルウェアも含まれています。

    なぜNext.jsアプリケーションを国際化するのか？

    Next.jsアプリケーションを国際化することは、グローバルなユーザーに効果的に対応するために不可欠です。これにより、各ユーザーの好みの言語でコンテンツやメッセージを提供できるようになります。この機能はユーザー体験を向上させ、異なる言語背景を持つ人々にとってアプリケーションをよりアクセスしやすく、関連性の高いものにすることで、アプリケーションのリーチを広げます。

    なぜIntlayerを統合するのか？

    • JavaScriptによるコンテンツ管理: JavaScriptの柔軟性を活かして、効率的にコンテンツを定義・管理できます。
    • 型安全な環境: TypeScriptを活用して、すべてのコンテンツ定義が正確でエラーのないものになるようにします。
    • 統合されたコンテンツファイル: 翻訳をそれぞれのコンポーネントに近い場所に保持し、保守性と明確さを向上させます。

    インストール

    必要なパッケージをお使いのパッケージマネージャーでインストールしてください：

    bash
    npm install next-intlayer

    使用例

    Intlayerを使うと、コードベースのどこでも構造化された方法でコンテンツを宣言できます。

    デフォルトでは、Intlayerは拡張子が .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx} のファイルをスキャンします。

    デフォルトの拡張子は、設定ファイルの contentDir プロパティを設定することで変更できます。

    bash
    .├── intlayer.config.ts└── src    └── components        ├── ClientComponent        │   ├── index.content.ts        │   └── index.tsx        └── ServerComponent            ├── index.content.ts            └── index.tsx

    コンテンツを宣言する

    next-intlayerはintlayerパッケージと連携して動作するように作られています。intlayerはコードのどこでもコンテンツを宣言できるパッケージで、多言語コンテンツの宣言を構造化された辞書に変換し、アプリケーションにシームレスに統合します。

    以下はコンテンツ宣言の例です：

    src/ClientComponent/index.content.ts
    import { t, type Dictionary } from "intlayer";const clientComponentContent = {  key: "client-component",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),    numberOfCar: enu({      "<-1": "Less than minus one car",      "-1": "マイナス1台の車",      "0": "車はありません",      "1": "1台の車",      ">5": "いくつかの車",      ">19": "多くの車",    }),  },} satisfies Dictionary;export default clientComponentContent;

    コード内でコンテンツを利用する

    コンテンツを宣言したら、コード内で使用できます。以下はReactコンポーネントでコンテンツを使用する例です：

    src/components/ClientComponentExample.tsx
    "use client";import type { FC } from "react";import { useIntlayer } from "next-intlayer";export const ClientComponentExample: FC = () => {  const { myTranslatedContent } = useIntlayer("client-component"); // 関連するコンテンツ宣言を作成  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

    Next.jsアプリケーションの国際化を極める

    Intlayerは、Next.jsアプリケーションの国際化を支援する多くの機能を提供します。以下は主な機能の一部です：

    • サーバーコンポーネントの国際化：Intlayerはクライアントコンポーネントと同様にサーバーコンポーネントの国際化を可能にします。つまり、クライアントコンポーネントとサーバーコンポーネントの両方で同じコンテンツ宣言を使用できます。
    • ロケール検出のためのミドルウェア: Intlayerはユーザーの優先ロケールを検出するためのミドルウェアを提供します。このミドルウェアはユーザーの優先ロケールを検出し、設定で指定された適切なURLにリダイレクトします。
    • メタデータの国際化: Intlayerは、Next.jsが提供するgenerateMetadata関数を使用して、ページのタイトルなどのメタデータを国際化する方法を提供します。getTranslation関数を使ってメタデータを翻訳することができます。
    • sitemap.xml と robots.txt の国際化: Intlayer は sitemap.xml と robots.txt ファイルの国際化を可能にします。getMultilingualUrls 関数を使用して、サイトマップ用の多言語 URL を生成できます。
    • URL の国際化: Intlayer は getMultilingualUrls 関数を使用して URL の国際化を可能にします。この関数はサイトマップ用の多言語 URL を生成します。

    これらの機能の詳細については、Next.js Internationalization (i18n) with Intlayer and Next.js 15 App Router ガイドを参照してください。

    next-intlayer パッケージが提供する関数

    next-intlayer パッケージは、アプリケーションの国際化を支援するいくつかの関数も提供しています。

    ドキュメント履歴

    • 5.5.10 - 2025-06-29: 履歴初期化
    始める
    Intlayerの今後のリリースに関する通知を受け取る