Traduci il tuo sito Next.js 16 usando Intlayer | Internazionalizzazione (i18n)

Vedi Template Applicazione su GitHub.

Cos'è Intlayer?

Intlayer è una libreria innovativa e open-source per l'internazionalizzazione (i18n) progettata per semplificare il supporto multilingue nelle moderne applicazioni web. Intlayer si integra perfettamente con l'ultimo framework Next.js 16, incluso il suo potente App Router. È ottimizzato per funzionare con i Server Components per un rendering efficiente ed è completamente compatibile con Turbopack.

Con Intlayer, puoi:

• Gestire facilmente le traduzioni utilizzando dizionari dichiarativi a livello di componente.
• Localizzare dinamicamente i metadata, le rotte e i contenuti.
• Accedere alle traduzioni sia nei componenti client-side che server-side.
• Garantire il supporto a TypeScript con tipi generati automaticamente, migliorando l'autocompletamento e il rilevamento degli errori.
• Approfitta delle funzionalità avanzate, come il rilevamento e il cambio dinamico della lingua.

Intlayer è compatibile con Next.js 12, 13, 14 e 16. Se utilizzi Next.js Page Router, puoi fare riferimento a questa guida. Per Next.js 12, 13, 14 con App Router, fai riferimento a questa guida.

Guida passo-passo per configurare Intlayer in un'applicazione Next.js

Passo 1: Installa le dipendenze

Installa i pacchetti necessari usando npm:

npm install intlayer next-intlayer

• intlayer

  Il pacchetto principale che fornisce strumenti di internazionalizzazione per la gestione della configurazione, la traduzione, la dichiarazione dei contenuti, la traspilazione e i comandi CLI.

• next-intlayer

  Il pacchetto che integra Intlayer con Next.js. Fornisce provider di contesto e hook per l'internazionalizzazione in Next.js. Inoltre, include il plugin Next.js per integrare Intlayer con Webpack o Turbopack, così come un proxy per rilevare la lingua preferita dall'utente, gestire i cookie e gestire il reindirizzamento degli URL.

Passo 2: Configura il tuo progetto

Crea un file di configurazione per configurare le lingue della tua applicazione:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // Le tue altre localizzazioni    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

Attraverso questo file di configurazione, puoi impostare URL localizzati, il reindirizzamento proxy, i nomi dei cookie, la posizione e l'estensione delle tue dichiarazioni di contenuto, disabilitare i log di Intlayer nella console e altro ancora. Per un elenco completo dei parametri disponibili, consulta la documentazione di configurazione.

Passo 3: Integra Intlayer nella tua configurazione Next.js

Configura il tuo setup Next.js per utilizzare Intlayer:

import type { NextConfig } from "next";import { withIntlayer } from "next-intlayer/server";const nextConfig: NextConfig = {  /* opzioni di configurazione qui */};export default withIntlayer(nextConfig);

Il plugin Next.js withIntlayer() viene utilizzato per integrare Intlayer con Next.js. Garantisce la creazione dei file di dichiarazione dei contenuti e li monitora in modalità sviluppo. Definisce le variabili d'ambiente di Intlayer all'interno degli ambienti Webpack o Turbopack. Inoltre, fornisce alias per ottimizzare le prestazioni e assicura la compatibilità con i componenti server.

La funzione withIntlayer() è una funzione promise. Permette di preparare i dizionari di Intlayer prima che inizi la build. Se vuoi usarla con altri plugin, puoi aspettare il suo completamento con await. Esempio:

const nextConfig = await withIntlayer(nextConfig);const nextConfigWithOtherPlugins = withOtherPlugins(nextConfig);export default nextConfigWithOtherPlugins;

Se vuoi usarlo in modo sincrono, puoi utilizzare la funzione withIntlayerSync(). Esempio:

const nextConfig = withIntlayerSync(nextConfig);const nextConfigWithOtherPlugins = withOtherPlugins(nextConfig);export default nextConfigWithOtherPlugins;

Passo 4: Definire le Rotte Dinamiche per le Localizzazioni

Rimuovi tutto da RootLayout e sostituiscilo con il seguente codice:

