Perché dovresti considerare Intlayer?

Cos'è Intlayer?

Intlayer è una libreria di internazionalizzazione progettata specificamente per sviluppatori JavaScript. Permette la dichiarazione del tuo contenuto ovunque nel tuo codice. Converte le dichiarazioni di contenuti multilingue in dizionari strutturati per integrarsi facilmente nel tuo codice. Utilizzando TypeScript, Intlayer rende il tuo sviluppo più solido ed efficiente.

Perché è stato creato Intlayer?

Intlayer è stato creato per risolvere un problema comune che interessa tutte le librerie i18n più diffuse come next-intl, react-i18next, react-intl, next-i18next, react-intl e vue-i18n.

Tutte queste soluzioni adottano un approccio centralizzato per elencare e gestire i tuoi contenuti. Per esempio:

.├── locales│   ├── en.json│   ├── fr.json│   └── es.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

Oppure qui usando i namespace:

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

Questo tipo di architettura rallenta il processo di sviluppo e rende la codebase più complessa da mantenere per diversi motivi:

1. Per ogni nuovo componente creato, dovresti:

   • Creare la nuova risorsa/namespace nella cartella locales
   • Ricordarti di importare il nuovo namespace nella tua pagina
   • Tradurre i tuoi contenuti (spesso fatto manualmente tramite copia/incolla da fornitori AI)

2. Per ogni modifica apportata ai tuoi componenti, dovresti:

   • Cercare la risorsa/namespace correlata (lontano dal componente)
   • Tradurre i tuoi contenuti
   • Assicurarti che i tuoi contenuti siano aggiornati per ogni locale
   • Verificare che il tuo namespace non includa chiavi/valori inutilizzati
   • Assicurarti che la struttura dei tuoi file JSON sia la stessa per tutti i locali

Nei progetti professionali che utilizzano queste soluzioni, spesso si ricorre a piattaforme di localizzazione per aiutare a gestire la traduzione dei contenuti. Tuttavia, questo può diventare rapidamente costoso per progetti di grandi dimensioni.

Per risolvere questo problema, Intlayer adotta un approccio che delimita i contenuti per componente e mantiene i contenuti vicini al componente stesso, come spesso facciamo con il CSS (styled-components), i tipi, la documentazione (storybook) o i test unitari (jest).

.└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx

import { t, type Dictionary } from "intlayer";const componentExampleContent = {  key: "component-example",  content: {    myTranslatedContent: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),  },} satisfies Dictionary;export default componentExampleContent;

import { useIntlayer } from "react-intlayer";export const ComponentExample = () => {  const { myTranslatedContent } = useIntlayer("component-example");  return <span>{myTranslatedContent}</span>;};

Questo approccio ti permette di:

1. Aumentare la velocità di sviluppo

   • I file .content.{{ts|mjs|cjs|json}} possono essere creati utilizzando un'estensione di VSCode
   • Gli strumenti di completamento automatico basati su AI nel tuo IDE (come GitHub Copilot) possono aiutarti a dichiarare il tuo contenuto, riducendo il copia/incolla

2. Pulire la tua codebase

   • Ridurre la complessità
   • Aumentare la manutenibilità

3. Duplicare i tuoi componenti e i loro contenuti correlati più facilmente (esempio: componenti di login/registrazione, ecc.)

   • Limitando il rischio di impattare il contenuto di altri componenti
   • Copiando/incollando il tuo contenuto da un'applicazione all'altra senza dipendenze esterne

4. Evitare di inquinare la tua codebase con chiavi/valori inutilizzati per componenti non usati

   • Se non usi un componente, Intlayer non importarà il suo contenuto correlato
   • Se elimini un componente, ti sarà più facile ricordarti di rimuovere il suo contenuto correlato poiché sarà presente nella stessa cartella

5. Ridurre il costo di ragionamento per gli agenti AI nella dichiarazione del tuo contenuto multilingue

   • L'agente AI non dovrà scansionare l'intera codebase per sapere dove implementare il tuo contenuto
   • Le traduzioni possono essere facilmente effettuate dagli strumenti di completamento automatico basati su AI nel tuo IDE (come GitHub Copilot)

