Questa pagina ha un modello di applicazione disponibile.
Pose una domanda e ottieni un riassunto del documento facendo riferimento a questa pagina e al provider AI di tua scelta
Cronologia delle versioni
- "Aggiornare l'uso dell'API useIntlayer di Solid all'accesso diretto alle proprietà"v8.9.004/05/2026
- "Aggiungi comando init"v7.5.930/12/2025
- "Introduci validatePrefix e aggiungi il passaggio 14: Gestione delle pagine 404 con rotte localizzate."v7.4.011/12/2025
- "Aggiungi passaggio 13: Recupera la lingua locale nelle tue server action (Opzionale)"v7.3.905/12/2025
- "Aggiungi passaggio 13: Adatta Nitro"v7.2.318/11/2025
- "Risolto il prefisso predefinito aggiungendo la funzione getPrefix, l'uso di useLocalizedNavigate, LocaleSwitcher e LocalizedLink."v7.1.017/11/2025
- "Aggiorna doc"v6.5.203/10/2025
- "Aggiunto per TanStack Start"v5.8.109/09/2025
Il contenuto di questa pagina è stato tradotto con un'IA.
Vedi l'ultima versione del contenuto originale in ingleseSe hai un’idea per migliorare questa documentazione, non esitare a contribuire inviando una pull request su GitHub.
Collegamento GitHub alla documentazioneCopia il Markdown del documento nella porta-documenti
Traduci il tuo sito web TanStack Start usando Intlayer | Internazionalizzazione (i18n)
Sommario
Questa guida dimostra come integrare Intlayer per un'internazionalizzazione senza interruzioni nei progetti TanStack Start con routing consapevole della localizzazione, supporto TypeScript e pratiche di sviluppo moderne.
Cos'è Intlayer?
Intlayer è una libreria di internazionalizzazione (i18n) innovativa e open-source progettata per semplificare il supporto multilingue nelle moderne applicazioni web.
Con Intlayer, puoi:
- Gestire facilmente le traduzioni utilizzando dizionari dichiarativi a livello di componente.
- Localizzare dinamicamente metadati, rotte e contenuti.
- Garantire il supporto TypeScript con tipi generati automaticamente, migliorando l'autocompletamento e il rilevamento degli errori.
- Beneficiare di funzionalità avanzate, come il rilevamento e la commutazione dinamica della localizzazione.
- Abilitare il routing consapevole della localizzazione con il sistema di routing basato su file di TanStack Start.
Guida Passo-Passo per Configurare Intlayer in un'Applicazione TanStack Start
Vedi il Template dell'Applicazione su GitHub.
Passaggio 1: Creare il Progetto
Inizia creando un nuovo progetto TanStack Start seguendo la guida Avvia nuovo progetto sul sito web di TanStack Start.
Passaggio 2: Installare i Pacchetti Intlayer
Installa i pacchetti necessari utilizzando il tuo gestore di pacchetti preferito:
Copiare il codice nella clipboard
npm install intlayer react-intlayernpm install vite-intlayer --save-devnpx intlayer initintlayer
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.
react-intlayer Il pacchetto che integra Intlayer con l'applicazione React. Fornisce provider di contesto e hook per l'internazionalizzazione di React.
vite-intlayer Include il plugin Vite per l'integrazione di Intlayer con il bundler Vite, oltre al middleware per il rilevamento della localizzazione preferita dell'utente, la gestione dei cookie e la gestione del reindirizzamento degli URL.
Passaggio 3: Configurazione del tuo progetto
Crea un file di configurazione per configurare le lingue della tua applicazione:
Copiare il codice nella clipboard
import type { IntlayerConfig } from "intlayer";import { Locales } from "intlayer";const config: IntlayerConfig = { internationalization: { defaultLocale: Locales.ENGLISH, locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], },};export default config;Attraverso questo file di configurazione, puoi impostare URL localizzati, reindirizzamento middleware, 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, fai riferimento alla documentazione di configurazione.
Passaggio 4: Integrare Intlayer nella tua Configurazione Vite
Aggiungi il plugin intlayer nella tua configurazione:
Copiare il codice nella clipboard
import { tanstackStart } from "@tanstack/react-start/plugin/vite";import viteReact from "@vitejs/plugin-react";import { nitro } from "nitro/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";const config = defineConfig({ plugins: [ nitro(), intlayer(), tanstackStart({ router: { routeFileIgnorePattern: ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$", }, }), viteReact(), ],});export default config;Il plugin Vite intlayer() viene utilizzato per integrare Intlayer con Vite. Garantisce la creazione dei file di dichiarazione del contenuto e li monitora in modalità sviluppo. Definisce le variabili d'ambiente di Intlayer all'interno dell'applicazione Vite. Inoltre, fornisce alias per ottimizzare le prestazioni.
Passaggio 5: Creare il Layout Root
Configura il tuo layout root per supportare l'internazionalizzazione utilizzando useParams per rilevare la localizzazione corrente e impostando gli attributi lang e dir sul tag html.
Copiare il codice nella clipboard
import { createRootRouteWithContext, HeadContent, Scripts,} from "@tanstack/react-router";import { defaultLocale, getHTMLTextDir } from "intlayer";import { type ReactNode } from "react";import { IntlayerProvider } from "react-intlayer";import { Route as LocaleRoute } from "./{-$locale}/route";export const Route = createRootRouteWithContext<{}>()({ head: () => ({ meta: [ { charSet: "utf-8", }, { content: "width=device-width, initial-scale=1", name: "viewport", }, { title: "TanStack Start Starter", }, ], }), shellComponent: RootDocument,});function RootDocument({ children }: { children: ReactNode }) { const params = LocaleRoute.useParams(); const locale = params?.locale ?? defaultLocale; return ( <html dir={getHTMLTextDir(locale)} lang={locale}> <head> <HeadContent /> </head> <body> <IntlayerProvider locale={locale}>{children}</IntlayerProvider> <Scripts /> </body> </html> );}Se vuoi usare il tuo contenuto in un attributo di tipostring, comealt,title,href,aria-label, ecc., devi chiamare il valore della funzione, ad esempio:
htmlCopiare il codiceCopiare il codice nella clipboard
<img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />
Passaggio 6: Creare il Layout di Localizzazione
Crea un layout che gestisca il prefisso di localizzazione ed esegua la validazione.
Copiare il codice nella clipboard
import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";import { validatePrefix } from "intlayer";export const Route = createFileRoute("/{-$locale}")({ beforeLoad: ({ params }) => { const localeParam = params.locale; // Convalida il prefisso di localizzazione const { isValid, localePrefix } = validatePrefix(localeParam); if (!isValid) { throw redirect({ to: "/{-$locale}/404", params: { locale: localePrefix }, }); } }, component: Outlet,});Qui,{-$locale}è un parametro dinamico della rotta che viene sostituito con la localizzazione corrente. Questa notazione rende lo slot opzionale, permettendogli di funzionare con modalità di routing come'prefix-no-default'ecc.
Tieni presente che questo slot potrebbe causare problemi se utilizzi più segmenti dinamici nella stessa rotta (es.
/{-$locale}/other-path/$anotherDynamicPath/...). Per la modalità'prefix-all', potresti preferire passare allo slot$locale. Per la modalità'no-prefix'o'search-params', puoi rimuovere completamente lo slot.
Passaggio 7: Dichiarare il Tuo Contenuto
Crea e gestisci le tue dichiarazioni di contenuto per memorizzare le traduzioni:
Copiare il codice nella clipboard
import type { Dictionary } from "intlayer";import { t } from "intlayer";const appContent = { content: { links: { about: t({ en: "About", es: "Acerca de", fr: "À propos", }), home: t({ en: "Home", es: "Inicio", fr: "Accueil", }), }, meta: { title: t({ en: "Welcome to Intlayer + TanStack Router", es: "Bienvenido a Intlayer + TanStack Router", fr: "Bienvenue à Intlayer + TanStack Router", }), description: t({ en: "This is an example of using Intlayer with TanStack Router", es: "Este es un ejemplo de uso de Intlayer con TanStack Router", fr: "Ceci est un exemple d'utilisation d'Intlayer avec TanStack Router", }), }, }, key: "app",} satisfies Dictionary;export default appContent;Le tue dichiarazioni di contenuto possono essere definite ovunque nella tua applicazione purché siano incluse nella directorycontentDir(per impostazione predefinita,./app). E corrispondano all'estensione del file di dichiarazione del contenuto (per impostazione predefinita,.content.{json,ts,tsx,js,jsx,mjs,cjs}).
Per ulteriori dettagli, fai riferimento alla documentazione sulla dichiarazione dei contenuti.
Passaggio 8: Creare Componenti e Hook Consapevoli della Localizzazione
Crea un componente LocalizedLink per la navigazione consapevole della localizzazione:
Copiare il codice nella clipboard
import type { FC } from "react";import { Link, type LinkComponentProps } from "@tanstack/react-router";import { useLocale } from "react-intlayer";import { getPrefix } from "intlayer";export const LOCALE_ROUTE = "{-$locale}" as const;export type To = StripLocalePrefix<LinkComponentProps["to"]>;export type StripLocalePrefix<T extends string | undefined> = T extends | `/${typeof LOCALE_ROUTE}/` | `/${typeof LOCALE_ROUTE}` ? "/" : T extends `/${typeof LOCALE_ROUTE}/${infer Rest}` ? `/${Rest}` : T;type LocalizedLinkProps = { to?: To;} & Omit<LinkComponentProps, "to">;export const LocalizedLink: FC<LocalizedLinkProps> = (props) => { const { locale } = useLocale(); const { localePrefix } = getPrefix(locale); return ( <Link {...props} params={{ locale: localePrefix, ...(typeof props?.params === "object" ? props?.params : {}), }} to={`/${LOCALE_ROUTE}${props.to}` as LinkComponentProps["to"]} /> );};Questo componente ha due obiettivi:
- Rimuovere il prefisso
{-$locale}non necessario dall'URL. - Iniettare il parametro locale nell'URL per garantire che l'utente venga reindirizzato direttamente alla rotta localizzata.
Quindi possiamo creare un hook useLocalizedNavigate per la navigazione programmatica:
Copiare il codice nella clipboard
import { useNavigate } from "@tanstack/react-router";import { getPrefix } from "intlayer";import { useLocale } from "react-intlayer";import type { StripLocalePrefix } from "@/components/localized-link";import type { FileRouteTypes } from "@/routeTree.gen";type NavigateFn = ReturnType<typeof useNavigate>;type BaseNavigateOptions = Parameters<NavigateFn>[0];type LocalizedTo = StripLocalePrefix<FileRouteTypes["to"]>;export type LocalizedNavigateOptions = Omit< BaseNavigateOptions, "to" | "params"> & { to: LocalizedTo; params?: Omit<NonNullable<BaseNavigateOptions["params"]>, "locale">;};type LocalizedNavigate = ( options: LocalizedNavigateOptions) => ReturnType<NavigateFn>;export const useLocalizedNavigate = () => { const navigate = useNavigate(); const { locale } = useLocale(); const localizedNavigate: LocalizedNavigate = (args: any) => { const { localePrefix } = getPrefix(locale); if (typeof args === "string") { return navigate({ to: `/${LOCALE_ROUTE}${args}`, params: { locale: localePrefix }, }); } const { to, ...rest } = args; const localizedTo = `/${LOCALE_ROUTE}${to}` as any; return navigate({ to: localizedTo, params: { locale: localePrefix, ...rest } as any, }); }; return localizedNavigate;};Passaggio 9: Utilizzare Intlayer nelle tue Pagine
Accedi ai tuoi dizionari di contenuti in tutta l'applicazione:
Pagina Home Localizzata
Copiare il codice nella clipboard
import { createFileRoute } from "@tanstack/react-router";import { getIntlayer } from "intlayer";import { useIntlayer } from "react-intlayer";import LocaleSwitcher from "@/components/locale-switcher";import { LocalizedLink } from "@/components/localized-link";import { useLocalizedNavigate } from "@/hooks/useLocalizedNavigate";export const Route = createFileRoute("/{-$locale}/")({ component: RouteComponent,});function RouteComponent() { const content = useIntlayer("app"); const navigate = useLocalizedNavigate(); return ( <div> <div> {content.title} <LocaleSwitcher /> <div> <LocalizedLink to="/">{content.links.home}</LocalizedLink> <LocalizedLink to="/about">{content.links.about}</LocalizedLink> </div> <div> <button onClick={() => navigate({ to: "/" })}> {content.links.home} </button> <button onClick={() => navigate({ to: "/about" })}> {content.links.about} </button> </div> </div> </div> );}Per saperne di più sull'hook useIntlayer, consulta la documentazione.
Passaggio 10: Creare un Componente Locale Switcher
Crea un componente per consentire agli utenti di cambiare lingua:
Copiare il codice nella clipboard
import { useLocation } from "@tanstack/react-router";import { getHTMLTextDir, getLocaleName, getPathWithoutLocale, getPrefix, Locales,} from "intlayer";import type { FC } from "react";import { useLocale } from "react-intlayer";import { LocalizedLink, type To } from "./localized-link";export const LocaleSwitcher: FC = () => { const { pathname } = useLocation(); const { availableLocales, locale, setLocale } = useLocale(); const pathWithoutLocale = getPathWithoutLocale(pathname); return ( <ol> {availableLocales.map((localeEl) => ( <li key={localeEl}> <LocalizedLink aria-current={localeEl === locale ? "page" : undefined} onClick={() => setLocale(localeEl)} params={{ locale: getPrefix(localeEl).localePrefix }} to={pathWithoutLocale as To} > <span> {/* Localizzazione - es. FR */} {localeEl} </span> <span> {/* Lingua nella sua localizzazione - es. Français */} {getLocaleName(localeEl, locale)} </span> <span dir={getHTMLTextDir(localeEl)} lang={localeEl}> {/* Lingua nella localizzazione corrente - es. Francés con localizzazione corrente impostata su Locales.SPANISH */} {getLocaleName(localeEl)} </span> <span dir="ltr" lang={Locales.ENGLISH}> {/* Lingua in inglese - es. French */} {getLocaleName(localeEl, Locales.ENGLISH)} </span> </LocalizedLink> </li> ))} </ol> );};Per saperne di più sull'hook useLocale, consulta la documentazione.
Passaggio 11: Gestione degli Attributi HTML
Come visto nel Passaggio 5, puoi gestire gli attributi lang e dir del tag html utilizzando useParams nel tuo componente root. Questo assicura che gli attributi corretti siano impostati sia sul server che sul client.
Copiare il codice nella clipboard
function RootDocument({ children }: { children: ReactNode }) { const params = LocaleRoute.useParams(); const locale = params?.locale ?? defaultLocale; return ( <html dir={getHTMLTextDir(locale)} lang={locale}> {/* ... */} </html> );}Passaggio 12: Aggiungere middleware (Opzionale)
Puoi anche utilizzare intlayerProxy per aggiungere il routing lato server alla tua applicazione. Questo plugin rileverà automaticamente la localizzazione corrente in base all'URL e imposterà il cookie della localizzazione appropriato. Se non viene specificata alcuna localizzazione, il plugin determinerà la localizzazione più appropriata in base alle preferenze linguistiche del browser dell'utente. Se non viene rilevata alcuna localizzazione, reindirizzerà alla localizzazione predefinita.
Nota che per utilizzareintlayerProxyin produzione, è necessario spostare il pacchettovite-intlayerdadevDependenciesadependencies.
Copiare il codice nella clipboard
import { tanstackStart } from "@tanstack/react-start/plugin/vite";import viteReact from "@vitejs/plugin-react";import { nitro } from "nitro/vite";import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";export default defineConfig({ plugins: [ intlayerProxy(), // Il proxy deve essere posizionato prima del server se usi Nitro nitro(), intlayer(), tanstackStart({ router: { routeFileIgnorePattern: ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$", }, }), viteReact(), ],});Passaggio 13: Internazionalizzare i tuoi Metadati (Opzionale)
Puoi anche utilizzare l'hook getIntlayer per accedere ai tuoi dizionari di contenuti in tutta l'applicazione:
Copiare il codice nella clipboard
import { createFileRoute } from "@tanstack/react-router";import { getIntlayer } from "intlayer";export const Route = createFileRoute("/{-$locale}/")({ component: RouteComponent, head: ({ params }) => { const { locale } = params; const path = "/"; // The path for this route const metaContent = getIntlayer("app", locale); return { links: [ // Canonical link: Points to the current localized page { rel: "canonical", href: getLocalizedUrl(path, locale) }, // Hreflang: Tell Google about all localized versions ...localeMap(({ locale: mapLocale }) => ({ rel: "alternate", hrefLang: mapLocale, href: getLocalizedUrl(path, mapLocale), })), // x-default: For users in unmatched languages // Define the default fallback locale (usually your primary language) { rel: "alternate", hrefLang: "x-default", href: getLocalizedUrl(path, defaultLocale), }, ], meta: [ { title: metaContent.title }, { name: "description", content: metaContent.meta.description }, ], }; },});Passaggio 14: Recuperare la localizzazione nelle tue server action (Opzionale)
Potresti voler accedere alla localizzazione corrente dall'interno delle tue server action o degli endpoint API.
Puoi farlo utilizzando l'helper getLocale di intlayer.
Ecco un esempio che utilizza le server function di TanStack Start:
Copiare il codice nella clipboard
import { createServerFn } from "@tanstack/react-start";import { getRequestHeader, getRequestHeaders,} from "@tanstack/react-start/server";import { getCookie, getIntlayer, getLocale } from "intlayer";export const getLocaleServer = createServerFn().handler(async () => { const locale = await getLocale({ // Ottieni il cookie dalla richiesta (predefinito: 'INTLAYER_LOCALE') getCookie: (name) => { const cookieString = getRequestHeader("cookie"); return getCookie(name, cookieString); }, // Ottieni l'header dalla richiesta (predefinito: 'x-intlayer-locale') // Fallback utilizzando la negoziazione Accept-Language getHeader: (name) => getRequestHeader(name), }); // Recupera alcuni contenuti utilizzando getIntlayer() const content = getIntlayer("app", locale); return { locale, content };});Passaggio 15: Gestire le pagine non trovate (Opzionale)
Quando un utente visita una pagina non esistente, puoi visualizzare una pagina 404 personalizzata e il prefisso di localizzazione può influire sul modo in cui viene attivata la pagina non trovata.
Comprendere la Gestione 404 di TanStack Router con i Prefissi di Localizzazione
In TanStack Router, la gestione delle pagine 404 con rotte localizzate richiede un approccio a più livelli:
- Rotta 404 dedicata: Una rotta specifica per visualizzare l'interfaccia utente 404
- Validazione a livello di rotta: Convalida i prefissi di localizzazione e reindirizza quelli non validi al 404
- Rotta catch-all: Cattura qualsiasi percorso non corrispondente all'interno del segmento di localizzazione
Copiare il codice nella clipboard
import { createFileRoute } from "@tanstack/react-router";// Questo crea una rotta dedicata /[locale]/404// Viene utilizzata sia come rotta diretta che importata come componente in altri fileexport const Route = createFileRoute("/{-$locale}/404")({ component: NotFoundComponent,});// Esportata separatamente in modo che possa essere riutilizzata in notFoundComponent e nelle rotte catch-allexport function NotFoundComponent() { return ( <div> <h1>404</h1> </div> );}Copiare il codice nella clipboard
import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";import { validatePrefix } from "intlayer";import { NotFoundComponent } from "./404";export const Route = createFileRoute("/{-$locale}")({ // beforeLoad viene eseguito prima del rendering della rotta (sia sul server che sul client) // È il luogo ideale per convalidare il prefisso di localizzazione beforeLoad: ({ params }) => { const localeParam = params.locale; // validatePrefix controlla se la localizzazione è valida in base alla tua configurazione intlayer const { isValid, localePrefix } = validatePrefix(localeParam); if (!isValid) { // Prefisso di localizzazione non valido - reindirizza alla pagina 404 con un prefisso valido throw redirect({ to: "/{-$locale}/404", params: { locale: localePrefix }, }); } }, component: Outlet, // notFoundComponent viene chiamato quando una rotta figlia non esiste // es. /en/non-existent-page attiva questo all'interno del layout /en notFoundComponent: NotFoundComponent,});Copiare il codice nella clipboard
import { createFileRoute } from "@tanstack/react-router";import { NotFoundComponent } from "./404";// La rotta $ (splat/catch-all) corrisponde a qualsiasi percorso che non corrisponde ad altre rotte// es. /en/some/deeply/nested/invalid/path// Questo assicura che TUTTI i percorsi non corrispondenti all'interno di una localizzazione mostrino la pagina 404// Senza questo, i percorsi profondi non corrispondenti potrebbero mostrare una pagina vuota o un erroreexport const Route = createFileRoute("/{-$locale}/$")({ component: NotFoundComponent,});(Opzionale) Passaggio 15: Estrarre il contenuto dei tuoi componenti
Se hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.
Per facilitare questo processo, Intlayer propone un compilatore / estrattore per trasformare i tuoi componenti ed estrarre il contenuto.
Per configurarlo, puoi aggiungere una sezione compiler nel tuo file intlayer.config.ts:
Copiare il codice nella clipboard
import { type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
// ... Resto della tua configurazione
compiler: {
/**
* Indica se il compilatore deve essere abilitato.
*/
enabled: true,
/**
* Definisce il percorso dei file di output
*/
output: ({ fileName, extension }) => `./${fileName}${extension}`,
/**
* Indica se i componenti devono essere salvati dopo essere stati trasformati. In questo modo, il compilatore può essere eseguito solo una volta per trasformare l'app e poi rimosso.
*/
saveComponents: false,
/**
* Prefisso chiave dizionario
*/
dictionaryKeyPrefix: "",
},
};
export default config;Esegui l'estrattore per trasformare i tuoi componenti ed estrarre il contenuto
Copiare il codice nella clipboard
npx intlayer extractPassaggio 16: Generare una Sitemap (Opzionale)
Intlayer include un generatore di sitemap integrato per aiutarti a creare facilmente una sitemap per la tua applicazione. Gestisce i percorsi localizzati e aggiunge i metadati necessari per i motori di ricerca.
La sitemap generata da Intlayer supporta lo spazio dei nomixhtml:link(Hreflang XML Extensions). A differenza dei generatori di sitemap predefiniti che elencano solo URL grezzi, Intlayer crea automaticamente i collegamenti bidirezionali richiesti tra tutte le versioni linguistiche di una pagina (ad esempio,/about,/about?lang=fre/about?lang=es). Ciò garantisce che i motori di ricerca indicizzino e servano correttamente la versione linguistica corretta al pubblico giusto.
Per utilizzarlo, devi prima configurare il tuo file vite.config.ts per abilitare il pre-rendering per i tuoi percorsi localizzati e disabilitare la generazione predefinita della sitemap di TanStack Start.
Copiare il codice nella clipboard
import { localeFlatMap } from "intlayer";// ... altre importazioniexport const pathList = ["", "/about", "/404"];const localizedPages = localeFlatMap(({ urlPrefix }) => pathList.map((path) => ({ path: `${urlPrefix}${path}`, prerender: { enabled: true, }, })));export default defineConfig({ plugins: [ // ... altri plugin tanstackStart({ // ... altre configurazioni sitemap: { enabled: false, }, prerender: { enabled: true, crawlLinks: false, concurrency: 10, }, pages: localizedPages, }), ],});Quindi, crea un percorso src/routes/sitemap[.]xml.ts che utilizzi la funzione generateSitemap:
Copiare il codice nella clipboard
import { createFileRoute } from "@tanstack/react-router";import { generateSitemap } from "intlayer";const SITE_URL = ( import.meta.env.VITE_SITE_URL ?? "http://localhost:3000").replace(/\/$/, "");export const Route = createFileRoute("/sitemap.xml")({ server: { handlers: { GET: async () => { const sitemap = generateSitemap( [ { path: "/", changefreq: "daily", priority: 1.0 }, { path: "/about", changefreq: "monthly", priority: 0.8 }, ], { siteUrl: SITE_URL } ); return new Response(sitemap, { headers: { "Content-Type": "application/xml" }, }); }, }, },});Passaggio 17: Configurare TypeScript (Opzionale)
Intlayer utilizza l'augmentation dei moduli per ottenere i vantaggi di TypeScript e rendere il tuo codice più robusto.
Assicurati che la tua configurazione TypeScript includa i tipi generati automaticamente:
Copiare il codice nella clipboard
{ // ... le tue configurazioni esistenti include: [ // ... i tuoi include esistenti ".intlayer/**/*.ts", // Includi i tipi generati automaticamente ],}Configurazione Git
Si consiglia di ignorare i file generati da Intlayer. Ciò consente di evitare di commetterli nel repository Git.
Per farlo, puoi aggiungere le seguenti istruzioni al tuo file .gitignore:
Copiare il codice nella clipboard
# Ignora i file generati da Intlayer.intlayerEstensione VS Code
Per migliorare la tua esperienza di sviluppo con Intlayer, puoi installare l'estensione ufficiale Intlayer per VS Code.
Installa dal VS Code Marketplace
Questa estensione fornisce:
- Autocompletamento per le chiavi di traduzione.
- Rilevamento degli errori in tempo reale per le traduzioni mancanti.
- Anteprime inline del contenuto tradotto.
- Azioni rapide per creare e aggiornare facilmente le traduzioni.
Per ulteriori dettagli su come utilizzare l'estensione, consulta la documentazione dell'estensione Intlayer per VS Code.
Vai Oltre
Per approfondire, puoi implementare l'editor visuale o esternalizzare i tuoi contenuti utilizzando il CMS.