コンポーネントごとのi18n

    型安全。AIで翻訳。視覚的に編集。

    開発を加速するために、コンポーネントの横に翻訳を定義します。バンドルを必要なだけ軽量に保ちましょう。エディターをCMSで招待しましょう。すべての貢献が本当に感謝されます。

    npm install intlayer

    利用可能

    // src/component/server/component.content.tsimport { t, type Dictionary } from "intlayer";const componentContent = {  key: "server-component",  content: {    title: t({      en: "Title of my component",      fr: "Titre de mon component",      es: "Título de mi componente",    }),    content:      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",  },} satisfies Dictionary;export default componentContent;
    // src/components/Component.tsxexport const Component = () => {  return (    <div>      <h2>Intlayer Compiler</h2>      <p>        The Intlayer Compiler extracts automatically the content from the        components and generates the dictionary files.      </p>    </div>  );};
    プレイグラウンドを使用して無料で試してみてください。プレイグラウンドに移動
    intlayer test
    $ npx intlayer test
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ~/Desktop/MyApp

    コンテンツ定義をコンポーネントの近くに保つことで、コードの保守性を向上させます。冗長性を減らし、明確性を高め、構造化されたアプローチで更新を簡素化し、コードの管理とスケールを容易にします。

    Intlayer Compilerを使用して、すぐにコンテンツを抽出します。それは自動的に必要な辞書ファイルを生成し、あなたのアプリケーションを一秒で国際化します。

    無料のビジュアルエディターを活用して、簡単にサイトを構築および管理できます。コードに触れることなくコンポーネントやページを作成、編集、整理し、コンテンツ管理者と開発者のコラボレーションを円滑にします。

    組み込みの翻訳サポートを利用してリーチを拡大しましょう。直感的なインターフェースを使ってコンテンツを簡単に翻訳し、複数のコンテンツバージョンを手動で管理することなく、ユーザーにシームレスな多言語体験を提供します。

    Intlayer CLI を使って、AI でコンテンツをテストし自動補完し、すべての翻訳が完全かつ正確であることを保証します。

    Intlayerを選ぶ理由は?

    無料でオープンソース

    Intlayerは無料でオープンソースであり、無料で使用し、ニーズに合わせて貢献することができます。

    JavaScriptによるコンテンツ管理

    JavaScriptの柔軟性を活用して、コンテンツを効率的に定義し管理できます。

    タイプセーフ環境

    TypeScriptを活用して、すべてのコンテンツ定義が正確でエラーがないことを保証します。

    コンポーネントレベルでの宣言

    翻訳をそれぞれのコンポーネントの近くに保ち、保守性と明瞭性を高めます。

    簡素化されたセットアップ

    最小限の設定で迅速に立ち上がり、特にNext.jsプロジェクトに最適化されています。

    統合CMS

    ウェブサイト上で直接統合CMSを使用して、コンテンツを編集します。AIを活用してコンテンツ生成を強化します。

    テクノロジー

    動的な JSON 読み込み

    実行時に翻訳を遅延読み込みします

    スコープ付き JSON (ネームスペース)

    ページごとの翻訳ネームスペース

    I18n パフォーマンス ベンチマーク

    データなし

    この指標は何ですか?

    国際化ライブラリバンドルの合計gzip圧縮サイズ。これには、ツリーシェイキングと縮小化(minification)後のプロバイダーとコンテンツ取得ロジックのみが含まれます。

    なぜ重要なのか?

    ライブラリのサイズが小さければ初期 JavaScript ペイロードが削減され、クライアント側でのダウンロードと実行が高速化されます।

    表示形式

    ウェブサイトのグローバルなローカリゼーションスコアを分析します

    ウェブサイトのローカリゼーション品質を迅速かつ無料で評価します。ウェブサイトの主要な多言語要素を分析して、包括的なスコアとリーチを改善するための実用的な洞察を得ましょう。

    コードベースのi18n

    リポジトリに存在する型安全な翻訳。

    TypeScriptまたはJavaScriptでコンポーネントと一緒にコンテンツを宣言します。Intlayerは型を自動的に生成し、オートコンプリート、検証、即時フィードバックを提供します。キーの欠落やコンテキスト切り替えはもうありません。

    AI CLI Tool

    ターミナルから翻訳を自動化。

    AIでJSONとMarkdownを監査、補完、翻訳するためのCLI。

    `npx intlayer fill`を実行して不足しているキーを検出し、OpenAI、Claude、またはローカルモデルを使用して翻訳を生成します。Git履歴をきれいに保ち、型安全性を維持します。

    Intlayer TMS

    単語ごとの支払いをやめましょう。AIで自動化します。

    CrowdinとLokaliseのオープンソース代替品。モダンな開発者ワークフロー向けに構築。

    コード内またはビジュアルエディターで翻訳を直接管理。AIを活用して即座に翻訳。座席制限なしでチームと協力。

    ヘッドレスCMS

    ローカルコードとリモートコンテンツをブリッジ。

    オーバーヘッドなしで多言語コンテンツを管理。Intlayerはローカル辞書とリモート管理を相互接続し、再構築なしでホットアップデート可能なLive Syncを実現します。CI/CD用のWebhookや機能フラグ管理も可能です。

    機能フラグ

    機能を即座に切り替え。デプロイ不要。

    Intlayer辞書は単なるテキスト以上のものです。ロジック、スタイル、構成オブジェクトを宣言するために使用します。Live Syncを使用すると、CMSから直接リアルタイムで機能のオン/オフ、UIテーマの変更、アプリの動作更新が可能です。

    A/Bテスト

    プロダクト実験のためのプレイグラウンド。

    Intlayerの新しいAI搭載A/Bテストベータを最初に体験してください。発見可能性を高め、よりスマートな製品決定を導くために構築されました。コピーやデザインから機能全体まで、リアルタイムで何でもテストし、データに本当に効果的なものを示してもらいましょう。

    利用可能

    ライブデモを試す

    コミュニティによって構築

    Intlayerを可能にする素晴らしい貢献者に会おう

    よくある質問

    国際化(i18n)とは何ですか?

    国際化(i18n)とは、Next.js、React、またはExpressなどのアプリケーションを設計し、開発して、複数の言語に簡単に対応するプロセスです。翻訳プロセスを簡素化することで、多言語ウェブサイトを作成することができます。TypeScriptのようなツールを使用すると、i18nの実装が容易になり、アプリケーションをさまざまな言語や地域に効率的かつ簡単に適応させることができます。i18nについてもっと読む

    Intlayerの主な機能は何ですか?

    Intlayerは構成管理を簡素化し、サーバーコンポーネントを含むさまざまなタイプのJavaScriptアプリケーションの国際化を可能にします。コンポーネントと同じ場所でコンテンツの宣言を行うことができ、コードベースの保守性が向上します。さらに、IntlayerはTypeScriptを活用して宣言の欠落を防ぎます。最後に、Intlayerはビジュアルエディターを提供し、非開発者がWebサイトのコンテンツを編集し、AIを使用して自動翻訳し、アプリケーションのSEOを最適化できるようにします。Intlayerの機能についてもっと読む

    Intlayerにはビジュアルエディターはありますか?

    はい、Intlayerには、コードを掘り下げずにコンテンツを簡単に管理するためのオプションのビジュアルエディターがあります。ビジュアルエディターについてもっと読む

    Intlayerを使用するのにかかる費用はいくらですか?

    Intlayerは、無料のNPMパッケージのセレクションとビジュアルエディタを統合しています。さらに、コンテンツを外部化するためのCMSを提供します。このCMSは無料で使用できますが、PremiumおよびEnterpriseプランのメンバーには追加機能が含まれています。Intlayerのプランについてもっと読む

    既存のソリューションの上にIntlayerを統合できますか?

    はい、Intlayerはi18next、next-intl、vue-i18nextなどのラッパーとして統合できます。これにより、翻訳を自動化し、既存のコードをリファクタリングすることなくIntlayerを使用できます。

    Intlayerとは何ですか?

    Intlayerは、あなたの多言語ウェブサイトを管理するためのパッケージです。多言語コンテンツおよびローカリゼーションのためにウェブサイトを簡単に設定するためのツールとユーティリティのセットを提供します。Intlayerについてもっと読む

    IntlayerはNext.jsとどのように統合されますか?

    Intlayerは、サーバーサイドレンダリングと静的サイト生成を可能にするためにNext.jsと統合されており、マルチリンガルコンテンツの配信をより効率的にします。Next.jsの統合についてもっと読む

    Intlayerにどう貢献できますか?

    プルリクエストを送信するか、GitHubリポジトリで問題を報告することで貢献できます。貢献する方法についてもっと読む

    Intlayerはどのプラットフォームをサポートしていますか?

    Intlayerは、React(Create React Appを含む)、Reactを使用したVite、Next.js、Tanstack Start、Vue、Nuxt、Express、NestJS、Preactなどで利用できます。これにより、最新のJavaScriptフレームワークやサーバーサイド環境とのシームレスな統合が保証されます。サポートされているプラットフォームについてもっと読む
    すべてのよくある質問を読む