Funzionalità aggiuntive di Intlayer

Funzionalità	Descrizione
	Supporto Cross-Framework Intlayer è compatibile con tutti i principali framework e librerie, inclusi Next.js, React, Vite, Vue.js, Nuxt, Preact, Express e altri ancora.
	Gestione dei Contenuti con JavaScript Sfrutta la flessibilità di JavaScript per definire e gestire i tuoi contenuti in modo efficiente. - Dichiarazione dei contenuti
	File di Dichiarazione del Contenuto per Locale Accelera il tuo sviluppo dichiarando il contenuto una sola volta, prima della generazione automatica. - File di Dichiarazione del Contenuto per Locale
	Ambiente Type-Safe Sfrutta TypeScript per garantire che le tue definizioni di contenuto e il codice siano privi di errori, beneficiando anche dell'autocompletamento nell'IDE. - Configurazione di TypeScript
	Configurazione Semplificata Inizia rapidamente con una configurazione minima. Regola facilmente le impostazioni per l'internazionalizzazione, il routing, l'IA, la build e la gestione dei contenuti. - Esplora l'integrazione con Next.js
	Recupero Contenuti Semplificato Non è necessario chiamare la tua funzione t per ogni singolo contenuto. Recupera tutto il tuo contenuto direttamente usando un singolo hook. - Integrazione React
	Implementazione Coerente dei Componenti Server Perfettamente adatto per i componenti server di Next.js, utilizza la stessa implementazione sia per i componenti client che per quelli server, senza bisogno di passare la tua funzione t attraverso ogni componente server. - Componenti Server
	Codebase Organizzato Tieni il tuo codice più organizzato: 1 componente = 1 dizionario nella stessa cartella. Le traduzioni vicine ai rispettivi componenti migliorano la manutenibilità e la chiarezza. - Come funziona Intlayer
	Routing Avanzato Pieno supporto al routing dell'app, adattandosi perfettamente a strutture applicative complesse, per Next.js, React, Vite, Vue.js, ecc. - Esplora l'integrazione con Next.js
	Supporto Markdown Importa e interpreta file di localizzazione e Markdown remoto per contenuti multilingue come politiche sulla privacy, documentazione, ecc. Interpreta e rendi accessibili i metadati Markdown nel tuo codice. - File di contenuto
	Editor Visivo e CMS Gratuiti Un editor visivo gratuito e un CMS sono disponibili per i content writer, eliminando la necessità di una piattaforma di localizzazione. Mantieni il tuo contenuto sincronizzato usando Git, oppure esternalizzalo totalmente o parzialmente con il CMS. - Editor Intlayer - CMS Intlayer
	Contenuto Tree-shakable Contenuto tree-shakable, che riduce la dimensione del bundle finale. Carica il contenuto per componente, escludendo qualsiasi contenuto non utilizzato dal tuo bundle. Supporta il lazy loading per migliorare l'efficienza del caricamento dell'app. - Ottimizzazione della build dell'app
	Rendering Statico Non blocca il Rendering Statico. - Integrazione Next.js
	Traduzione Potenziata dall'IA Trasforma il tuo sito web in 231 lingue con un solo clic utilizzando gli avanzati strumenti di traduzione potenziati dall'IA di Intlayer, sfruttando il tuo provider IA/chiave API personale. - Integrazione CI/CD - CLI di Intlayer - Compilazione automatica
	Integrazione Server MCP Fornisce un server MCP (Model Context Protocol) per l'automazione dell'IDE, consentendo una gestione dei contenuti e flussi di lavoro i18n senza interruzioni direttamente all'interno del tuo ambiente di sviluppo. - Server MCP
	Estensione VSCode Intlayer fornisce un'estensione per VSCode per aiutarti a gestire i tuoi contenuti e traduzioni, costruire i tuoi dizionari, tradurre i tuoi contenuti e altro ancora. - Estensione VSCode
	Interoperabilità Consente l'interoperabilità con react-i18next, next-i18next, next-intl e react-intl. - Intlayer e react-intl - Intlayer e next-intl - Intlayer e next-i18next

Confronto di Intlayer con altre soluzioni

Storia del Documento