import type { PropsWithChildren, FC } from "react";import "./globals.css";const RootLayout: FC<PropsWithChildren> = ({ children }) => (  // Puoi ancora avvolgere i children con altri provider, come `next-themes`, `react-query`, `framer-motion`, ecc.  <>{children}</>);export default RootLayout;

Mantenere il componente RootLayout vuoto permette di impostare gli attributi lang e dir al tag <html>.

Per implementare il routing dinamico, fornisci il percorso per la locale aggiungendo un nuovo layout nella tua directory [locale]:

import type { NextLayoutIntlayer } from "next-intlayer";import { Inter } from "next/font/google";import { getHTMLTextDir } from "intlayer";const inter = Inter({ subsets: ["latin"] });const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {  const { locale } = await params;  return (    <html lang={locale} dir={getHTMLTextDir(locale)}>      <body className={inter.className}>{children}</body>    </html>  );};export default LocaleLayout;

Il segmento di percorso [locale] viene utilizzato per definire la localizzazione. Esempio: /en-US/about si riferirà a en-US e /fr/about a fr.

A questo punto, incontrerai l'errore: Error: Missing <html> and <body> tags in the root layout.. Questo è previsto perché il file /app/page.tsx non è più utilizzato e può essere rimosso. Invece, il segmento di percorso [locale] attiverà la pagina /app/[locale]/page.tsx. Di conseguenza, le pagine saranno accessibili tramite percorsi come /en, /fr, /es nel tuo browser. Per impostare la locale predefinita come pagina radice, fai riferimento alla configurazione proxy al passo 7.

Quindi, implementa la funzione generateStaticParams nel Layout della tua applicazione.

export { generateStaticParams } from "next-intlayer"; // Riga da inserireconst LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {  /*... Resto del codice*/};export default LocaleLayout;

generateStaticParams garantisce che la tua applicazione precompili le pagine necessarie per tutte le localizzazioni, riducendo il calcolo a runtime e migliorando l'esperienza utente. Per maggiori dettagli, consulta la documentazione Next.js su generateStaticParams.

Intlayer funziona con export const dynamic = 'force-static'; per assicurare che le pagine siano precompilate per tutte le localizzazioni.

Passo 5: Dichiara il Tuo Contenuto

Crea e gestisci le tue dichiarazioni di contenuto per memorizzare le traduzioni:

import { t, type Dictionary } from "intlayer";const pageContent = {  key: "page",  content: {    getStarted: {      main: t({        en: "Get started by editing",        fr: "Commencez par éditer",        es: "Comience por editar",      }),      pageLink: "src/app/page.tsx",    },  },} satisfies Dictionary;export default pageContent;

Le dichiarazioni di contenuto possono essere definite in qualsiasi punto della tua applicazione non appena sono incluse nella directory contentDir (per impostazione predefinita, ./src). E devono corrispondere all'estensione del file di dichiarazione del contenuto (per impostazione predefinita, .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}).

Per maggiori dettagli, consulta la documentazione sulla dichiarazione del contenuto.

Passo 6: Utilizza il Contenuto nel Tuo Codice

Accedi ai tuoi dizionari di contenuto in tutta l'applicazione:

import type { FC } from "react";import { ClientComponentExample } from "@components/ClientComponentExample";import { ServerComponentExample } from "@components/ServerComponentExample";import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";const PageContent: FC = () => {  const content = useIntlayer("page");  return (    <>      <p>{content.getStarted.main}</p>      <code>{content.getStarted.pageLink}</code>    </>  );};const Page: NextPageIntlayer = async ({ params }) => {  const { locale } = await params;  return (    <IntlayerServerProvider locale={locale}>      <PageContent />      <ServerComponentExample />      <IntlayerClientProvider locale={locale}>        <ClientComponentExample />      </IntlayerClientProvider>    </IntlayerServerProvider>  );};export default Page;

• IntlayerClientProvider viene utilizzato per fornire la localizzazione ai componenti lato client. Può essere posizionato in qualsiasi componente genitore, incluso il layout. Tuttavia, si consiglia di posizionarlo in un layout perché Next.js condivide il codice del layout tra le pagine, rendendolo più efficiente. Utilizzando IntlayerClientProvider nel layout, si evita di reinizializzarlo per ogni pagina, migliorando le prestazioni e mantenendo un contesto di localizzazione coerente in tutta l'applicazione.

• IntlayerServerProvider viene utilizzato per fornire la localizzazione ai componenti lato server. Non può essere impostato nel layout.

  Layout e pagina non possono condividere un contesto server comune perché il sistema di contesto server si basa su un archivio dati per richiesta (tramite il meccanismo React's cache), causando la ricreazione di ogni "contesto" per diversi segmenti dell'applicazione. Posizionare il provider in un layout condiviso romperebbe questa isolazione, impedendo la corretta propagazione dei valori del contesto server ai tuoi componenti server.

"use client";import type { FC } from "react";import { useIntlayer } from "next-intlayer";export const ClientComponentExample: FC = () => {  const content = useIntlayer("client-component-example"); // Crea la dichiarazione di contenuto correlata  return (    <div>      <h2>{content.title}</h2>      <p>{content.content}</p>    </div>  );};

import type { FC } from "react";import { useIntlayer } from "next-intlayer/server";export const ServerComponentExample: FC = () => {  const content = useIntlayer("server-component-example"); // Crea la dichiarazione di contenuto correlata  return (    <div>      <h2>{content.title}</h2>      <p>{content.content}</p>    </div>  );};

Se vuoi usare il tuo contenuto in un attributo di tipo string, come alt, title, href, aria-label, ecc., devi chiamare il valore della funzione, ad esempio:

<img src={content.image.src.value} alt={content.image.value} />

Per saperne di più sull'hook useIntlayer, consulta la documentazione.

(Opzionale) Passo 7: Configurare il Proxy per il Rilevamento della Lingua

Configura il proxy per rilevare la lingua preferita dall'utente:

export { intlayerProxy as proxy } from "next-intlayer/proxy";export const config = {  matcher:    "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",};

Il intlayerProxy viene utilizzato per rilevare la lingua preferita dall'utente e reindirizzarlo all'URL appropriato come specificato nella configurazione. Inoltre, consente di salvare la lingua preferita dell'utente in un cookie.

Se hai bisogno di concatenare più proxy insieme (ad esempio, intlayerProxy con autenticazione o proxy personalizzati), Intlayer ora fornisce un helper chiamato multipleProxies.

import { multipleProxies, intlayerProxy } from "next-intlayer/proxy";import { customProxy } from "@utils/customProxy";export const proxy = multipleProxies([intlayerProxy, customProxy]);

(Opzionale) Passo 8: Internazionalizzazione dei tuoi metadata

Nel caso tu voglia internazionalizzare i tuoi metadata, come il titolo della tua pagina, puoi usare la funzione generateMetadata fornita da Next.js. All'interno, puoi recuperare il contenuto dalla funzione getIntlayer per tradurre i tuoi metadata.

import { type Dictionary, t } from "intlayer";import { Metadata } from "next";const metadataContent = {  key: "page-metadata",  content: {    title: t({      en: "Create Next App",      fr: "Créer une application Next.js",      es: "Crear una aplicación Next.js",    }),    description: t({      en: "Generated by create next app",      fr: "Généré par create next app",      es: "Generado por create next app",    }),  },} satisfies Dictionary<Metadata>;export default metadataContent;

import { getIntlayer, getMultilingualUrls } from "intlayer";import type { Metadata } from "next";import type { LocalPromiseParams } from "next-intlayer";export const generateMetadata = async ({  params,}: LocalPromiseParams): Promise<Metadata> => {  const { locale } = await params;  const metadata = getIntlayer("page-metadata", locale);  /**   * Genera un oggetto contenente tutti gli URL per ogni locale.   *   * Esempio:   * ```ts   *  getMultilingualUrls('/about');   *   *  // Restituisce   *  // {   *  //   en: '/about',   *  //   fr: '/fr/about',   *  //   es: '/es/about',   *  // }   * ```   */  const multilingualUrls = getMultilingualUrls("/");  const localizedUrl =    multilingualUrls[locale as keyof typeof multilingualUrls];  return {    ...metadata,    alternates: {      canonical: localizedUrl,      languages: { ...multilingualUrls, "x-default": "/" },    },    openGraph: {      url: localizedUrl,    },  };};// ... Resto del codice

Nota che la funzione getIntlayer importata da next-intlayer restituisce il tuo contenuto racchiuso in un IntlayerNode, permettendo l'integrazione con l'editor visivo. Al contrario, la funzione getIntlayer importata da intlayer restituisce il tuo contenuto direttamente senza proprietà aggiuntive.

In alternativa, puoi utilizzare la funzione getTranslation per dichiarare i tuoi metadata. Tuttavia, si consiglia di utilizzare file di dichiarazione dei contenuti per automatizzare la traduzione dei tuoi metadata ed esternalizzare il contenuto a un certo punto.

import {  type IConfigLocales,  getTranslation,  getMultilingualUrls,} from "intlayer";import type { Metadata } from "next";import type { LocalPromiseParams } from "next-intlayer";export const generateMetadata = async ({  params,}: LocalPromiseParams): Promise<Metadata> => {  const { locale } = await params;  const t = <T>(content: IConfigLocales<T>) => getTranslation(content, locale);  return {    title: t<string>({      en: "My title",      fr: "Mon titre",      es: "Mi título",    }),    description: t({      en: "La mia descrizione",      fr: "Ma description",      es: "Mi descripción",    }),  };};// ... Resto del codice

Scopri di più sull'ottimizzazione dei metadata nella documentazione ufficiale di Next.js.

(Opzionale) Passo 9: Internazionalizzazione del tuo sitemap.xml e robots.txt

Per internazionalizzare il tuo sitemap.xml e robots.txt, puoi utilizzare la funzione getMultilingualUrls fornita da Intlayer. Questa funzione ti permette di generare URL multilingue per la tua sitemap.

import { getMultilingualUrls } from "intlayer";import type { MetadataRoute } from "next";const sitemap = (): MetadataRoute.Sitemap => [  {    url: "https://example.com",    alternates: {      languages: { ...getMultilingualUrls("https://example.com") },    },  },  {    url: "https://example.com/login",    alternates: {      languages: { ...getMultilingualUrls("https://example.com/login") },    },  },  {    url: "https://example.com/register",    alternates: {      languages: { ...getMultilingualUrls("https://example.com/register") },    },  },];export default sitemap;

import type { MetadataRoute } from "next";import { getMultilingualUrls } from "intlayer";tsx fileName="src/app/robots.ts" codeFormat="typescript"import type { MetadataRoute } from "next";import { getMultilingualUrls } from "intlayer";// Ottieni tutte le URL multilingue da un array di URLconst getAllMultilingualUrls = (urls: string[]) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);// Configurazione del file robots.txt con regole per i crawlerconst robots = (): MetadataRoute.Robots => ({  rules: {    userAgent: "*",    allow: ["/"],    disallow: getAllMultilingualUrls(["/login", "/register"]), // Blocca le pagine di login e registrazione in tutte le lingue  },  host: "https://example.com",  sitemap: `https://example.com/sitemap.xml`,});export default robots;

Scopri di più sull'ottimizzazione della sitemap nella documentazione ufficiale di Next.js. Scopri di più sull'ottimizzazione del robots.txt nella documentazione ufficiale di Next.js.

(Opzionale) Passo 10: Cambiare la lingua del tuo contenuto

Per cambiare la lingua del tuo contenuto in Next.js, il modo consigliato è utilizzare il componente Link per reindirizzare gli utenti alla pagina localizzata appropriata. Il componente Link permette il prefetching della pagina, il che aiuta a evitare un ricaricamento completo della pagina.

"use client";import type { FC } from "react";import {  Locales,  getHTMLTextDir,  getLocaleName,  getLocalizedUrl,} from "intlayer";import { useLocale } from "next-intlayer";import Link from "next/link";export const LocaleSwitcher: FC = () => {  const { locale, pathWithoutLocale, availableLocales, setLocale } =    useLocale();  return (    <div>      <button popoverTarget="localePopover">{getLocaleName(locale)}</button>      <div id="localePopover" popover="auto">        {availableLocales.map((localeItem) => (          <Link            href={getLocalizedUrl(pathWithoutLocale, localeItem)}            key={localeItem}            aria-current={locale === localeItem ? "page" : undefined}            onClick={() => setLocale(localeItem)}            replace // Garantirà che il pulsante "indietro" del browser reindirizzi alla pagina precedente          >            <span>              {/* Localizzazione - es. FR */}              {localeItem}            </span>            <span>              {/* Lingua nella sua stessa localizzazione - es. Français */}              {getLocaleName(localeItem, locale)}            </span>            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>              {/* Lingua nella localizzazione corrente - es. Francés con la localizzazione corrente impostata su Locales.SPANISH */}              {getLocaleName(localeItem)}            </span>            <span dir="ltr" lang={Locales.ENGLISH}>              {/* Lingua in inglese - es. French */}              {getLocaleName(localeItem, Locales.ENGLISH)}            </span>          </Link>        ))}      </div>    </div>  );};

Un modo alternativo è utilizzare la funzione setLocale fornita dall'hook useLocale. Questa funzione non permetterà il prefetching della pagina. Consulta la documentazione dell'hook useLocale per maggiori dettagli.

Puoi anche impostare una funzione nell'opzione onLocaleChange per attivare una funzione personalizzata quando la lingua cambia.

"use client";import { useRouter } from "next/navigation";import { useLocale } from "next-intlayer";import { getLocalizedUrl } from "intlayer";// ... Resto del codiceconst router = useRouter();const { setLocale } = useLocale({  onLocaleChange: (locale) => {    router.push(getLocalizedUrl(pathWithoutLocale, locale));  },});return (  <button onClick={() => setLocale(Locales.FRENCH)}>Cambia in francese</button>);

Riferimenti alla documentazione:

• useLocale hook
• getLocaleName hook
• getLocalizedUrl hook
• getHTMLTextDir hook
• hrefLang attribute
• lang attribute
• dir attribute`
• aria-current attribute`

(Opzionale) Passo 11: Creare un Componente Link Localizzato

Per garantire che la navigazione della tua applicazione rispetti la lingua corrente, puoi creare un componente Link personalizzato. Questo componente aggiunge automaticamente il prefisso della lingua corrente agli URL interni. Ad esempio, quando un utente francofono clicca su un link alla pagina "About", viene reindirizzato a /fr/about invece che a /about.

Questo comportamento è utile per diversi motivi:

• SEO e esperienza utente: Gli URL localizzati aiutano i motori di ricerca a indicizzare correttamente le pagine specifiche per lingua e forniscono agli utenti contenuti nella loro lingua preferita.
• Coerenza: Utilizzando un link localizzato in tutta l'applicazione, garantisci che la navigazione rimanga all'interno della lingua corrente, evitando cambi di lingua imprevisti.
• Manutenibilità: Centralizzare la logica di localizzazione in un unico componente semplifica la gestione degli URL, rendendo il tuo codice più facile da mantenere ed estendere man mano che la tua applicazione cresce.

Di seguito è riportata l'implementazione di un componente Link localizzato in TypeScript:

"use client";import { getLocalizedUrl } from "intlayer";import NextLink, { type LinkProps as NextLinkProps } from "next/link";import { useLocale } from "next-intlayer";import type { PropsWithChildren, FC } from "react";/** * Funzione di utilità per verificare se un dato URL è esterno. * Se l'URL inizia con http:// o https://, è considerato esterno. */export const checkIsExternalLink = (href?: string): boolean =>  /^https?:\/\//.test(href ?? "");/** * Un componente Link personalizzato che adatta l'attributo href in base alla locale corrente. * Per i link interni, utilizza `getLocalizedUrl` per aggiungere il prefisso della locale all'URL (es. /fr/about). * Questo garantisce che la navigazione rimanga all'interno dello stesso contesto di locale. */export const Link: FC<PropsWithChildren<NextLinkProps>> = ({  href,  children,  ...props}) => {  const { locale } = useLocale();  const isExternalLink = checkIsExternalLink(href.toString());  // Se il link è interno e viene fornito un href valido, ottieni l'URL localizzato.  const hrefI18n: NextLinkProps["href"] =    href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;  return (    <NextLink href={hrefI18n} {...props}>      {children}    </NextLink>  );};

Come Funziona

• Rilevamento dei Link Esterni:
  La funzione di supporto checkIsExternalLink determina se un URL è esterno. I link esterni vengono lasciati invariati perché non necessitano di localizzazione.

• Recupero della Locale Corrente:
  L'hook useLocale fornisce la locale corrente (ad esempio, fr per il francese).

• Localizzazione dell'URL:
  Per i link interni (cioè non esterni), getLocalizedUrl viene utilizzato per aggiungere automaticamente il prefisso della locale corrente all'URL. Ciò significa che se l'utente è in francese, passando /about come href verrà trasformato in /fr/about.

• Restituzione del Link:
  Il componente restituisce un elemento <a> con l'URL localizzato, garantendo che la navigazione sia coerente con la locale.

Integrando questo componente Link in tutta la tua applicazione, mantieni un'esperienza utente coerente e consapevole della lingua, beneficiando anche di un miglioramento della SEO e dell'usabilità.

(Opzionale) Passo 12: Ottenere la locale corrente nelle Server Actions

Se hai bisogno della locale attiva all'interno di una Server Action (ad esempio, per localizzare email o eseguire logiche dipendenti dalla locale), chiama getLocale da next-intlayer/server:

"use server";import { getLocale } from "next-intlayer/server";export const myServerAction = async () => {  const locale = await getLocale();  // Fai qualcosa con la locale};

La funzione getLocale segue una strategia a cascata per determinare la locale dell'utente:

1. Prima, controlla gli header della richiesta per un valore di locale che potrebbe essere stato impostato dal proxy
2. Se non viene trovato alcun locale negli header, cerca un locale memorizzato nei cookie
3. Se non viene trovato alcun cookie, tenta di rilevare la lingua preferita dall'utente dalle impostazioni del browser
4. Come ultima risorsa, ricade sul locale predefinito configurato nell'applicazione

Questo garantisce che venga selezionato il locale più appropriato in base al contesto disponibile.

(Opzionale) Passo 13: Ottimizza la dimensione del tuo bundle

Quando si utilizza next-intlayer, i dizionari sono inclusi nel bundle per ogni pagina per impostazione predefinita. Per ottimizzare la dimensione del bundle, Intlayer fornisce un plugin SWC opzionale che sostituisce in modo intelligente le chiamate a useIntlayer utilizzando macro. Questo garantisce che i dizionari siano inclusi solo nei bundle delle pagine che li utilizzano effettivamente.

Per abilitare questa ottimizzazione, installa il pacchetto @intlayer/swc. Una volta installato, next-intlayer rileverà automaticamente e utilizzerà il plugin:

npm install @intlayer/swc --save-dev

Nota: Questa ottimizzazione è disponibile solo per Next.js 13 e versioni successive.

Nota: Questo pacchetto non è installato di default perché i plugin SWC sono ancora sperimentali su Next.js. Potrebbe cambiare in futuro.

Monitorare le modifiche ai dizionari con Turbopack

Quando si utilizza Turbopack come server di sviluppo con il comando next dev, le modifiche ai dizionari non vengono rilevate automaticamente di default.

Questa limitazione si verifica perché Turbopack non può eseguire i plugin webpack in parallelo per monitorare le modifiche nei file di contenuto. Per aggirare questo problema, è necessario utilizzare il comando intlayer watch per eseguire contemporaneamente sia il server di sviluppo che il watcher di build di Intlayer.

{  // ... Le tue configurazioni esistenti di package.json  "scripts": {    // ... Le tue configurazioni esistenti di script    "dev": "intlayer watch --with 'next dev'",  },}

Se stai usando next-intlayer@<=6.x.x, devi mantenere il flag --turbopack per far funzionare correttamente l'applicazione Next.js 16 con Turbopack. Consigliamo di utilizzare next-intlayer@>=7.x.x per evitare questa limitazione.

Configurare TypeScript

Intlayer utilizza l'augmentazione dei moduli per sfruttare i vantaggi di TypeScript e rendere il tuo codice più robusto.

Assicurati che la tua configurazione di TypeScript includa i tipi generati automaticamente.

{  // ... Le tue configurazioni TypeScript esistenti  "include": [    // ... Le tue configurazioni TypeScript esistenti    ".intlayer/**/*.ts", // Includi i tipi generati automaticamente  ],}

Configurazione Git

Si consiglia di ignorare i file generati da Intlayer. Questo ti permette di evitare di committarli nel tuo repository Git.

Per fare ciò, puoi aggiungere le seguenti istruzioni nel tuo file .gitignore:

# Ignora i file generati da Intlayer.intlayer

Estensione VS Code

Per migliorare la tua esperienza di sviluppo con Intlayer, puoi installare l'Estensione ufficiale Intlayer per VS Code.

Installa dal Marketplace di VS Code

Questa estensione offre:

• Completamento automatico per le chiavi di traduzione.
• Rilevamento errori in tempo reale per traduzioni mancanti.
• Anteprime inline del contenuto tradotto.
• Azioni rapide per creare e aggiornare facilmente le traduzioni.

Per maggiori dettagli su come utilizzare l'estensione, consulta la documentazione dell'estensione Intlayer per VS Code.

Andare oltre

Per andare oltre, puoi implementare l'editor visuale o esternalizzare i tuoi contenuti utilizzando il CMS.