Intlayer Mcp I18n Solution & Cms

コンポーネントごとの i18n

AI を活用した翻訳。ビジュアルエディター。多言語 CMS。

ドキュメント • Next.js • React + Vite • CMS • Discord

Intlayer とは？

ほとんどの i18n ライブラリは、複雑すぎるか、柔軟性に欠けるか、最新のフレームワーク向けに作られていません。

Intlayer は、ウェブアプリやモバイルアプリ向けの最新の i18n ソリューションです。
フレームワークに依存せず、AI を活用し、無料のCMS とビジュアルエディターを備えています。

ロケールごとのコンテンツファイル、TypeScript の自動補完、ツリーシェイク可能なディクショナリ、CI/CD との統合により、Intlayer は国際化をより迅速に、すっきりと、スマートに実現します。

Intlayer の主なメリット：

	フレームワーク間のサポート Intlayer は、Next.js、React、Vite、Vue.js、Nuxt、Preact、Express など、主要なフレームワークやライブラリすべてに対応しています。
	JavaScript を活用したコンテンツ管理 JavaScript の柔軟性を活用し、コンテンツを効率的に定義・管理できます。 - コンテンツの宣言
	ロケールごとのコンテンツ宣言ファイル 自動生成の前にコンテンツを一度宣言するだけで、開発をスピードアップできます。 - ロケールごとのコンテンツ宣言ファイル
	コンパイラー Intlayer コンパイラーはコンポーネントからコンテンツを自動的に抽出し、辞書ファイルを生成します。 - コンパイラー
	型安全な環境 TypeScript を活用して、コンテンツの定義やコードにエラーがないことを保証するとともに、IDE の自動補完も利用できます。 - TypeScript の設定
	セットアップの簡素化 最小限の設定ですぐに使い始められます。国際化、ルーティング、AI、ビルド、コンテンツ処理の設定も簡単に調整できます。 - Next.js との統合を確認する
	コンテンツ取得の簡素化 コンテンツごとに t 関数を呼び出す必要はありません。単一のフックを使って、すべてのコンテンツを直接取得できます。 - React との統合
	一貫性のあるサーバーコンポーネントの実装 Next.js のサーバーコンポーネントに最適です。クライアントコンポーネントとサーバーコンポーネントの両方で同じ実装を使用でき、サーバーコンポーネントごとに t 関数を渡す必要もありません。 - サーバーコンポーネント
	整理されたコードベース コードベースをより整理された状態に保てます。同じフォルダー内で、1 コンポーネントにつき 1 つの辞書を使用します。翻訳をそれぞれのコンポーネントの近くに配置することで、保守性と明瞭さが向上します。 - Intlayer の仕組み
	ルーティングの強化 アプリのルーティングを全面的にサポートし、Next.js、React、Vite、Vue.js などの複雑なアプリケーション構造にもシームレスに対応します。 - Next.js との統合を確認する
	Markdown のサポート プライバシーポリシーやドキュメントなどの多言語コンテンツに、ロケールファイルやリモートの Markdown をインポートして解釈できます。Markdown のメタデータを解釈し、コードからアクセスできるようにします。 - コンテンツファイル
	無料のビジュアルエディターと CMS コンテンツライター向けに無料のビジュアルエディターと CMS を利用できるため、ローカリゼーションプラットフォームは不要です。Git でコンテンツの同期を保つことも、CMS を使ってすべてまたは一部のコンテンツを外部化することもできます。 - Intlayer エディター - Intlayer CMS
	ツリーシェイキング可能なコンテンツ コンテンツをツリーシェイキングして、最終的なバンドルサイズを削減します。コンポーネントごとにコンテンツを読み込み、未使用のコンテンツをバンドルから除外します。遅延読み込みにも対応し、アプリの読み込み効率を高めます。 - アプリのビルド最適化
	静的レンダリング 静的レンダリングを妨げません。 - Next.js との統合
	AI を活用した翻訳 Intlayer の高度な AI 翻訳ツールを使えば、独自の AI プロバイダー／API キーを使用して、ワンクリックでウェブサイトを 231 言語に変換できます。 - CI/CD との統合 - Intlayer CLI - 自動入力
	MCP サーバーとの統合 IDE の自動化を可能にする MCP（Model Context Protocol）サーバーを提供し、開発環境内でコンテンツ管理や i18n ワークフローをシームレスに実行できます。 - MCP サーバー
	VSCode 拡張機能 Intlayer は、コンテンツや翻訳の管理、辞書の構築、コンテンツの翻訳などに役立つ VSCode 拡張機能を提供します。 - VSCode 拡張機能
	相互運用性 react-i18next、next-i18next、next-intl、react-intl、vue-i18n との相互運用が可能です。 - Intlayer と react-intl - Intlayer と next-intl - Intlayer と next-i18next - Intlayer と vue-i18n - Intlayer 互換アダプター
	パフォーマンスとベンチマーク 高度なツリーシェイキングと動的読み込みを活用してパフォーマンスを高め、ソリューションを可能な限り軽量に保ちます。 - パフォーマンスとベンチマーク

