\n\n\n```\n\n \n \n\nWith `svelte-intlayer`, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:\n\n```svelte fileName=\"**/*.svelte\"\n\n\n

\n

{$content.welcomeMessage}

\n

\n```\n\n \n \n\nWith `preact-intlayer`, you can use translations in Preact components. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"preact\";\nimport { useIntlayer } from \"preact-intlayer\";\n\nconst MyComponent: FC = () => {\n const content = useIntlayer(\"multi_lang\");\n\n return (\n

\n

{content.welcomeMessage}

\n

\n );\n};\n\nexport default MyComponent;\n```\n\n \n \n\nWith `solid-intlayer`, you can use translations in SolidJS components. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { Component } from \"solid-js\";\nimport { useIntlayer } from \"solid-intlayer\";\n\nconst MyComponent: Component = () => {\n const content = useIntlayer(\"multi_lang\");\n\n return (\n

\n

{content.welcomeMessage}

\n

\n );\n};\n\nexport default MyComponent;\n```\n\n \n \n\nWith `angular-intlayer`, you can use translations in Angular components. Here's an example:\n\n```typescript fileName=\"app.component.ts\" codeFormat=\"typescript\"\nimport { Component } from \"@angular/core\";\nimport { useIntlayer } from \"angular-intlayer\";\n\n@Component({\n selector: \"app-my-component\",\n template: `\n

\n

{{ content().welcomeMessage }}

\n

\n `,\n})\nexport class MyComponent {\n content = useIntlayer(\"multi_lang\");\n}\n```\n\n \n \n\nWith `vanilla-intlayer`, you can use translations by subscribing to content changes. Here's an example:\n\n```typescript fileName=\"**/*.ts\" codeFormat={[\"typescript\", \"esm\"]}\nimport { installIntlayer, useIntlayer } from \"vanilla-intlayer\";\n\ninstallIntlayer();\n\nconst content = useIntlayer(\"multi_lang\").onChange((newContent) => {\n document.getElementById(\"welcome-message\")!.textContent = String(\n newContent.welcomeMessage\n );\n});\n\n// Initial render\ndocument.getElementById(\"welcome-message\")!.textContent = String(\n content.welcomeMessage\n);\n```\n\n \n\n\n## Oggetti di Contenuto Personalizzati\n\n`intlayer` supporta oggetti di contenuto personalizzati per la traduzione, permettendoti di definire strutture più complesse garantendo al contempo la sicurezza dei tipi. Ecco un esempio con un oggetto personalizzato:\n\n```typescript fileName=\"**/*.content.ts\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { t, type Dictionary } from \"intlayer\";\n\ninterface ICustomContent {\n title: string;\n content: string;\n}\n\nconst customContent = {\n key: \"custom_content\",\n content: {\n profileText: t({\n en: {\n title: \"Page Title\",\n content: \"Page Content\",\n },\n fr: {\n title: \"Titre de la Page\",\n content: \"Contenu de la Page\",\n },\n es: {\n title: \"Título de la Página\",\n content: \"Contenido de la Página\",\n },\n }),\n },\n} satisfies Dictionary;\n\nexport default customContent;\n```\n\n```json fileName=\"**/*.content.json\" contentDeclarationFormat=\"json\"\n{\n \"$schema\": \"https://intlayer.org/schema.json\",\n \"key\": \"custom_content\",\n \"content\": {\n \"profileText\": {\n \"nodeType\": \"translation\",\n \"translation\": {\n \"en\": {\n \"title\": \"Page Title\",\n \"content\": \"Contenuto della Pagina\"\n },\n \"fr\": {\n \"title\": \"Titre de la Page\",\n \"content\": \"Contenu de la Page\"\n },\n \"es\": {\n \"title\": \"Título de la Página\",\n \"content\": \"Contenido de la Página\"\n }\n }\n }\n }\n}\n```\n","description":"Scopri come dichiarare e utilizzare la traduzione nel tuo sito web multilingue. Segui i passaggi in questa documentazione online per configurare il tuo progetto in pochi minuti.","url":"https://intlayer.org/it/doc/concept/content/translation","datePublished":"2024-08-11","dateModified":"2025-06-29","version":"5.5.10","keywords":"Traduzione, Internazionalizzazione, Documentazione, Intlayer, Next.js, JavaScript, React","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Sviluppatori, Manager dei contenuti"}}

Autore:

Creazione:2024-08-11Ultimo aggiornamento:2025-06-29

