Documentazione di Intlayer

Benvenuto nella documentazione ufficiale di Intlayer! Qui troverai tutto il necessario per integrare, configurare e padroneggiare Intlayer per tutte le tue esigenze di internazionalizzazione (i18n), sia che tu stia lavorando con Next.js, React, Vite, Express o un altro ambiente JavaScript.

Introduzione

Cos'è Intlayer?

Intlayer è una libreria di internazionalizzazione progettata specificamente per gli sviluppatori JavaScript. Consente la dichiarazione del tuo contenuto ovunque nel tuo codice. Converte la dichiarazione di contenuti multilingue in dizionari strutturati da integrare facilmente nel tuo codice. Utilizzando TypeScript, Intlayer rende il tuo sviluppo più robusto ed efficiente.

Intlayer fornisce anche un editor visivo opzionale che ti consente di modificare e gestire facilmente i tuoi contenuti. Questo editor è particolarmente utile per gli sviluppatori che preferiscono un'interfaccia visiva per la gestione dei contenuti, o per i team che generano contenuti senza doversi preoccupare del codice.

Esempio di utilizzo

.
└── Components
    └── MyComponent
        ├── index.content.ts
        └── index.tsx

import { t, type Dictionary } from "intlayer";

const componentContent = {
  key: "component-key",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
      it: "Ciao Mondo",
    }),
  },
} satisfies Dictionary;

export default componentContent;

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

export const MyComponent: FC = () => {
  const { myTranslatedContent } = useIntlayer("component-key");

  return <span>{myTranslatedContent}</span>;
};

Perché Intlayer rispetto alle alternative?

Rispetto alle principali soluzioni come next-intl o i18next, Intlayer è una soluzione dotata di ottimizzazioni integrate come:

Caratteristiche principali

Intlayer offre una varietà di funzionalità su misura per soddisfare le esigenze dello sviluppo web moderno. Di seguito sono elencate le funzionalità chiave, con link alla documentazione dettagliata per ciascuna:

• Supporto all'internazionalizzazione: Migliora la portata globale della tua applicazione con il supporto integrato per l'internazionalizzazione.
• Editor Visivo: Migliora il tuo flusso di lavoro di sviluppo con i plugin dell'editor progettati per Intlayer. Dai un'occhiata alla Guida all'Editor Visivo.
• Flessibilità di configurazione: Personalizza la tua configurazione con ampie opzioni dettagliate nella Guida alla configurazione.
• Strumenti CLI avanzati: Gestisci i tuoi progetti in modo efficiente utilizzando l'interfaccia a riga di comando di Intlayer. Esplora le capacità nella Documentazione degli strumenti CLI.

Concetti Base

Dizionario

Organizza i tuoi contenuti multilingue vicino al tuo codice per mantenere tutto coerente e manutenibile.

• Iniziare
  Impara le basi per dichiarare i tuoi contenuti in Intlayer.

• Traduzione
  Comprendi come le traduzioni vengono generate, memorizzate e utilizzate nella tua applicazione.

• Enumerazione
  Gestisci facilmente set di dati ripetuti o fissi in varie lingue.

• Condizione
  Impara come utilizzare la logica condizionale in Intlayer per creare contenuti dinamici.

• Inserimento Scopri come inserire valori in una stringa utilizzando i segnaposto di inserimento.

• Recupero tramite Funzioni
  Scopri come recuperare dinamicamente contenuti con logica personalizzata per adattarli al flusso di lavoro del tuo progetto.

• Markdown
  Impara a utilizzare Markdown in Intlayer per creare contenuti arricchiti.

• File incorporati
  Scopri come incorporare file esterni in Intlayer per utilizzarli nell'editor dei contenuti.

• Annidamento
  Comprendi come annidare contenuti in Intlayer per creare strutture complesse.

Ambienti e Integrazioni

Abbiamo costruito Intlayer pensando alla flessibilità, offrendo un'integrazione fluida con i framework e gli strumenti di build più popolari:

• Intlayer con Next.js 16
• Intlayer con Next.js 15
• Intlayer con Next.js 14 (App Router)
• Intlayer con Next.js Page Router
• Intlayer con Tanstack Start
• Intlayer con Tanstack Start + Solid
• Intlayer con Vite + React
• Intlayer con React Router v7
• Intlayer con React Router v7 (fs-routes)
• Intlayer con React CRA
• Intlayer con React Native ed Expo
• Intlayer con Lynx e React
• Intlayer con Astro
• Intlayer con Astro + React
• Intlayer con Astro + Vue
• Intlayer con Astro + Svelte
• Intlayer con Astro + Solid
• Intlayer con Astro + Preact
• Intlayer con Astro + Lit
• Intlayer con Astro + Vanilla JS
• Intlayer con Vite + Vue
• Intlayer con Nuxt
• Intlayer con Vite + Svelte
• Intlayer con SvelteKit
• Intlayer con Vite + Solid
• Intlayer con SolidStart
• Intlayer con Vite + Preact
• Intlayer con Angular 22
• Intlayer con Angular 19
• Intlayer con Analog
• Intlayer con Vite + Lit
• Intlayer con Vite + Vanilla JS
• Intlayer con Vanilla JS
• Intlayer con htmx
• Intlayer con Express
• Intlayer con NestJS
• Intlayer con Fastify
• Intlayer con Hono
• Intlayer con AdonisJS
• Intlayer con Elysia
• Intlayer con Storybook
• Intlayer con next-intl
• Intlayer con next-i18next

Ogni guida all'integrazione include le best practice per utilizzare le funzionalità di Intlayer, come il server-side rendering, il dynamic routing o il client-side rendering, così puoi mantenere un'applicazione veloce, SEO-friendly e altamente scalabile.

Contribuire e Feedback

Apprezziamo il potere dell'open source e dello sviluppo guidato dalla comunità. Se desideri proporre miglioramenti, aggiungere una nuova guida o correggere eventuali problemi nella nostra documentazione, sentiti libero di inviare una Pull Request o di aprire una issue sul nostro repository GitHub.

Pronto a tradurre la tua applicazione in modo più rapido ed efficiente? Immergiti nella nostra documentazione per iniziare a usare Intlayer oggi. Scopri un approccio robusto e semplificato all'internazionalizzazione che mantiene i tuoi contenuti organizzati e il tuo team più produttivo.

Domande frequenti