mcpField
I
intlayer-next-js

intlayer-next-js

github.com/aymericzip開発539 回インストール4 週間前に更新
リポジトリ

intlayer-next-js について

intlayer-next-jsは、Next.jsプロジェクトでIntlayerを使う開発者向けのガイドスキルです。利用するコンポーネントの近くに辞書を宣言する方針を示し、Server ComponentsとClient Componentsの導入方法を説明します。

主な機能

  1. 01コンポーネント近くで翻訳を宣言
  2. 02t()による辞書定義
  3. 03Server Componentsでの利用方法
  4. 04Client Componentsでの利用方法
  5. 05Next.js 14と15に対応

活用シーン

  1. 01Next.jsコンポーネントの翻訳内容作成
  2. 02サーバーコンポーネントでローカライズ内容を参照
  3. 03クライアントコンポーネントでuseIntlayerを利用
  4. 04Next.jsプロジェクトにIntlayerを設定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/aymericzip/intlayer-skills --skill intlayer-next-js

インストール後、Claude Code で/intlayer-next-jsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENCE.md
references/
environment_nextjs_14.md
environment_nextjs_15.md
environment_nextjs_next-with-page-router.md
environment_nextjs_no-locale-path.md
environment_nextjs.md
packages_intlayer_exports.md
packages_next-intlayer_exports.md
packages_next-intlayer_intlayerMiddleware.md
packages_next-intlayer_t.md
packages_next-intlayer_useDictionary.md
packages_next-intlayer_useIntlayer.md
packages_next-intlayer_useLocale.md

詳細

Intlayer Next.js の使い方

中核となる理念

Intlayer は コンポーネントレベルのコンテンツ宣言を推進します。大規模なグローバル翻訳ファイルを使うのではなく、コンテンツは、それを使用する Next.js コンポーネントの近くにある *.content.ts ファイルで宣言します。

ワークフロー

翻訳されたコンポーネントを作成するには、2 つのファイルが必要です。

  1. 宣言： 辞書を定義するコンテンツファイル（例：myComponent.content.ts）。
  2. 実装： useIntlayer フックを使用する Next.js コンポーネント（サーバーまたはクライアント）。
1. コンテンツを宣言する

翻訳には t() を使用して、コンテンツファイルを作成します。 ファイル： src/components/MyComponent/myComponent.content.ts

import { t, type Dictionary } from "intlayer";

const content = {
  // The 'key' must be unique and matches what you pass to useIntlayer()
  key: "my-component",
  content: {
    text: t({
      en: "Welcome",
      fr: "Bienvenue",
      es: "Hola",
    }),
  },
} satisfies Dictionary;

export default content;

セットアップ

サーバーコンポーネント

サーバーコンポーネントで Intlayer を使用するには、IntlayerServerProvider でロケールを提供し、next-intlayer/server の useIntlayer を使用します。

import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";

const MyServerComponent = () => {
  const content = useIntlayer("my-component");
  return (
    <div>
      <h1>{content.text}</h1>
    </div>
  );
};

const Page = async ({ params }) => {
  const { locale } = await params;
  return (
    <IntlayerServerProvider locale={locale}>
      <MyServerComponent />
    </IntlayerServerProvider>
  );
};

export default Page;

クライアントコンポーネント

クライアントコンポーネントでは、"use client" ディレクティブを追加し、next-intlayer の useIntlayer を使用します。コンポーネントが IntlayerClientProvider でラップされていることを確認してください。

"use client";

import { useIntlayer } from "next-intlayer";

export const MyClientComponent = () => {
  const content = useIntlayer("my-component");

  return (
    <div>
      <h1>{content.text}</h1>
    </div>
  );
};

Next.js パッケージのドキュメント

参考資料

環境
パッケージ

コメント

Markdown 対応