@intlayer/docs 8.12.4 → 9.0.0-canary.10

package/blog/it/list_i18n_technologies/frameworks/react.md

@@ -16,6 +16,7 @@ slugs:
   - i18n-technologies
   - frameworks
   - react
+author: aymericzip
 ---
 
 # Esplorare soluzioni i18n per tradurre il tuo sito web React

package/blog/it/list_i18n_technologies/frameworks/svelte.md

@@ -16,6 +16,7 @@ slugs:
   - i18n-technologies
   - frameworks
   - svelte
+author: aymericzip
 ---
 
 # Esplorare le soluzioni i18n per tradurre il tuo sito Svelte

package/blog/it/list_i18n_technologies/frameworks/vue.md

@@ -16,6 +16,7 @@ slugs:
   - i18n-technologies
   - frameworks
   - vue
+author: aymericzip
 ---
 
 # Esplorare Soluzioni i18n per Tradurre il tuo Sito Web Vue.js

package/blog/it/next-i18next_vs_next-intl_vs_intlayer.md

@@ -15,6 +15,7 @@ keywords:
 slugs:
   - blog
   - next-i18next-vs-next-intl-vs-intlayer
+author: aymericzip
 ---
 
 # next-i18next VS next-intl VS intlayer | Internazionalizzazione (i18n) in Next.js
@@ -60,14 +61,6 @@ Ci concentriamo su **Next.js 13+ App Router** (con **React Server Components**)
 
 ---
 
-## Confronto delle funzionalità affiancate (focalizzato su Next.js)
-
-| Funzionalità | `next-intlayer` (Intlayer) | `next-intl` | `next-i18next` |
-
-> I badge si aggiornano automaticamente. Gli snapshot varieranno nel tempo.
-
----
-
 ## Confronto delle Funzionalità Affiancate (focalizzato su Next.js)
 
 | Funzionalità                                            | `next-intlayer` (Intlayer)                                                                                                                     | `next-intl`                                                                                                                      | `next-i18next`                                                                                                                   |
@@ -287,34 +280,6 @@ Ecco un esempio dell'impatto dell'ottimizzazione della dimensione del bundle uti
 
 ---
 
-## DX, strumenti e manutenzione
-
-<Columns>
-  <Column>
-
-**next-intl**
-
-- Comunemente abbinato a piattaforme di localizzazione esterne e flussi editoriali.
-
-  </Column>
-  <Column>
-
-**next-i18next**
-
-- Comunemente abbinato a piattaforme di localizzazione esterne e flussi editoriali.
-
-  </Column>
-  <Column>
-
-**intlayer**
-
-- Fornisce un **Editor Visivo gratuito** e un **CMS opzionale** (compatibile con Git o esternalizzato), oltre a un’**estensione VSCode** e **traduzioni assistite da AI** utilizzando le tue chiavi provider.
-
-  </Column>
-</Columns>
-
-**Perché è importante:** Riduce i costi operativi e accorcia il ciclo tra sviluppatori e autori dei contenuti.
-
 ## Integrazione con piattaforme di localizzazione (TMS)
 
 Le grandi organizzazioni spesso si affidano a Sistemi di Gestione delle Traduzioni (TMS) come **Crowdin**, **Phrase**, **Lokalise**, **Localizely** o **Localazy**.
@@ -1181,6 +1146,127 @@ export default robots;
 
 ---
 
