Perché dovresti considerare Intlayer?

Cos'è Intlayer?

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

Perché è stato creato Intlayer?

Intlayer è stato creato per risolvere un problema comune che affligge tutte le comuni librerie i18n 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. Ad esempio:

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

O 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 base di codice 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 copiando/incollando da fornitori di IA)

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

   • Cercare la risorsa/namespace correlata (lontana dal componente)
   • Tradurre i tuoi contenuti
   • Assicurarti che il tuo contenuto sia aggiornato per ogni locale
   • Verificare che il tuo namespace non includa chiavi/valori non utilizzati
   • Assicurarti che la struttura dei tuoi file JSON sia la stessa per tutti i locale

Sui progetti professionali che utilizzano queste soluzioni, vengono spesso utilizzate piattaforme di localizzazione per aiutare a gestire la traduzione dei tuoi contenuti. Tuttavia, questo può diventare rapidamente costoso per i progetti di grandi dimensioni.

Per risolvere questo problema, Intlayer adotta un approccio che delimita i tuoi contenuti per componente e li mantiene vicini al componente stesso, come spesso facciamo con i 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 consente 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 IA nel tuo IDE (come GitHub Copilot) possono aiutarti a dichiarare i tuoi contenuti, riducendo il copia/incolla

2. Pulire la tua base di codice

   • Ridurre la complessità
   • Aumentare la manutenibilità

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

   • Limitando il rischio di impattare sui contenuti di altri componenti
   • Copiando/incollando i tuoi contenuti da un'applicazione all'altra senza dipendenze esterne

4. Evitare di inquinare la tua base di codice con chiavi/valori non utilizzati per componenti non utilizzati

   • Se non usi un componente, Intlayer non importerà il relativo contenuto
   • Se elimini un componente, ti ricorderai più facilmente di rimuovere il relativo contenuto poiché sarà presente nella stessa cartella

5. Ridurre il costo di ragionamento per gli agenti IA per dichiarare i tuoi contenuti multilingue

   • L'agente IA non dovrà scansionare l'intera base di codice per sapere dove implementare i tuoi contenuti
   • Le traduzioni possono essere eseguite facilmente dagli strumenti di completamento automatico IA nel tuo IDE (come GitHub Copilot)

6. Ottimizzare le prestazioni di caricamento

   • Se un componente viene caricato in modalità lazy, il relativo contenuto verrà caricato contemporaneamente

Funzionalità aggiuntive di Intlayer

Mostra tutto il contenuto della tabella

Mostra tutto il contenuto della tabella

Apri la tabella in una finestra modale per visualizzare tutti i dati in modo chiaro

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 alimentata da JavaScript Sfrutta la flessibilità di JavaScript per definire e gestire i tuoi contenuti in modo efficiente. - Dichiarazione del contenuto
	Compilatore Il Compilatore Intlayer estrae automaticamente il contenuto dai componenti e genera i file dei dizionari. - Compilatore
	File di dichiarazione dei contenuti per locale Accelera il tuo sviluppo dichiarando i tuoi contenuti una sola volta, prima della generazione automatica. - File di dichiarazione dei contenuti per locale
	Ambiente Type-Safe Sfrutta TypeScript per garantire che le definizioni dei contenuti e il codice siano privi di errori, beneficiando al contempo dell'autocompletamento dell'IDE. - Configurazione TypeScript
	Configurazione Semplificata Inizia rapidamente con una configurazione minima. Regola le impostazioni per l'internazionalizzazione, il routing, l'IA, la build e la gestione dei contenuti con facilità. - Esplora l'integrazione con Next.js
	Recupero dei contenuti semplificato Non c'è bisogno di chiamare la tua funzione t per ogni pezzo di contenuto. Recupera tutti i tuoi contenuti direttamente utilizzando un unico hook. - Integrazione React
	Implementazione coerente dei Server Component Perfettamente adatto per i server component di Next.js, utilizza la stessa implementazione sia per i componenti client che server, senza necessità di passare la tua funzione t attraverso ogni server component. - Server Component
	Base di codice organizzata Mantieni la tua base di codice più organizzata: 1 componente = 1 dizionario nella stessa cartella. Le traduzioni vicine ai rispettivi componenti migliorano la manutenibilità e la chiarezza. - Come funziona Intlayer
	Routing Avanzato Supporto completo del routing delle app, adattandosi perfettamente alle strutture applicative complesse, per Next.js, React, Vite, Vue.js, ecc. - Esplora l'integrazione con Next.js
	Supporto Markdown Importa e interpreta file locale e Markdown remoto per contenuti multilingue come informative sulla privacy, documentazione, ecc. Interpreta e rendi accessibili i metadati Markdown nel tuo codice. - File di contenuto
	Editor Visuale e CMS Gratuiti Un editor visuale e un CMS gratuiti sono disponibili per i redattori di contenuti, eliminando la necessità di una piattaforma di localizzazione. Mantieni i tuoi contenuti sincronizzati usando Git, o esternalizzali totalmente o parzialmente con il CMS. - Intlayer Editor - Intlayer CMS
	Contenuto Tree-shakable Contenuto tree-shakable, riducendo le dimensioni del bundle finale. Carica i contenuti per componente, escludendo qualsiasi contenuto inutilizzato dal tuo bundle. Supporta il lazy loading per migliorare l'efficienza di caricamento dell'app. - Ottimizzazione della build dell'app
	Rendering Statico Non blocca il Rendering Statico. - Integrazione Next.js
	Traduzione basata su IA Trasforma il tuo sito web in 231 lingue con un solo clic utilizzando gli avanzati strumenti di traduzione basati su IA di Intlayer, utilizzando il tuo fornitore di IA/chiave API. - Integrazione CI/CD - CLI di Intlayer - Auto fill
	Integrazione del Server MCP Fornisce un server MCP (Model Context Protocol) per l'automazione dell'IDE, consentendo una gestione fluida dei contenuti e flussi di lavoro i18n direttamente all'interno del proprio ambiente di sviluppo. - Server MCP
	Estensione per VSCode Intlayer fornisce un'estensione per VSCode per aiutarti a gestire i tuoi contenuti e le tue traduzioni, costruire i tuoi dizionari, tradurre i tuoi contenuti e altro ancora. - Estensione per 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
Test delle traduzioni mancanti (CLI/CI)	✅ CLI: npx intlayer content test (audit compatibile con CI)

Confronto di Intlayer con altre soluzioni

Stelle di GitHub

Le stelle di GitHub sono un forte indicatore della popolarità di un progetto, della fiducia della comunità e della pertinenza a lungo termine. Sebbene non siano una misura diretta della qualità tecnica, riflettono quanti sviluppatori trovano il progetto utile, ne seguono i progressi e sono propensi ad adottarlo. Per stimare il valore di un progetto, le stelle aiutano a confrontare la trazione tra le alternative e forniscono approfondimenti sulla crescita dell'ecosistema.

Interoperabilità

intlayer può anche aiutare a gestire i tuoi namespace react-intl, react-i18next, next-intl, next-i18next e vue-i18n.

Usando 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).