📦 インストール

今すぐ Intlayer を使い始めて、よりスムーズで強力な国際化を体験しましょう。

npm install intlayer react-intlayer

⚡ クイックスタート（Next.js）

// intlayer.config.ts
import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

// app/home.content.ts
import { t, type Dictionary } from "intlayer";

const content = {
  key: "home",
  content: {
    title: t({
      en: "Home",
      fr: "Accueil",
      es: "Inicio",
    }),
  },
} satisfies Dictionary;

export default content;

// app/page.tsx
import { useIntlayer } from "react-intlayer";

const HomePage = () => {
  const { title } = useIntlayer("home");

  return <h1>{title}</h1>;
};

完全なガイドはこちら →

🎥 YouTube のライブチュートリアル

目次

Intlayer を使い始め、プロジェクトに統合する方法を学ぶには、包括的なドキュメントをご覧ください。

📘 はじめに

• Intlayer を選ぶ理由
• 概要

⚙️ コンセプト

• Intlayer の仕組み
• 設定
• Intlayer CLI
• コンパイラー
• Intlayer Editor
• Intlayer CMS
• 辞書
  • ロケールごとのコンテンツ宣言ファイル
  • 翻訳
  • 列挙
  • 条件
  • ネスト
  • Markdown
  • 関数による取得
  • 挿入
  • ファイル

🌐 Environment

• Intlayer with Next.js 16
  • Next.js 15
  • Next.js 14 (App Router)
  • Next.js Page Router
  • Next.js using Compiler
• React CRA
• Vite + React
• Vite + React using Compiler
• React-router-v7
• Remix 3
• Tanstack start
  • Solid
• Astro
  • React
  • Vue
  • Svelte
  • Solid
  • Lit
• React Native
• Vite + Svelte
• SvelteKit
• Vite + Preact
• Vite + Vue
• Vite + Nuxt
• Vite + Solid
• Solid Start
• Angular
• Backend
  • Express
  • NestJS
  • Fastify
  • AdonisJS
  • Hono
  • Elysia

📊 ベンチマーク

• Next.js
• TanStack Start
• Vue
• Solid
• Svelte

📰 ブログ

• i18n とは
• i18n と SEO
• Intlayer と i18next
• Intlayer と react-intl
• Intlayer と next-intl

多言語コンテンツ管理システム

Intlayer は単なる i18n ライブラリではなく、完全な多言語コンテンツ管理システムです。app.intlayer.org では、フル機能の CMS を無料で利用できます。

Intlayer は、開発者、コピーライター、AI エージェントを 1 つのワークフローで結び付け、多言語ウェブサイトの作成と保守を簡単にします。Intlayer は、以下のスタックを 1 つのソリューションに置き換えます。

• i18n ソリューション（例：i18next、next-intl、vue-i18n）
• TMS（翻訳管理システム）（例：Crowdin、Phrase、Lokalise）
• フィーチャーフラグ
• ヘッドレス CMS（例：Contentful、Strapi、Sanity）

🌐 他の言語の Readme

English • 简体中文 • Русский • 日本語 • Français • 한국어 • Español • Deutsch • العربية • Italiano • English (UK) • Português • हिन्दी • Türkçe

## 🤝 コミュニティ

Intlayer はコミュニティとともに、コミュニティのために開発されています。ぜひご意見をお寄せください！

• 提案がありますか？Issue を作成
• バグや改善点を見つけましたか？PR を送信
• サポートが必要ですか？または交流したいですか？Discord に参加

以下のSNSでもフォローできます：

貢献

このプロジェクトへの貢献に関する詳しいガイドラインについては、CONTRIBUTING.md ファイルをご覧ください。開発プロセス、コミットメッセージの規則、リリース手順に関する重要な情報が記載されています。皆さまからの貢献は私たちにとって大切です。このプロジェクトをより良くするためのご協力に感謝します！

GitHub、GitLab、または Bitbucket で貢献できます。

ご支援ありがとうございます

Intlayer を気に入っていただけたら、GitHub で ⭐ を付けてください。ほかの人がこのプロジェクトを見つけやすくなります！GitHub のスターが重要な理由を見る