Riferimento a questa documentazione al tuo assistente AI preferitoChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Pose una domanda e ottieni un riassunto del documento facendo riferimento a questa pagina e al provider AI di tua scelta

Questo documento non è aggiornato, la versione base è stata aggiornata il 23 agosto 2025.

Vai alla documentazione in inglese

Cronologia delle versioni

"Cronologia iniziale"
v5.5.1029/06/2025

Il contenuto di questa pagina è stato tradotto con un'IA.

Vedi l'ultima versione del contenuto originale in inglese

Modifica questa documentazione

Se hai un’idea per migliorare questa documentazione, non esitare a contribuire inviando una pull request su GitHub.

Collegamento GitHub alla documentazione

Copia

Copia il Markdown del documento nella porta-documenti

Traduzione

Definizione delle Traduzioni

La funzione t in intlayer ti permette di dichiarare contenuti in più lingue. Questa funzione garantisce la sicurezza dei tipi, generando un errore se mancano delle traduzioni, il che è particolarmente utile negli ambienti TypeScript.

Ecco un esempio di come dichiarare contenuti con traduzioni.

**/*.content.ts

Copiare il codice

Copiare il codice nella clipboard

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

interface Content {
  welcomeMessage: string;
}

export default {
  key: "multi_lang",
  content: {
    welcomeMessage: t({
      en: "Welcome to our application", // messaggio di benvenuto in inglese
      fr: "Bienvenue dans notre application", // messaggio di benvenuto in francese
      es: "Bienvenido a nuestra aplicación", // messaggio di benvenuto in spagnolo
    }),
  },
} satisfies Dictionary<Content>;

Configurazione delle Locali

Per garantire una corretta gestione delle traduzioni, puoi configurare le località accettate in intlayer.config.ts. Questa configurazione ti permette di definire le lingue supportate dalla tua applicazione:

intlayer.config.ts

Copiare il codice

Copiare il codice nella clipboard

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;

Utilizzo delle Traduzioni nei Componenti React

With react-intlayer, you can use translations in React components. Here's an example:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

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

const MyComponent: FC = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

This component fetches the corresponding translation based on the current locale set in your application.

With next-intlayer, you can use translations in React Server Components or Client Components. Here's an example in a Client Component:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

"use client";

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

const MyComponent: FC = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

With vue-intlayer, you can use translations in Vue components. Here's an example:

**/*.vue

Copiare il codice

Copiare il codice nella clipboard

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("multi_lang");</script><template><div>  <p>{{ content.welcomeMessage }}</p></div></template>

With svelte-intlayer, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:

**/*.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("multi_lang");</script><div><p>{$content.welcomeMessage}</p></div>

With preact-intlayer, you can use translations in Preact components. Here's an example:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

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

const MyComponent: FC = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

With solid-intlayer, you can use translations in SolidJS components. Here's an example:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const MyComponent: Component = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

With angular-intlayer, you can use translations in Angular components. Here's an example:

app.component.ts

Copiare il codice

Copiare il codice nella clipboard

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-my-component",template: `  <div>    <p>{{ content().welcomeMessage }}</p>  </div>`,})export class MyComponent {content = useIntlayer("multi_lang");}

With vanilla-intlayer, you can use translations by subscribing to content changes. Here's an example:

**/*.ts

Copiare il codice

Copiare il codice nella clipboard

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("multi_lang").onChange((newContent) => {
document.getElementById("welcome-message")!.textContent = String(
  newContent.welcomeMessage
);
});

// Initial render
document.getElementById("welcome-message")!.textContent = String(
content.welcomeMessage
);

Oggetti di Contenuto Personalizzati

intlayer supporta oggetti di contenuto personalizzati per la traduzione, permettendoti di definire strutture più complesse garantendo al contempo la sicurezza dei tipi. Ecco un esempio con un oggetto personalizzato:

**/*.content.ts

Copiare il codice

Copiare il codice nella clipboard

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

interface ICustomContent {
  title: string;
  content: string;
}

const customContent = {
  key: "custom_content",
  content: {
    profileText: t<ICustomContent>({
      en: {
        title: "Page Title",
        content: "Page Content",
      },
      fr: {
        title: "Titre de la Page",
        content: "Contenu de la Page",
      },
      es: {
        title: "Título de la Página",
        content: "Contenido de la Página",
      },
    }),
  },
} satisfies Dictionary;

export default customContent;

Dichiarazione dei contenuti Plurale