@intlayer/docs 9.4.4 → 9.5.0

package/blog/it/transform_existing_vite_react_app_using_compiler.md

@@ -0,0 +1,358 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2026-09-06
+title: "Come rendere multilingue (i18n) un'applicazione Vite e React esistente a posteriori (Guida i18n 2026)"
+description: "La guida 2026 per rendere multilingue (i18n) un'app Vite e React esistente senza refactoring complessi. Scopri l'estrazione automatica, traduzione AI e bundle ottimizzati con Intlayer."
+keywords:
+  - Vite i18n
+  - React i18n
+  - Internazionalizzazione
+  - Tradurre app Vite esistente
+  - Tradurre app React esistente
+  - Intlayer
+  - Multilingue
+  - Compilatore
+  - Traduzione AI
+  - SEO
+slugs:
+  - blog
+  - transform-existing-react-app-into-multilingual-app
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+applicationShowcase: https://intlayer-vite-react-template.vercel.app
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
+  - version: 8.2.0
+    date: 2026-03-09
+    changes: "Update compiler options, add FilePathPattern support"
+  - version: 8.1.6
+    date: 2026-02-23
+    changes: "Initial release"
+author: aymericzip
+---
+
+# Come rendere multilingue (i18n) un'applicazione Vite e React esistente a posteriori (Guida i18n 2026)
+
+Aggiungere l'internazionalizzazione (i18n) a un progetto Vite e React fin dal primo giorno è relativamente semplice. Ma cosa succede quando hai già un'applicazione matura e in produzione in una sola lingua e devi renderla multilingue **a posteriori**?
+
+Con librerie tradizionali come `react-i18next` o `react-intl`, il processo è spesso estenuante:
+
+- Cercare manualmente stringhe hardcoded in centinaia di file JSX e TSX.
+- Creare file JSON nidificati e inventare chiavi di traduzione arbitrarie (`components.header.title`, ecc.).
+- Sostituire il testo JSX con chiamate a hook (`t('...')`).
+- Ristrutturare il routing lato client, la gestione dello stato e la logica di cambio lingua.
+
+Nel 2026 non devi riscrivere il tuo codice. Con **Intlayer**, puoi integrare l'internazionalizzazione in un'applicazione Vite e React esistente in pochi minuti grazie all'estrazione automatica, alla traduzione con IA e a un'integrazione fluida.
+
+> Cerchi la guida tecnica completa passo-passo per Vite e React? Consulta la nostra documentazione: [Tradurre Vite e React con Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_vite+react.md).
+
+## Indice
+
+<TOC/>
+
+## Il dilemma del retrofit: Perché internazionalizzare un'app esistente è difficile
+
+Tre ostacoli principali affrontano gli sviluppatori durante l'internazionalizzazione di un'app Vite e React:
+
+1. **Interruzione del codice**: L'estrazione manuale delle stringhe nei dizionari JSON richiede la modifica di quasi tutti i componenti. Questo genera enormi diff git, conflitti di merge e possibili regressioni di layout.
+2. **Manutenzione delle chiavi**: Inventare chiavi come `dashboard.hero.ctaButton` per ogni testo rallenta lo sviluppo e aggiunge carico cognitivo a ogni modifica dell'interfaccia.
+3. **Lavoro noioso di traduzione**: Una volta estratte le stringhe, tradurle in 5, 10 o 20 lingue comporta noiosi copia-incolla o costosi servizi di localizzazione esterni.
+
+Intlayer risolve questi problemi a livello architetturale con **estrazione assistita dal compilatore**, **dizionari dichiarativi a livello di componente** e **integrazione nativa con Vite**.
+
+## Estrazione automatica dei contenuti (senza ricerca manuale)
+
+Invece di estrarre manualmente ogni testo dal tuo JSX, Intlayer propone due percorsi senza attrito:
+
+### Opzione A: Lo strumento CLI di estrazione (`npx intlayer extract`)
+
+Puoi eseguire lo strumento di estrazione di Intlayer direttamente sulla tua codebase:
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+Questo comando analizza i tuoi componenti React, individua i testi visibili e genera automaticamente file di dichiarazione dei contenuti (`.content.ts`) accanto a ciascun componente. La logica rimane dichiarativa, pulita e con tipizzazione sicura, senza dover scrivere chiavi a mano.
+
+### Opzione B: Il compilatore Intlayer (Estrazione al build)
+
+Con il compilatore Intlayer abilitato nella configurazione, continui a scrivere i componenti con testo semplice nella tua lingua predefinita. In fase di build, il compilatore estrae i testi e inietta i contenuti localizzati in modo del tutto trasparente:
+
+```tsx fileName="src/App.tsx"
+// Scrivi normale codice React. Il compilatore estrae il testo automaticamente
+export default function App() {
+  return (
+    <section>
+      <h1>Benvenuto sulla nostra piattaforma</h1>
+      <p>Inizia a scoprire le nostre funzionalità moderne oggi stesso.</p>
+    </section>
+  );
+}
+```
+
+Dietro le quinte, Intlayer crea il dizionario e collega il componente al rispettivo contenuto localizzato, eliminando completamente la necessità di refactoring manuale.
+
+In questo caso viene generato un file `src/App.content.ts` con la seguente struttura:
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    benvenutoSullaNostraPiattaforma: t({
+      it: "Benvenuto sulla nostra piattaforma",
+    }),
+    iniziaAScoprireLeNostreFunzionalita: t({
+      it: "Inizia a scoprire le nostre funzionalità moderne oggi stesso.",
+    }),
+  },
+};
+
+export default content;
+```
+
+## Traduzione con IA tramite il tuo LLM preferito
+
+Una volta estratti i contenuti, tradurli in decine di lingue non dovrebbe richiedere giorni. Intlayer include una CLI integrata per la traduzione con intelligenza artificiale collegabile a OpenAI, Anthropic, DeepSeek o Mistral con le tue chiavi API:
+
+```bash packageManager="npm"
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer fill
+```
+
+```bash packageManager="bun"
+bunx intlayer fill
+```
+
+Configura le tue lingue e il provider IA in `intlayer.config.ts`:
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      Locales.ITALIAN,
+    ],
+    defaultLocale: Locales.ITALIAN,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-4o-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext:
+      "Moderna applicazione SaaS e dashboard creata con Vite e React",
+  },
+};
+
+export default config;
+```
+
+Eseguendo `npx intlayer fill`, i tuoi file di dichiarazione vengono completati con traduzioni di qualità per tutte le lingue configurate:
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    benvenutoSullaNostraPiattaforma: t({
+      it: "Benvenuto sulla nostra piattaforma",
+      en: "Welcome to our platform",
+      fr: "Bienvenue sur notre plateforme",
+      es: "Bienvenido a nuestra plataforma",
+    }),
+    iniziaAScoprireLeNostreFunzionalita: t({
+      it: "Inizia a scoprire le nostre funzionalità moderne oggi stesso.",
+      en: "Start exploring our modern features today.",
+      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
+      es: "Comience a explorar nuestras funciones modernas hoy.",
+    }),
+  },
+};
+
+export default content;
+```
+
+Fornendo l'`applicationContext` al modello linguistico, le traduzioni preservano il contesto tecnico, il tono del brand e le sfumature grammaticali molto meglio degli strumenti generici.
+
+Per verificare che non sia rimasto alcun testo non tradotto:
+
+```bash
+npx intlayer test
+```
+
+## Integrazione con Vite e configurazione del Provider
+
+Integrare Intlayer in Vite richiede solo l'aggiunta del plugin in `vite.config.ts` e l'inclusione del componente radice in `IntlayerProvider`:
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [react(), intlayer()],
+});
+```
+
+> A partire da Intlayer v9, il compilatore è incluso direttamente nel plugin `intlayer()` e si attiva automaticamente quando `compiler.enabled` è impostato in `intlayer.config.ts`.
+
+Avvolgi la tua applicazione con `IntlayerProvider` nel componente principale:
+
+```tsx fileName="src/App.tsx"
+import { FC } from "react";
+import { IntlayerProvider } from "react-intlayer";
+import { MainContent } from "./MainContent";
+
+const App: FC = () => {
+  return (
+    <IntlayerProvider>
+      <MainContent />
+    </IntlayerProvider>
+  );
+};
+
+export default App;
+```
+
+### Cambio dinamico della lingua
+
+Cambia lingua ovunque nella tua applicazione utilizzando l'hook `useLocale`:
+
+```tsx fileName="src/components/LocaleSwitcher.tsx"
+import { FC } from "react";
+import { Locales } from "intlayer";
+import { useLocale } from "react-intlayer";
+
+export const LocaleSwitcher: FC = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  return (
+    <select
+      value={locale}
+      onChange={(e) => setLocale(e.target.value as Locales)}
+    >
+      {availableLocales.map((loc) => (
+        <option key={loc} value={loc}>
+          {loc}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+## SEO Multilingue (Sitemap e Robots.txt)
+
+Intlayer include formattatori come `generateSitemap` e `getMultilingualUrls` per generare sitemap e robots.txt multilingue compatibili con i motori di ricerca per deployment statici con Vite:
+
+```javascript fileName="generate-seo.mjs"
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import { generateSitemap, getMultilingualUrls } from "intlayer";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const SITE_URL = (process.env.SITE_URL || "https://example.com").replace(
+  /\/$/,
+  ""
+);
+
+const pathList = [
+  { path: "/", changefreq: "daily", priority: 1.0 },
+  { path: "/about", changefreq: "monthly", priority: 0.7 },
+];
+
+const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
+fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);
+
+const getAllMultilingualUrls = (urls) =>
+  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));
+
+const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
+
+const robotsTxt = [
+  "User-agent: *",
+  "Allow: /",
+  ...disallowedPaths.map((path) => `Disallow: ${path}`),
+  "",
+  `Sitemap: ${SITE_URL}/sitemap.xml`,
+].join("\n");
+
+fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);
+console.log("File SEO generati con successo.");
+```
+
+Aggiungi uno script `prebuild` nel tuo `package.json` per eseguire questa generazione prima di `vite build`:
+
+```json fileName="package.json"
+{
+  "scripts": {
+    "dev": "vite",
+    "prebuild": "node generate-seo.mjs",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
+```
+
+## Approfondimento: Pronto per la guida passo-passo completa?
+
+Questa guida ha offerto una panoramica concettuale per internazionalizzare un'app Vite e React esistente nel 2026 senza complicazioni architetturali.
+
+Se desideri configurare passo dopo passo ogni dettaglio, compresi il supporto avanzato a TypeScript, i dizionari dinamici e l'editor visivo, visita la nostra guida ufficiale:
+
+👉 **[Guida completa per tradurre Vite e React con Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_vite+react.md)**
+
+## Domande Frequenti (FAQ)
+
+<FAQ>
+
+<Question title="Posso rendere multilingue la mia app Vite e React senza riscrivere manualmente tutti i testi?">
+
+Sì. Puoi utilizzare `npx intlayer extract` per rilevare ed estrarre automaticamente i testi in file di dichiarazione localizzati, oppure utilizzare il compilatore Intlayer che trasforma i componenti durante il build permettendoti di continuare a scrivere normale codice JSX.
+
+</Question>
+<Question title="In che modo Intlayer riduce la dimensione del bundle Vite rispetto a react-i18next o react-intl?">
+
+Intlayer definisce i dizionari a livello di singolo componente e ottimizza le inclusioni tramite macro in fase di build. I tuoi bundle ricevono solo i campi usati dai componenti renderizzati nella pagina, anziché interi file JSON. Inoltre, i dizionari dinamici caricano le lingue solo su richiesta.
+
+</Question>
+<Question title="Posso usare l'IA per tradurre i miei componenti esistenti in più lingue?">
+
+Sì. La CLI di Intlayer offre il comando `npx intlayer fill`, che si collega ai principali provider di intelligenza artificiale (OpenAI, Anthropic, Mistral, DeepSeek) per tradurre in modo contestuale tutte le lingue configurate.
+
+</Question>
+<Question title="Posso migrare da react-i18next o react-intl senza riscrivere i componenti?">
+
+Sì. Intlayer fornisce adattatori di compatibilità per `react-i18next` e `react-intl`, oltre a plugin dedicati per sincronizzare i tuoi file di traduzione JSON esistenti (`sync-json`).
+
+</Question>
+
+</FAQ>

package/blog/it/vue-i18n_vs_intlayer.md

@@ -35,15 +35,11 @@ Ci concentriamo sugli strumenti moderni di Vue (Vite, Composition API) e valutia
 
 > **tl;dr**: Entrambi possono localizzare app Vue. Se desideri **contenuti a livello di componente**, **tipi TypeScript rigorosi**, **controlli delle chiavi mancanti in fase di build**, **dizionari tree-shaken** e **helper integrati per router/SEO** oltre a **Editor Visivo e traduzioni AI**, **Intlayer** è la scelta più completa e moderna.
 
----
-
 ## Posizionamento ad alto livello
 
 - **vue-i18n** - La libreria i18n de-facto per Vue. Formattazione flessibile dei messaggi (stile ICU), blocchi SFC `<i18n>` per messaggi locali e un grande ecosistema. La sicurezza e la manutenzione su larga scala dipendono principalmente da te.
 - **Intlayer** - Modello di contenuto incentrato sui componenti per Vue/Vite/Nuxt con **tipizzazione TS rigorosa**, **controlli in fase di build**, **tree-shaking**, **helper per router e SEO**, **Editor Visivo/CMS** opzionale e **traduzioni assistite da AI**.
 
----
-
 ## Confronto delle funzionalità affiancate (focalizzato su Vue)
 
 | Funzionalità                                        | **Intlayer**                                                                      | **vue-i18n**                                                                                             |
@@ -67,8 +63,6 @@ Ci concentriamo sugli strumenti moderni di Vue (Vite, Composition API) e valutia
 | **Manutenibilità di progetti di grandi dimensioni** | ✅ Favorisce una struttura modulare e amichevole per i design system              | ✅ Possibile, ma richiede una forte disciplina su file/namespace                                         |
 | **Ecosistema / comunità**                           | ⚠️ Più piccolo ma in rapida crescita                                              | ✅ Grande e maturo nell'ecosistema Vue                                                                   |
 
----
-
 ## Confronto approfondito
 
 ### 1) Architettura e scalabilità
@@ -78,8 +72,6 @@ Ci concentriamo sugli strumenti moderni di Vue (Vite, Composition API) e valutia
 
 **Perché è importante:** In grandi app Vue o design system, il **contenuto modulare** scala meglio rispetto ai cataloghi monolitici.
 
----
-
 ### 2) TypeScript e sicurezza
 
 - **vue-i18n**: Buon supporto TS; la **tipizzazione rigorosa delle chiavi** richiede tipicamente schemi/generici personalizzati e convenzioni attente.
@@ -87,8 +79,6 @@ Ci concentriamo sugli strumenti moderni di Vue (Vite, Composition API) e valutia
 
 **Perché è importante:** Il typing forte intercetta i problemi **prima** del runtime.
 
----
-
 ### 3) Gestione delle traduzioni mancanti
 
 - **vue-i18n**: Avvisi/fallback **a runtime** (es. fallback su locale o chiave).
@@ -96,8 +86,6 @@ Ci concentriamo sugli strumenti moderni di Vue (Vite, Composition API) e valutia
 
 **Perché è importante:** L’applicazione a build-time mantiene l’interfaccia di produzione pulita e coerente.
 
----
-
 ### 4) Strategia di routing e URL (Vue Router/Nuxt)
 
 - **Entrambi** possono funzionare con rotte localizzate.
@@ -105,8 +93,6 @@ Ci concentriamo sugli strumenti moderni di Vue (Vite, Composition API) e valutia
 
 **Perché è importante:** Meno strati di collegamento personalizzati e **SEO più pulita** tra le localizzazioni.
 
----
-
 ### 5) Prestazioni e comportamento di caricamento
 
 - **vue-i18n**: Supporta messaggi di localizzazione asincroni; evitare un bundle eccessivo è responsabilità tua (dividi i cataloghi con attenzione).
@@ -114,8 +100,6 @@ Ci concentriamo sugli strumenti moderni di Vue (Vite, Composition API) e valutia
 
 **Perché è importante:** Bundle più piccoli e avvio più veloce per app Vue multi-localizzazione.
 
----
-
 ### 6) Esperienza sviluppatore e strumenti
 
 - **vue-i18n**: Documentazione e community mature; solitamente ti affiderai a **piattaforme di localizzazione esterne** per i flussi editoriali.
@@ -123,8 +107,6 @@ Ci concentriamo sugli strumenti moderni di Vue (Vite, Composition API) e valutia
 
 **Perché è importante:** Costi operativi ridotti e un ciclo sviluppo–contenuto più breve.
 
----
-
 ### 7) SEO, SSR & SSG
 
 - **Entrambi** funzionano con Vue SSR e Nuxt.
@@ -132,8 +114,6 @@ Ci concentriamo sugli strumenti moderni di Vue (Vite, Composition API) e valutia
 
 **Perché è importante:** SEO internazionale senza configurazioni personalizzate complesse.
 
----
-
 ## Perché Intlayer? (Problema e approccio)
 
 La maggior parte degli stack i18n (incluso **vue-i18n**) parte da **cataloghi centralizzati**:
@@ -223,8 +203,6 @@ Questo approccio:
 - **Evita chiavi inutilizzate** (i componenti non usati non importano contenuti).
 - **Ottimizza il caricamento** (i componenti caricati in modo lazy portano con sé il loro contenuto).
 
----
-
 ## Funzionalità aggiuntive di Intlayer (rilevanti per Vue)
 
 - **Supporto cross-framework**: Funziona con Vue, Nuxt, Vite, React, Express e altri.
@@ -242,23 +220,17 @@ Questo approccio:
 - **Server MCP & estensione VSCode**: Automatizza i flussi di lavoro i18n e la creazione di contenuti direttamente nel tuo IDE.
 - **Interoperabilità**: Collegamenti con **vue-i18n**, **react-i18next** e **react-intl** quando necessario.
 
----
-
 ## Quando scegliere quale?
 
 - **Scegli vue-i18n** se vuoi l’**approccio standard di Vue**, ti senti a tuo agio a gestire cataloghi/namespace da solo e la tua app è di **dimensioni piccole o medie** (o già usi Nuxt i18n).
 - **Scegli Intlayer** se apprezzi il **contenuto scoped per componente**, il **TypeScript rigoroso**, le **garanzie a build-time**, il **tree-shaking** e gli strumenti **batteries-included** per routing/SEO/editor-specialmente per **codebase Vue/Nuxt grandi e modulari**.
 
----
-
 ## 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.
@@ -267,8 +239,6 @@ Utilizzando `intlayer`, puoi dichiarare i tuoi contenuti nel formato della tua l
 - **Adotta helper per router/SEO**: Standardizza il rilevamento della localizzazione e i tag `hreflang`.
 - **Misura i bundle**: Aspettati **riduzioni delle dimensioni del bundle** man mano che il contenuto non utilizzato viene escluso.
 
----
-
 ## Conclusione
 
 Sia **vue-i18n** che **Intlayer** localizzano bene le app Vue. La differenza è **quanto devi costruire da solo** per ottenere una configurazione robusta e scalabile:

package/blog/it/what_is_internationalization.md

@@ -101,8 +101,6 @@ Questa panoramica concisa copre gli elementi principali che dovrebbero essere in
 - **Sensibilità culturale**  
   Icone, colori e simboli potrebbero avere significati diversi tra le culture. È importante adattare i contenuti visivi e testuali per rispettare le sfumature culturali locali.
 
----
-
 ## Migliori pratiche per implementare l'i18n
 
 - **Pianifica in anticipo**  
@@ -117,8 +115,6 @@ Questa panoramica concisa copre gli elementi principali che dovrebbero essere in
 - **Riutilizzabilità delle traduzioni**  
   Organizza i tuoi file di traduzione in modo da poter essere riutilizzati tra più siti web o applicazioni. Ad esempio, se hai un piè di pagina o un'intestazione multilingue, imposta file di traduzione dedicati affinché gli elementi comuni possano essere facilmente applicati a tutti i progetti.
 
----
-
 ## Dichiarazione del contenuto della localizzazione vs. Esternalizzazione del contenuto CMS
 
 Quando crei un sito web, un **Content Management System (CMS) come WordPress, Wix o Drupal offre generalmente una migliore manutenibilità**. Soprattutto per blog o pagine di destinazione, grazie alle loro funzionalità i18n integrate.
@@ -136,8 +132,6 @@ Data queste sfide, è comune optare per un CMS headless per esternalizzare i con
 
 È importante scegliere lo strumento giusto per le tue esigenze e pianificare la tua strategia di internazionalizzazione fin dall'inizio. **Intlayer offre una soluzione convincente combinando la dichiarazione dei contenuti di localizzazione con un CMS headless che è strettamente integrato, fornendo il meglio di entrambi i mondi.**
 
----
-
 ### Consulta l'elenco di librerie e strumenti i18n per tecnologia
 
 Se stai cercando un elenco di librerie e strumenti i18n per tecnologia, dai un'occhiata alle seguenti risorse:
@@ -155,8 +149,6 @@ Se stai cercando un elenco di librerie e strumenti i18n per tecnologia, dai un'o
 - Svelte: [Vedi l'elenco di librerie e strumenti i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/it/list_i18n_technologies/frameworks/svelte.md)
 - React Native: [Vedi l'elenco di librerie e strumenti i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/it/list_i18n_technologies/frameworks/react-native.md)
 
----
-
 ## Conclusione
 
 L'internazionalizzazione (i18n) è più di un semplice compito tecnico; è un **investimento strategico** che consente al tuo software di parlare la lingua dei tuoi utenti, letteralmente. Astrarre gli elementi specifici della località, adattarsi alle variazioni linguistiche e culturali e pianificare un'espansione futura consente al tuo prodotto di prosperare in un mercato globale.

package/blog/ja/hreflang_guide_multilingual_seo.md

@@ -25,8 +25,6 @@ author: aymericzip
 
 翻訳は簡単な半分です。難しい半分は、検索エンジンにこれらのページが**別の言語の同じページ**であることを伝えることであり、3つのドキュメントが互いに競合していないことです。これが `hreflang` が行うことであり、ほとんどの多言語サイトが静かに交通を失うところです。
 
----
-
 ## hreflang が実際に何であるか
 
 ページ上の注釈で、次のように言っています：_この URL には、これらの言語用に同等のバージョンがあります。_
@@ -42,8 +40,6 @@ author: aymericzip
 
 それが何でないかについて明確にすることは価値があります。これは**リダイレクトではありません** — これはヒントであり、Googleはそれをオーバーライドするかもしれません。これは**ランキングブースト ではありません** — これはあなたがランクするかどうかではなく、**どのバージョンがランクするか**を変更します。そしてBingはそれを完全に無視し、代わりに`content-language`とジオターゲティングに依存しています。
 
----
-
 ## どこで宣言するか
 
 3つの配置、すべて有効です。1つを選んでそこに留まってください — 2つの場所で宣言された同じクラスターは、セットがどのように分散するかを示します。
@@ -54,8 +50,6 @@ author: aymericzip
 
 **HTTP `Link` header** は PDF などの非 HTML ファイルの唯一のオプションです。
 
----
-
 ## ルール
 
 ### 自己参照と相互性
@@ -107,8 +101,6 @@ getLocalizedUrl("https://example.com/about", "fr"); // → "https://example.com/
 
 2つのことを区別する必要があります: `x-default` はセット内の追加エントリであり、自己参照エントリの置き換えではなく、他のすべてのエントリと同様に、クラスター内のすべてのページに同じ形式で表示される必要があります。
 
----
-
 ## canonical トラップ
 
 ローカライズされた各ページは、**それ自体の canonical** である必要があります:
@@ -131,8 +123,6 @@ getLocalizedUrl("https://example.com/about", "fr"); // → "https://example.com/
 
 **Canonicalはロケールごとに自己参照的です。`hreflang`はクラスタを説明します。**
 
----
-
 ## URLの構造を選択する
 
 `hreflang`はURLに注釈を付けるため、構造が最初に来ます。
@@ -149,14 +139,11 @@ getLocalizedUrl("https://example.com/about", "fr"); // → "https://example.com/
 
 > Intlayerは`routing.mode`と`routing.domains`を通じて3つすべてをカバーしています。[カスタムドメイン](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/custom_domains.md)と[構成リファレンス](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
 
----
-
 ## 実装
 
 これらのタグを手作業で書くことは、2番目のlocaleとの接触に耐えられません。代わりに、localeリストから導出してください。
 
 <Steps>
-
 <Step number={1} title="すべてのページでクラスターを出力">
 
 すべての場所で同じセット、localeごとにcanonical、絶対URL、`x-default`を含めます。
@@ -251,7 +238,6 @@ export const Route = createFileRoute("/{-$locale}/about")({
 </Tabs>
 
 </Step>
-
 <Step number={2} title="または、すべてをサイトマップに移動します">
 
 大規模な場合は、ページから注釈を完全に削除してください。`generateSitemap` は設定からロケールとルーティング モードを読み取り、エントリごとに `xhtml:link` 代替を生成します:
@@ -274,7 +260,6 @@ const sitemap = generateSitemap(
 - `entryPerLocale` (デフォルト `false`) — デフォルトでは1つの `<url>` エントリがすべての代替言語を含みます。どちらの形式も有効ですが、`<loc>` としてリストされたURLのみが Search Console で _送信済み_ としてカウントされます。代替言語のみのロケールは発見可能なままですが、サイトマップに属さないままになります。これをオンにすると、すべてのローカライズされたURLが独自のエントリを取得し、代替言語セット全体が繰り返されます。これはエントリ数をロケール数で乗算するため、50,000 URL / 50 MB の制限に注意し、それを超えた場合はサイトマップインデックスに分割してください。
 
 </Step>
-
 <Step number={3} title="クローラーが受け取るものを確認する">
 
 `hreflang` は無音で失敗するため、それを想定するのではなく確認してください。
@@ -287,8 +272,6 @@ const sitemap = generateSitemap(
 
 </Steps>
 
----
-
 ## チェックリスト
 
 - [ ] 各ロケールには、異なるクロール可能な URL があります
@@ -302,8 +285,6 @@ const sitemap = generateSitemap(
 - [ ] 正確に 1 つの場所で宣言されている
 - [ ] Alternate がリダイレクトしていない
 
----
-
 ## まとめ
 
 `hreflang` はシンプルで容赦がありません。1 つの戻りタグが欠けていたり、1 つの相対 URL があったり、1 つのクロスロケール canonical があったりすると、クラスタ全体が破棄され、エラーは表示されません。これらはすべて、タグを手動で記述することから生じます。

package/blog/ja/i18n_meaning.md

@@ -92,8 +92,6 @@ i18nの意味は言語を超えて広がります。真の国際化は以下を
 - **ユーザー向けのすべてのテキストを抽象化する：** UIコンポーネント内にハードコードされたテキストがゼロであることを確認してください。
 - **堅牢な翻訳管理システムを採用する：** **Intlayer** のようなツールは、開発者と翻訳者の間のギャップを埋めます。Intlayerは、コードベースと密接に統合されたヘッドレスCMSとして機能し、コンテンツ管理者が開発者の新しいビルドを必要とせずに翻訳を視覚的に更新できるようにします。
 
----
-
 ### テクノロジー別のi18nライブラリとツールの一覧
 
 テクノロジー別のi18nライブラリとツールのリストをお探しの場合は、以下のリソースをチェックしてください：
@@ -112,8 +110,6 @@ i18nの意味は言語を超えて広がります。真の国際化は以下を
 - Svelte：[i18nライブラリとツールの一覧を見る](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ja/list_i18n_technologies/frameworks/svelte.md)
 - React Native：[i18nライブラリとツールの一覧を見る](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ja/list_i18n_technologies/frameworks/react-native.md)
 
----
-
 ## 結論
 
 **i18nの意味**は、グローバルなインパクトを目指す現代のデジタルビジネスにとって不可欠な概念です。「国際化」という単なる風変わりな技術的略称をはるかに超えて、i18nはソフトウェアを多様な言語、文化、地域の基準にシームレスに適応させるために必要な技術的アーキテクチャを象徴しています。