+### Middleware per il routing delle lingue
+
+<Tabs defaultTab="next-intl" group='techno'>
+  <Tab label="next-i18next" value="next-i18next">
+
+Aggiungi un middleware per gestire il rilevamento delle lingue e il routing:
+
+```ts fileName="src/middleware.ts"
+import { NextResponse, type NextRequest } from "next/server";
+import { defaultLocale, locales } from "@/i18n.config";
+
+const PUBLIC_FILE = /\.[^/]+$/; // esclude i file con estensioni
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  if (
+    pathname.startsWith("/_next") ||
+    pathname.startsWith("/api") ||
+    pathname.startsWith("/static") ||
+    PUBLIC_FILE.test(pathname)
+  ) {
+    return;
+  }
+
+  const hasLocale = locales.some(
+    (l) => pathname === "/" + l || pathname.startsWith("/" + l + "/")
+  );
+  if (!hasLocale) {
+    const locale = defaultLocale;
+    const url = request.nextUrl.clone();
+    url.pathname = "/" + locale + (pathname === "/" ? "" : pathname);
+    return NextResponse.redirect(url);
+  }
+}
+
+export const config = {
+  matcher: [
+    // Corrisponde a tutti i percorsi tranne quelli che iniziano con questi e i file con un'estensione
+    "/((?!api|_next|static|.*\\..*).*)",
+  ],
+};
+```
+
+  </Tab>
+  <Tab label="next-intl" value="next-intl">
+
+Aggiungi un middleware per gestire il rilevamento delle lingue e il routing:
+
+```ts fileName="src/middleware.ts"
+import createMiddleware from "next-intl/middleware";
+import { locales, defaultLocale } from "@/i18n";
+
+export default createMiddleware({
+  locales: [...locales],
+  defaultLocale,
+  localeDetection: true,
+});
+
+export const config = {
+  // Salta API, Next internals e asset statici
+  matcher: ["/((?!api|_next|.*\\..*).*)"],
+};
+```
+
+  </Tab>
+  <Tab label="intlayer" value="intlayer">
+
+Intlayer fornisce la gestione del middleware integrata attraverso la configurazione del package `next-intlayer`.
+
+```ts fileName="src/middleware.ts"
+import { intlayerProxy } from "next-intlayer/proxy";
+
+export const middleware = intlayerProxy();
+
+// applica questo middleware solo ai file nella directory app
+export const config = {
+  matcher: "/((?!api|_next|static|.*\\..*).*)",
+};
+```
+
+La configurazione del middleware è centralizzata nel file `intlayer.config.ts`.
+
+  </Tab>
+</Tabs>
+
+### Checklist di configurazione e buone pratiche
+
+<Tabs defaultTab="next-intl" group='techno'>
+  <Tab label="next-i18next" value="next-i18next">
+
+- Assicurati che `lang` e `dir` siano impostati su root `<html>` in `src/app/[locale]/layout.tsx`.
+- Dividi le traduzioni in namespace (ad esempio `common.json`, `about.json`) sotto `src/locales/<locale>/`.
+- Carica solo i namespace richiesti nei componenti client utilizzando `useTranslation('<ns>')` e limitando il scope di `I18nProvider` agli stessi namespace.
+- Mantieni le pagine statiche quando possibile: esporta `export const dynamic = 'force-static'` nelle pagine; imposta `dynamicParams = false` e implementa `generateStaticParams`.
+- Utilizza componenti server sincronizzati annidati sotto i confini client passando stringhe già calcolate o la funzione `t` e la `locale`.
+- Per SEO, imposta `alternates.languages` nei metadati, elenca gli URL localizzati in `sitemap.ts` e disabilita le rotte localizzate duplicate in `robots.ts`.
+- Preferisci i formatter consapevoli della locale (ad esempio `Intl.NumberFormat(locale)`) e memoizzali sul client se usi React < 19.
+
+  </Tab>
+  <Tab label="next-intl" value="next-intl">
+
+- **Imposta l'`lang` e il `dir` dell'html**: In `src/app/[locale]/layout.tsx`, calcola `dir` tramite `getLocaleDirection(locale)` e imposta `<html lang={locale} dir={dir}>`.
+- **Dividi i messaggi per namespace**: Organizza il JSON per locale e namespace (ad esempio `common.json`, `about.json`).
+- **Minimizza il payload client**: Nelle pagine, invia solo i namespace richiesti a `NextIntlClientProvider` (ad esempio `pick(messages, ['common', 'about'])`).
+- **Preferisci pagine statiche**: Esporta `export const dynamic = 'force-static'` e genera parametri statici per tutte le `locales`.
+- **Componenti server sincronizzati**: Mantieni i componenti server sincronizzati passando stringhe precalcolate (etichette tradotte, numeri formattati) piuttosto che chiamate asincrone o funzioni non serializzabili.
+
+  </Tab>
+  <Tab label="intlayer" value="intlayer">
+
+- **Contenuto modulare**: Coloca i dizionari di contenuto insieme ai componenti utilizzando file `.content.{ts|js|json}`.
+- **Type safety**: Sfrutta l'integrazione TypeScript per la validazione del contenuto in fase di compilazione.
+- **Ottimizzazione in fase di build**: Utilizza gli strumenti di build di Intlayer per il tree-shaking automatico e l'ottimizzazione del bundle.
+- **Tooling integrato**: Approfitta del routing integrato, degli helper SEO e del supporto dell'editor visuale.
+
+  </Tab>
+</Tabs>
+
+---
+
 ## E il vincitore è…
 
 Non è semplice. Ogni opzione ha dei compromessi. Ecco come la vedo:

