@intlayer/docs 6.1.5 → 6.1.6-canary.0

package/docs/tr/component_i18n.md

@@ -0,0 +1,186 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: React ve Next.js'te bir bileşeni çok dilli (i18n kütüphanesi) yapma
+description: Intlayer ile çok dilli bir React veya Next.js bileşeni oluşturmak için yerelleştirilmiş içeriğin nasıl beyan edileceğini ve alınacağını öğrenin.
+keywords:
+  - i18n
+  - bileşen
+  - react
+  - çok dilli
+  - next.js
+  - intlayer
+slugs:
+  - doc
+  - component
+  - i18n
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+---
+
+# Intlayer ile bir bileşeni çok dilli (i18n) nasıl yaparsınız
+
+Bu rehber, iki yaygın kurulumda bir UI bileşenini çok dilli yapmak için gereken asgari adımları gösterir:
+
+- React (Vite/SPA)
+- Next.js (App Router)
+
+Öncelikle içeriğinizi beyan edecek, ardından bileşeninizde içeriği alacaksınız.
+
+## 1) İçeriğinizi beyan edin (React ve Next.js için ortak)
+
+Bileşeninizin yakınında bir içerik beyan dosyası oluşturun. Bu, çevirileri kullanıldıkları yere yakın tutar ve tür güvenliğini sağlar.
+
+```ts fileName="component.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Hello",
+      fr: "Bonjour",
+      es: "Hola",
+    }),
+    description: t({
+      en: "A multilingual React component",
+      fr: "Un composant React multilingue",
+      es: "Un componente React multilingüe",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentContent;
+```
+
+Yapılandırma dosyalarını tercih ediyorsanız JSON da desteklenmektedir.
+
+```json fileName="component.content.json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "component-example",
+  "content": {
+    "title": {
+      "nodeType": "translation",
+      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }
+    },
+    "description": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "A multilingual React component",
+        "fr": "Un composant React multilingue",
+        "es": "Un componente React multilingüe"
+      }
+    }
+  }
+}
+```
+
+## 2) İçeriğinizi alın
+
+### Durum A — React uygulaması (Vite/SPA)
+
+Varsayılan yaklaşım: Anahtarla almak için `useIntlayer` kullanın. Bu, bileşenleri hafif ve tipli tutar.
+
+```tsx fileName="ComponentExample.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export function ComponentExample() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+Sunucu tarafı render veya sağlayıcı dışında: `react-intlayer/server` kullanın ve gerektiğinde açık bir `locale` parametresi geçin.
+
+```tsx fileName="ServerRenderedExample.tsx"
+import { useIntlayer } from "react-intlayer/server";
+
+export function ServerRenderedExample({ locale }: { locale: string }) {
+  const content = useIntlayer("component-example", locale);
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+Alternatif: Çağrı noktasında yapıyı yan yana koymayı tercih ederseniz, `useDictionary` tüm tanımlı nesneyi okuyabilir.
+
+```tsx fileName="ComponentWithDictionary.tsx"
+import { useDictionary } from "react-intlayer";
+import componentContent from "./component.content";
+
+export function ComponentWithDictionary() {
+  const { title, description } = useDictionary(componentContent);
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
+```
+
+### Durum B — Next.js (App Router)
+
+Veri güvenliği ve performans için sunucu bileşenlerini tercih edin. Sunucu dosyalarında `next-intlayer/server` içinden `useIntlayer` kullanın, istemci bileşenlerinde ise `next-intlayer` içinden `useIntlayer` kullanın.
+
+```tsx fileName="app/[locale]/example/ServerComponent.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+export default function ServerComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+```tsx fileName="app/[locale]/example/ClientComponent.tsx"
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+export function ClientComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+İpucu: Sayfa meta verileri ve SEO için, içeriği `getIntlayer` kullanarak da alabilir ve çok dilli URL’leri `getMultilingualUrls` ile oluşturabilirsiniz.
+
+## Neden Intlayer’ın bileşen yaklaşımı en iyisidir
+
+- **Birlikte konumlandırma**: İçerik beyanları bileşenlerin yakınında bulunur, sürüklenmeyi azaltır ve tasarım sistemleri arasında yeniden kullanımı artırır.
+- **Tip güvenliği**: Anahtarlar ve yapılar güçlü şekilde tiplenmiştir; eksik çeviriler çalışma zamanında değil, derleme zamanında ortaya çıkar.
+- **Sunucu-öncelikli**: Daha iyi güvenlik ve performans için sunucu bileşenlerinde doğal olarak çalışır; istemci kancaları ergonomik kalır.
+- **Ağaç sarsma (Tree-shaking)**: Sadece bileşen tarafından kullanılan içerik paketlenir, böylece büyük uygulamalarda yükler küçük tutulur.
+- **Geliştirici Deneyimi (DX) ve araçlar**: Dahili ara katman yazılımı, SEO yardımcıları ve isteğe bağlı Görsel Editör/Yapay Zeka çevirileri günlük işleri kolaylaştırır.
+
+Next.js odaklı karşılaştırmalar ve kalıplar için bakınız: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+## İlgili rehberler ve referanslar
+
+- React kurulumu (Vite): https://intlayer.org/doc/environment/vite-and-react
+- React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
+- TanStack Başlangıç: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
+- Next.js kurulumu: https://intlayer.org/doc/environment/nextjs
+- Neden Intlayer vs. next-intl vs. next-i18next: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+Bu sayfalar uçtan uca kurulum, sağlayıcılar, yönlendirme ve SEO yardımcılarını içerir.

package/docs/tr/vs_code_extension.md

@@ -1,10 +1,10 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
-title: Resmi VS Code Uzantısı
-description: Geliştirme iş akışınızı geliştirmek için VS Code'da Intlayer uzantısını nasıl kullanacağınızı öğrenin. Yerelleştirilmiş içerikler arasında hızlıca gezin ve sözlüklerinizi verimli bir şekilde yönetin.
+updatedAt: 2025-09-30
+title: Resmi VS Code Eklentisi
+description: Geliştirme iş akışınızı geliştirmek için VS Code'da Intlayer eklentisinin nasıl kullanılacağını öğrenin. Yerelleştirilmiş içerikler arasında hızlıca gezin ve sözlüklerinizi verimli bir şekilde yönetin.
 keywords:
-  - VS Code Uzantısı
+  - VS Code Eklentisi
   - Intlayer
   - Yerelleştirme
   - Geliştirme Araçları
@@ -17,105 +17,49 @@ slugs:
   - vs-code-extension
 ---
 
-# Resmi VS Code Uzantısı
+# Resmi VS Code Eklentisi
 
 ## Genel Bakış
 
-[**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension), projelerinizde yerelleştirilmiş içeriklerle çalışırken geliştirici deneyimini iyileştirmek için tasarlanmış **Intlayer**'ın resmi Visual Studio Code uzantısıdır.
+[**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension), projelerinizde yerelleştirilmiş içeriklerle çalışırken geliştirici deneyimini iyileştirmek için tasarlanmış **Intlayer**'ın resmi Visual Studio Code eklentisidir.
 
-![Intlayer VS Code Uzantısı](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![Intlayer VS Code Eklentisi](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
-Uzantı bağlantısı: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
+Eklenti bağlantısı: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## Özellikler
 
-### Anında Gezinme
+![Sözlükleri doldur](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-**Tanıma Git Desteği** – `useIntlayer` anahtarında `⌘ + Tıklama` (Mac) veya `Ctrl + Tıklama` (Windows/Linux) kullanarak ilgili içerik dosyasını anında açın.  
-**Sorunsuz Entegrasyon** – **react-intlayer** ve **next-intlayer** projeleriyle sorunsuz çalışır.  
-**Çok Dilli Destek** – Farklı dillerde yerelleştirilmiş içerikleri destekler.  
-**VS Code Entegrasyonu** – VS Code’un gezinme ve komut paleti ile sorunsuz entegre olur.
+- **Anında Gezinme** – `useIntlayer` anahtarına tıkladığınızda doğru içerik dosyasına hızlıca atlayın.
+- **Sözlükleri Doldur** – Projenizden içeriklerle sözlükleri doldurun.
 
-### Sözlük Yönetim Komutları
+![Komutları listele](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-İçerik sözlüklerinizi doğrudan VS Code’dan yönetin:
+- **Intlayer Komutlarına Kolay Erişim** – İçerik sözlüklerini kolayca oluşturun, gönderin, çekin, doldurun ve test edin.
 
-- **Sözlükleri Oluştur** – Proje yapınıza göre içerik dosyaları oluşturur.
-- **Sözlükleri Gönder** – En son sözlük içeriğini deponuza yükler.
-- **Sözlükleri Çek** – En son sözlük içeriğini deponuzdan yerel ortamınıza senkronize eder.
-- **Sözlükleri Doldur** – Sözlükleri projenizden içerik ile doldurur.
-- **Sözlükleri Test Et** – Eksik veya tamamlanmamış çevirileri tespit eder.
+![İçerik dosyası oluştur](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-### İçerik Beyanı Oluşturucu
+- **İçerik Beyanı Oluşturucu** – Sözlük içerik dosyalarını çeşitli formatlarda oluşturun (`.ts`, `.esm`, `.cjs`, `.json`).
 
-Farklı formatlarda yapılandırılmış sözlük dosyalarını kolayca oluşturun:
+![Sözlükleri test et](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-Eğer şu anda bir bileşen üzerinde çalışıyorsanız, sizin için `.content.{ts,tsx,js,jsx,mjs,cjs,json}` dosyasını oluşturacaktır.
+- **Sözlükleri Test Et** – Eksik çeviriler için sözlükleri test edin.
 
-Bileşen örneği:
+![Sözlüğü yeniden oluştur](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
 
-```tsx fileName="src/components/MyComponent/index.tsx"
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("my-component");
+- **Sözlüklerinizi güncel tutun** – Projenizden en son içeriklerle sözlüklerinizi güncel tutun.
 
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-TypeScript formatında oluşturulan dosya:
-
-```tsx fileName="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const componentContent = {
-  key: "my-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-
-export default componentContent;
-```
-
-Mevcut formatlar:
-
-- **TypeScript (`.ts`)**
-- **ES Modülü (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
-
-### Intlayer Sekmesi (Aktivite Çubuğu)
+![Intlayer Sekmesi (Aktivite Çubuğu)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-VS Code Aktivite Çubuğundaki Intlayer simgesine tıklayarak Intlayer sekmesini açın. Bu sekme iki görünüm içerir:
-
-- **Arama**: Sözlükleri ve içeriklerini hızlıca filtrelemek için canlı bir arama çubuğu. Yazdıkça sonuçlar anında güncellenir.
-- **Sözlükler**: Ortamlarınız/projeleriniz, sözlük anahtarları ve giriş sağlayan dosyaların ağaç görünümü. Şunları yapabilirsiniz:
-  - Bir dosyaya tıklayarak düzenleyicide açabilirsiniz.
-  - Araç çubuğunu kullanarak şu işlemleri yapabilirsiniz: Derle (Build), Çek (Pull), Gönder (Push), Doldur (Fill), Yenile (Refresh), Test Et (Test) ve Sözlük Dosyası Oluştur (Create Dictionary File).
-  - Öğeye özel işlemler için bağlam menüsünü kullanabilirsiniz:
-    - Bir sözlük üzerinde: Çek (Pull) veya Gönder (Push)
-    - Bir dosya üzerinde: Sözlüğü Doldur (Fill Dictionary)
-  - Düzenleyiciler arasında geçiş yaptığınızda, dosya bir sözlüğe aitse ağaç görünümü ilgili dosyayı gösterecektir.
-
-## Kurulum
-
-**Intlayer**'ı doğrudan VS Code Marketplace'ten yükleyebilirsiniz:
-
-1. **VS Code**'u açın.
-2. **Extensions Marketplace**'e gidin.
-3. **"Intlayer"** için arama yapın.
-4. **Install** (Yükle) butonuna tıklayın.
+- **Intlayer Sekmesi (Aktivite Çubuğu)** – Araç çubuğu ve bağlam eylemleri (Oluştur, Çek, Gönder, Doldur, Yenile, Test Et, Dosya Oluştur) ile özel bir yan sekmeden sözlükleri göz atın ve arayın.
 
 ## Kullanım
 
-### Hızlı Gezinme
+### Hızlı Navigasyon
 
 1. **react-intlayer** kullanan bir projeyi açın.
-2. `useIntlayer()` çağrısını bulun, örneğin:
+2. Şu gibi bir `useIntlayer()` çağrısı bulun:
 
    ```tsx
    const content = useIntlayer("app");
@@ -124,60 +68,55 @@ VS Code Aktivite Çubuğundaki Intlayer simgesine tıklayarak Intlayer sekmesini
 3. Anahtar üzerinde **Command-click** (`⌘+Click` macOS'ta) veya **Ctrl+Click** (Windows/Linux'ta) yapın (örneğin, `"app"`).
 4. VS Code otomatik olarak ilgili sözlük dosyasını açacaktır, örneğin `src/app.content.ts`.
 
-### İçerik Sözlüklerini Yönetme
-
-### Intlayer Sekmesi (Activity Bar)
+### Intlayer Sekmesi (Aktivite Çubuğu)
 
-Sözlükleri gözden geçirmek ve yönetmek için yan sekmeyi kullanın:
+Yan sekmeyi kullanarak sözlüklerde gezinin ve yönetin:
 
-- Activity Bar'daki Intlayer simgesini açın.
+- Aktivite Çubuğunda Intlayer simgesini açın.
 - **Arama** bölümünde, sözlükleri ve girdileri gerçek zamanlı olarak filtrelemek için yazın.
-- **Sözlükler** bölümünde, ortamları, sözlükleri ve dosyaları gezinin. Araç çubuğunu Kullanarak Oluştur, Çek, Gönder, Doldur, Yenile, Test Et ve Sözlük Dosyası Oluştur işlemlerini yapabilirsiniz. Bağlam menüsü için sağ tıklayın (sözlüklerde Çek/Gönder, dosyalarda Doldur). Geçerli düzenleyici dosyası, uygun olduğunda ağaçta otomatik olarak gösterilir.
+- **Sözlükler** bölümünde, ortamları, sözlükleri ve dosyaları göz atın. Araç çubuğunu kullanarak Oluştur, Çek, Gönder, Doldur, Yenile, Test Et ve Sözlük Dosyası Oluştur işlemlerini yapabilirsiniz. Bağlam eylemleri için sağ tıklayın (sözlüklerde Çek/Gönder, dosyalarda Doldur). Geçerli düzenleyici dosyası uygun olduğunda ağaçta otomatik olarak gösterilir.
 
-#### Sözlükleri Oluşturma
+### Komutlara Erişim
 
-Tüm sözlük içerik dosyalarını oluşturmak için:
+Komutlara **Komut Paleti** üzerinden erişebilirsiniz.
 
 ```sh
 Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
 ```
 
-**Sözlükleri Oluştur** komutunu arayın ve çalıştırın.
-
-#### Sözlükleri Gönderme
-
-En son sözlük içeriğini yüklemek için:
-
-1. **Komut Paletini** açın.
-2. **Sözlükleri Gönder** araması yapın.
-3. Göndermek istediğiniz sözlükleri seçin ve onaylayın.
-
-#### Sözlükleri Çekme
+- **Sözlükleri Oluştur**
+- **Sözlükleri Gönder**
+- **Sözlükleri Çek**
+- **Sözlükleri Doldur**
+- **Sözlükleri Test Et**
+- **Sözlük Dosyası Oluştur**
 
-En son sözlük içeriğini senkronize edin:
+### Ortam Değişkenlerini Yükleme
 
-1. **Komut Paletini** açın.
-2. **Sözlükleri Çek** araması yapın.
-3. Çekmek istediğiniz sözlükleri seçin.
+Intlayer, AI API anahtarlarınızı ve ayrıca Intlayer istemci kimliği ile gizli anahtarınızı ortam değişkenlerinde saklamanızı önerir.
 
-#### Sözlükleri Doldurma
+Eklenti, Intlayer komutlarını doğru bağlamda çalıştırmak için çalışma alanınızdan ortam değişkenlerini yükleyebilir.
 
-Sözlükleri projenizden gelen içerikle doldurun:
+- **Yükleme sırası (öncelik sırasına göre)**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **Yıkıcı olmayan**: mevcut `process.env` değerleri üzerine yazılmaz.
+- **Kapsam**: dosyalar, yapılandırılmış temel dizinden çözülür (varsayılan olarak çalışma alanı kökü).
 
-1. **Komut Paletini** açın.
-2. **Sözlükleri Doldur** araması yapın.
-3. Sözlükleri doldurmak için komutu çalıştırın.
+#### Aktif ortamı seçme
 
-#### Sözlükleri Test Etme
+- **Komut Paleti**: paleti açın ve `Intlayer: Select Environment` komutunu çalıştırın, ardından ortamı seçin (örneğin, `development`, `staging`, `production`). Eklenti, yukarıdaki öncelik listesinde bulunan ilk uygun dosyayı yüklemeye çalışacak ve “.env.<env>.local dosyasından ortam yüklendi” gibi bir bildirim gösterecektir.
+- **Ayarlar**: `Ayarlar → Eklentiler → Intlayer` yolunu izleyin ve şunları ayarlayın:
+  - **Ortam**: `.env.<env>*` dosyalarını çözümlemek için kullanılan ortam adı.
+  - (İsteğe bağlı) **Env Dosyası**: açıkça belirtilmiş bir `.env` dosyası yolu. Sağlandığında, çıkarılan listedeki dosyalardan öncelikli olarak kullanılır.
 
-Sözlükleri doğrulayın ve eksik çevirileri bulun:
+#### Monorepo ve özel dizinler
 
-1. **Komut Paletini** açın.
-2. **Sözlükleri Test Et** araması yapın.
-3. Raporlanan sorunları inceleyin ve gerektiği şekilde düzeltin.
+Eğer `.env` dosyalarınız çalışma alanı kökünün dışında bulunuyorsa, `Ayarlar → Eklentiler → Intlayer` yolunda **Temel Dizin**i ayarlayın. Yükleyici, `.env` dosyalarını bu dizine göre arayacaktır.
 
 ## Doküman Geçmişi
 
-| Sürüm  | Tarih      | Değişiklikler     |
-| ------ | ---------- | ----------------- |
-| 5.5.10 | 2025-06-29 | Geçmiş başlatıldı |
+| Sürüm  | Tarih      | Değişiklikler                              |
+| ------ | ---------- | ------------------------------------------ |
+| 6.1.5  | 2025-09-30 | Demo gif eklendi                           |
+| 6.1.0  | 2025-09-24 | Ortam seçimi bölümü eklendi                |
+| 6.0.0  | 2025-09-22 | Intlayer Sekmesi / Doldur & Test komutları |
+| 5.5.10 | 2025-06-29 | Başlangıç geçmişi                          |

package/docs/zh/component_i18n.md

@@ -0,0 +1,186 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: 在 React 和 Next.js 中制作多语言（i18n）组件
+description: 学习如何声明和获取本地化内容，以使用 Intlayer 构建多语言 React 或 Next.js 组件。
+keywords:
+  - i18n
+  - 组件
+  - react
+  - 多语言
+  - next.js
+  - intlayer
+slugs:
+  - doc
+  - component
+  - i18n
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+---
+
+# 如何使用 Intlayer 制作多语言（i18n）组件
+
+本指南展示了在两种常见环境中制作多语言 UI 组件的最简步骤：
+
+- React（Vite/单页应用）
+- Next.js（应用路由）
+
+您将首先声明内容，然后在组件中获取内容。
+
+## 1) 声明您的内容（适用于 React 和 Next.js）
+
+在组件附近创建一个内容声明文件。这可以让翻译内容靠近使用位置，并且支持类型安全。
+
+```ts fileName="component.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Hello",
+      fr: "Bonjour",
+      es: "Hola",
+    }),
+    description: t({
+      en: "A multilingual React component",
+      fr: "Un composant React multilingue",
+      es: "Un componente React multilingüe",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentContent;
+```
+
+如果您更喜欢配置文件，也支持 JSON 格式。
+
+```json fileName="component.content.json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "component-example",
+  "content": {
+    "title": {
+      "nodeType": "translation",
+      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }
+    },
+    "description": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "一个多语言的 React 组件",
+        "fr": "Un composant React multilingue",
+        "es": "Un componente React multilingüe"
+      }
+    }
+  }
+}
+```
+
+## 2) 获取您的内容
+
+### 情况 A — React 应用 (Vite/SPA)
+
+默认方法：使用 `useIntlayer` 通过键来获取内容。这使组件保持简洁且类型安全。
+
+```tsx fileName="ComponentExample.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export function ComponentExample() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+服务器端渲染或在提供者外部使用时：使用 `react-intlayer/server`，并在需要时传入明确的 `locale`。
+
+```tsx fileName="ServerRenderedExample.tsx"
+import { useIntlayer } from "react-intlayer/server";
+
+export function ServerRenderedExample({ locale }: { locale: string }) {
+  const content = useIntlayer("component-example", locale);
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+另一种方式：如果你更喜欢在调用处组织结构，可以使用 `useDictionary` 读取整个声明的对象。
+
+```tsx fileName="ComponentWithDictionary.tsx"
+import { useDictionary } from "react-intlayer";
+import componentContent from "./component.content";
+
+export function ComponentWithDictionary() {
+  const { title, description } = useDictionary(componentContent);
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
+```
+
+### 方案 B — Next.js（App 路由）
+
+优先使用服务器组件以确保数据安全和性能。在服务器文件中使用来自 `next-intlayer/server` 的 `useIntlayer`，在客户端组件中使用来自 `next-intlayer` 的 `useIntlayer`。
+
+```tsx fileName="app/[locale]/example/ServerComponent.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+export default function ServerComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+```tsx fileName="app/[locale]/example/ClientComponent.tsx"
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+export function ClientComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+提示：对于页面元数据和 SEO，您还可以使用 `getIntlayer` 获取内容，并通过 `getMultilingualUrls` 生成多语言 URL。
+
+## 为什么 Intlayer 的组件方法是最佳选择
+
+- **内容共置**：内容声明与组件紧密相邻，减少偏差并提升设计系统中的复用性。
+- **类型安全**：键和值结构均为强类型；缺失的翻译会在构建时而非运行时暴露。
+- **服务器优先**：原生支持服务器组件，提升安全性和性能；客户端钩子依然保持良好的使用体验。
+- **摇树优化**：仅打包组件实际使用的内容，保持大型应用的负载体积小。
+- **开发体验与工具**：内置中间件、SEO助手，以及可选的可视化编辑器/AI翻译，简化日常工作流程。
+
+请参阅针对 Next.js 的对比和模式总结：https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+## 相关指南和参考资料
+
+- React 设置（Vite）：https://intlayer.org/doc/environment/vite-and-react
+- React Router v7：https://intlayer.org/doc/environment/vite-and-react/react-router-v7
+- TanStack 入门：https://intlayer.org/doc/environment/vite-and-react/tanstack-start
+- Next.js 设置：https://intlayer.org/doc/environment/nextjs
+- 为什么选择 Intlayer 而不是 next-intl 或 next-i18next：https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+这些页面包含端到端的设置、提供者、路由和 SEO 辅助工具。