package/blog/it/nextjs-multilingual-seo-comparison.md

@@ -16,6 +16,7 @@ keywords:
 slugs:
   - blog
   - blog-seo-i18n-nextjs
+author: aymericzip
 ---
 
 # SEO e i18n in Next.js: Tradurre non basta

package/blog/it/per-component_vs_centralized_i18n.md

@@ -13,6 +13,7 @@ keywords:
 slugs:
   - blog
   - per-component-vs-centralized-i18n
+author: aymericzip
 ---
 
 # i18n per componente vs i18n centralizzato

package/blog/it/rag_powered_documentation_assistant.md

@@ -13,6 +13,7 @@ keywords:
 slugs:
   - blog
   - rag-powered-documentation-assistant
+author: aymericzip
 ---
 
 # Costruire un Assistente alla Documentazione Potenziato da RAG (Chunking, Embeddings e Ricerca)
@@ -56,43 +57,6 @@ Quel ultimo punto è cruciale. Un sistema RAG non si limita a rispondere alle do
 
 Quindi, RAG non è solo uno strumento di supporto. È anche un **motore di scoperta del prodotto**.
 
-## Come funziona la pipeline RAG
-
-![RAG Pipeline](https://github.com/aymericzip/intlayer/blob/main/docs/assets/rag_flow.svg)
-
-Ad alto livello, ecco la ricetta che ho usato:
-
-1.  **Suddivisione della documentazione in chunk** Grandi file Markdown vengono divisi in chunk. La suddivisione permette di fornire come contesto solo le parti rilevanti della documentazione.
-2.  **Generazione degli embeddings** Ogni chunk viene trasformato in un vettore usando l’API di embedding di OpenAI (text-embedding-3-large) o un database vettoriale (Chroma, Qdrant, Pinecone).
-3.  **Indicizzazione e memorizzazione** Gli embeddings vengono memorizzati in un semplice file JSON (per la mia demo), ma in produzione probabilmente useresti un database vettoriale.
-4.  **Recupero (R in RAG)** La query dell’utente viene trasformata in embedding, si calcola la similarità coseno e si recuperano i chunk più pertinenti.
-5.  **Aumento + Generazione (AG in RAG)** Quei chunk vengono inseriti nel prompt per ChatGPT, così il modello risponde con il contesto reale della documentazione.
-6.  **Registrazione delle query per feedback** Ogni query utente viene memorizzata. Questo è prezioso per capire i punti critici, la documentazione mancante o nuove opportunità.
-
-## Passo 1: Lettura della Documentazione
-
-Il primo passo è stato semplice: avevo bisogno di un modo per scansionare una cartella docs/ per tutti i file .md. Usando Node.js e glob, ho recuperato il contenuto di ogni file Markdown in memoria.
-
-Questo mantiene la pipeline flessibile: invece di Markdown, potresti recuperare la documentazione da un database, un CMS o anche un'API.
-
-## Passo 2: Suddividere la Documentazione in Chunk
-
-Perché suddividere in chunk? Perché i modelli linguistici hanno **limiti di contesto**. Fornire loro un intero libro di documentazione non funzionerà.
-
-Quindi l'idea è di spezzare il testo in chunk gestibili (ad esempio 500 token ciascuno) con sovrapposizione (ad esempio 100 token). La sovrapposizione garantisce continuità così da non perdere il significato ai confini dei chunk.
-
-**Esempio:**
-
-- Chunk 1 → “…la vecchia biblioteca che molti avevano dimenticato. Le sue scaffalature imponenti erano piene di libri…”
-- Chunk 2 → “…le scaffalature erano piene di libri di ogni genere immaginabile, ognuno sussurrando storie…”
-
-La sovrapposizione assicura che entrambi i chunk contengano un contesto condiviso, così il recupero rimane coerente.
-
-Questo compromesso (dimensione del chunk vs sovrapposizione) è fondamentale per l’efficienza di RAG:
-
-- Troppo piccolo → si genera rumore.
-- Troppo grande → si satura la dimensione del contesto.
-
 ## Passo 3: Generazione degli Embeddings
 
 Una volta che i documenti sono stati suddivisi in chunk, generiamo gli **embeddings**, vettori ad alta dimensione che rappresentano ogni chunk.
@@ -111,164 +75,6 @@ Ho utilizzato il modello text-embedding-3-large di OpenAI, ma potresti usare qua
 
 Ogni vettore è un’impronta matematica del testo, che permette la ricerca per similarità.
 
-## Passo 4: Indicizzazione e Memorizzazione degli Embeddings
-
-Per evitare di rigenerare gli embeddings più volte, li ho memorizzati in embeddings.json.
-
-In produzione, probabilmente vorresti un database vettoriale come:
-
-- Chroma
-- Qdrant
-- Pinecone
-- FAISS, Weaviate, Milvus, ecc.
-
-I database vettoriali gestiscono indicizzazione, scalabilità e ricerca veloce. Ma per il mio prototipo, un JSON locale ha funzionato bene.
-
-## Passo 5: Recupero con Similarità Coseno
-
-Quando un utente fa una domanda:
-
-1. Genera un embedding per la query.
-2. Confrontalo con tutti gli embedding dei documenti usando la **similarità coseno**.
-3. Conserva solo i primi N chunk più simili.
-
-La similarità coseno misura l'angolo tra due vettori. Una corrispondenza perfetta ottiene un punteggio di **1.0**.
-
-In questo modo, il sistema trova i passaggi del documento più vicini alla query.
-
-## Passo 6: Aggiunta + Generazione
-
-Ora arriva la magia. Prendiamo i chunk migliori e li inseriamo nel **prompt di sistema** per ChatGPT.
-
-Ciò significa che il modello risponde come se quei frammenti facessero parte della conversazione.
-
-Il risultato: risposte accurate e **basate sulla documentazione**.
-
-## Passo 7: Registrazione delle Query degli Utenti
-
-Questa è la superpotenza nascosta.
-
-Ogni domanda posta viene memorizzata. Nel tempo, si costruisce un dataset di:
-
-- Domande più frequenti (ottimo per le FAQ)
-- Domande senza risposta (documentazione mancante o poco chiara)
-- Richieste di funzionalità mascherate da domande (“Si integra con X?”)
-- Casi d’uso emergenti che non avevi previsto
-
-Questo trasforma il tuo assistente RAG in uno **strumento continuo di ricerca utenti**.
-
-## Quanto Costa?
-
-Una comune obiezione al RAG è il costo. In pratica, è sorprendentemente economico:
-
-- Generare embedding per circa 200 documenti richiede circa **5 minuti** e costa **1–2 euro**.
-- La funzione di ricerca nei documenti è completamente gratuita.
-- Per le query, utilizziamo gpt-4o-latest senza la modalità “thinking”. Su Intlayer, registriamo circa **300 query chat al mese**, e la fattura dell’API OpenAI raramente supera i **10$**.
-
-Oltre a questo, puoi includere il costo dell’hosting.
-
-## Dettagli di Implementazione
-
-Stack:
-
-- Monorepo: workspace pnpm
-- Pacchetto Doc: Node.js / TypeScript / OpenAI API
-- Frontend: Next.js / React / Tailwind CSS
-- Backend: route API Node.js / OpenAI API
-
-Il pacchetto `@smart-doc/docs` è un pacchetto TypeScript che gestisce l’elaborazione della documentazione. Quando un file markdown viene aggiunto o modificato, il pacchetto include uno script `build` che ricostruisce la lista della documentazione in ogni lingua, genera gli embeddings e li memorizza in un file `embeddings.json`.
-
-Per il frontend, utilizziamo un’applicazione Next.js che fornisce:
-
-- Rendering da Markdown a HTML
-- Una barra di ricerca per trovare la documentazione rilevante
-- Un'interfaccia chatbot per porre domande sulla documentazione
-
-Per eseguire una ricerca nella documentazione, l'applicazione Next.js include una route API che chiama una funzione nel pacchetto `@smart-doc/docs` per recuperare i frammenti di documentazione corrispondenti alla query. Utilizzando questi frammenti, possiamo restituire una lista di pagine della documentazione rilevanti per la ricerca dell'utente.
-
-Per la funzionalità chatbot, seguiamo lo stesso processo di ricerca ma in aggiunta iniettiamo i frammenti di documentazione recuperati nel prompt inviato a ChatGPT.
-
-Ecco un esempio di prompt inviato a ChatGPT:
-
-Prompt di sistema:
-
-```txt
-Sei un assistente utile che può rispondere a domande sulla documentazione di Intlayer.
-
-Frammenti correlati:
-
------
-docName: "getting-started"
-docChunk: "1/3"
-docUrl: "https://example.com/docs/it/getting-started"
----
-
-# Come iniziare
-
-...
-
------
-docName: "another-doc"
-docChunk: "1/5"
-docUrl: "https://example.com/docs/it/another-doc"
----
-
-# Un altro documento
-
-...
-```
-
-Query utente :
-
-```txt
-Come iniziare?
-```
-
-Usiamo SSE per trasmettere la risposta dalla route API.
-
-Come accennato, utilizziamo gpt-4-turbo senza la modalità "thinking". Le risposte sono pertinenti e la latenza è bassa.
-Abbiamo sperimentato con gpt-5, ma la latenza era troppo alta (a volte fino a 15 secondi per una risposta). Tuttavia, lo rivaluteremo in futuro.
-
-👉 [Prova la demo qui](https://intlayer.org/doc/why) 👉 [Controlla il modello di codice su GitHub](https://github.com/aymericzip/smart_doc_RAG)
-
-## Andare oltre
-
-Questo progetto è una implementazione minima. Ma puoi estenderlo in molti modi:
-
-- Server MCP → la funzione di ricerca nella documentazione verso un server MCP per connettere la documentazione a qualsiasi assistente AI
-
-- Database vettoriali → scalare a milioni di frammenti di documenti
-- LangChain / LlamaIndex → framework pronti all'uso per pipeline RAG
-- Cruscotti di analisi → visualizzare le query degli utenti e i punti critici
-- Recupero multi-sorgente → estrarre non solo documenti, ma anche voci di database, post di blog, ticket, ecc.
-- Prompting migliorato → riordinamento, filtraggio e ricerca ibrida (parola chiave + semantica)
-
-## Limitazioni che abbiamo incontrato
-
-- La suddivisione in frammenti e la sovrapposizione sono empiriche. Il giusto equilibrio (dimensione del frammento, percentuale di sovrapposizione, numero di frammenti recuperati) richiede iterazione e test.
-- Gli embeddings non vengono rigenerati automaticamente quando i documenti cambiano. Il nostro sistema resetta gli embeddings per un file solo se il numero di frammenti differisce da quello memorizzato.
-- In questo prototipo, gli embeddings sono memorizzati in JSON. Questo funziona per le demo ma inquina Git. In produzione, è meglio utilizzare un database o un archivio vettoriale dedicato.
-
-## Perché Questo È Importante Oltre la Documentazione
-
-La parte interessante non è solo il chatbot. È il **ciclo di feedback**.
-
-Con RAG, non ti limiti a rispondere:
-
-- Impari cosa confonde gli utenti.
-- Scopri quali funzionalità si aspettano.
-- Adatti la tua strategia di prodotto basandoti sulle query reali.
-
-**Esempio:**
-
-Immagina di lanciare una nuova funzionalità e vedere immediatamente:
-
-- Il 50% delle domande riguarda lo stesso passaggio di configurazione poco chiaro
-- Gli utenti chiedono ripetutamente un’integrazione che ancora non supporti
-- Le persone cercano termini che rivelano un nuovo caso d’uso
-
-Questa è **intelligenza di prodotto** direttamente dai tuoi utenti.
-
 ## Conclusione
 
 RAG è uno dei modi più semplici e potenti per rendere pratici i LLM. Combinando **recupero + generazione**, puoi trasformare documenti statici in un **assistente intelligente** e, allo stesso tempo, ottenere un flusso continuo di approfondimenti sul prodotto.

package/blog/it/react-i18next_vs_react-intl_vs_intlayer.md

@@ -15,6 +15,7 @@ keywords:
 slugs:
   - blog
   - react-i18next-vs-react-intl-vs-intlayer
+author: aymericzip
 ---
 
 # react-Intl VS react-i18next VS intlayer | Internazionalizzazione (i18n) in React
@@ -140,6 +141,14 @@ Valutiamo:
 
 ---
 
+## Interoperabilità con `react-intl` e `react-i18next`
+
+`intlayer` può aiutarti anche a gestire i tuoi namespace `react-intl` e `react-i18next`.
+
+Utilizzando `intlayer`, puoi dichiarare i tuoi contenuti nel formato della tua libreria i18n preferita, e intlayer genererà i tuoi namespace nella posizione di tua scelta (esempio: `/messages/{{locale}}/{{namespace}}.json`).
+
+---
+
 ## Note pratiche per la migrazione (react-intl / react-i18next → Intlayer)
 
 - **Migra in modo incrementale**: Inizia con una funzionalità o una rotta; mantieni i cataloghi legacy in parallelo durante la transizione.

package/blog/it/vue-i18n_vs_intlayer.md

@@ -15,6 +15,7 @@ keywords:
 slugs:
   - blog
   - vue-i18n-vs-intlayer
+author: aymericzip
 ---
 
 # vue-i18n VS Intlayer | Internazionalizzazione Vue (i18n)
@@ -250,6 +251,14 @@ Questo approccio:
 
 ---
 
+## Interoperabilità con vue-i18n
+
+`intlayer` può anche aiutarti a gestire i tuoi namespace `vue-i18n`.
+
+Utilizzando `intlayer`, puoi dichiarare i tuoi contenuti nel formato della tua libreria i18n preferita, e intlayer genererà i tuoi namespace nella posizione di tua scelta (esempio: `/messages/{{locale}}/{{namespace}}.json`).
+
+---
+
 ## Note pratiche per la migrazione (vue-i18n → Intlayer)
 
 - **Inizia per funzionalità**: Sposta una rotta/vista/componente alla volta nei dizionari locali di Intlayer.

package/blog/it/what_is_internationalization.md

@@ -15,6 +15,7 @@ keywords:
 slugs:
   - blog
   - what-is-internationalization
+author: aymericzip
 ---
 
 # Cos'è l'internazionalizzazione (i18n)? Definizione e sfide

package/blog/ja/compiler_vs_declarative_i18n.md

@@ -16,6 +16,7 @@ keywords:
 slugs:
   - blog
   - compiler-vs-declarative-i18n
+author: aymericzip
 ---
 
 # コンパイラー ベースの i18n に賛成と反対の理由

package/blog/ja/i18n_meaning.md

@@ -14,6 +14,7 @@ keywords:
 slugs:
   - blog
   - i18n-meaning
+author: aymericzip
 ---
 
 # i18nの意味：国際化とは何か、なぜ重要なのか？

package/blog/ja/i18n_using_next-i18next.md

@@ -19,6 +19,7 @@ history:
   - version: 7.0.6
     date: 2025-11-01
     changes: 初版
+author: aymericzip
 ---
 
 # 2025年版 next-i18nextを使ったNext.jsアプリケーションの国際化方法

package/blog/ja/i18n_using_next-intl.md

@@ -18,6 +18,7 @@ history:
   - version: 7.0.0
     date: 2025-11-01
     changes: 初版
+author: aymericzip
 ---
 
 # 2025年版 next-intl を使った Next.js アプリケーションの国際化方法

package/blog/ja/index.md

@@ -13,6 +13,7 @@ keywords:
 slugs:
   - blog
   - search
+author: aymericzip
 ---
 
 # 国際化をJavaScriptで取り入れる：グローバルなリーチとSEOの向上

package/blog/ja/internationalization_and_SEO.md

@@ -14,6 +14,7 @@ keywords:
 slugs:
   - blog
   - SEO-and-i18n
+author: aymericzip
 ---
 
 # SEO & I18n: ウェブサイトを多言語化するための究極ガイド

package/blog/ja/intlayer_with_i18next.md

@@ -27,12 +27,17 @@ history:
   - version: 7.0.0
     date: 2025-10-29
     changes: syncJSONプラグインに変更
+author: aymericzip
 ---
 
 # Intlayerを使ってi18nextのJSON翻訳を自動化する方法
 
 <iframe title="Intlayerを使ってi18nextのJSON翻訳を自動化する方法" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/MpGMxniDHNg?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
+## 目次
+
+<TOC/>
+
 ## Intlayerとは何ですか？
 
 **Intlayer**は、従来のi18nソリューションの欠点を解決するために設計された革新的なオープンソースの国際化ライブラリです。JavaScriptアプリケーションにおけるコンテンツ管理に対して、モダンなアプローチを提供します。
@@ -58,28 +63,46 @@ Intlayerは優れた単独のi18nソリューションを提供します（[Next
 
 ## Intlayerをi18nextとセットアップするステップバイステップガイド
 
-### ステップ1: 依存関係のインストール
+<Steps>
+
+<Step number={1} title="依存関係のインストール">
 
 必要なパッケージをインストールします:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` フラグはオプションです。AI エージェントの場合は `intlayer-cli init` を使用してください。
+
+> このコマンドは環境を検出し、必要なパッケージをインストールします。例えば：
+
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **パッケージの説明:**
@@ -87,7 +110,9 @@ bun x intlayer init
 - **intlayer**: 国際化管理、コンテンツ宣言、およびビルドのためのコアライブラリ
 - **@intlayer/sync-json-plugin**: Intlayerのコンテンツ宣言をi18next互換のJSON形式にエクスポートするプラグイン
 
-### ステップ2: JSONをラップするためのIntlayerプラグインの実装
+</Step>
+
+<Step number={2} title="JSONをラップするためのIntlayerプラグインの実装">
 
 サポートするロケールを定義するためのIntlayer設定ファイルを作成します：
 
@@ -123,6 +148,10 @@ CLI を使って JSON の翻訳を変更した場合や CMS を使った場合
 
 `syncJSON`プラグインの詳細については、[syncJSONプラグインのドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-json.md)を参照してください。
 
+</Step>
+
+</Steps>
+
 ## Git 設定
 
 自動生成された Intlayer ファイルは無視することを推奨します：