\n\n\n```\n\n \n \n\nTo use nested content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:\n\n```svelte fileName=\"**/*.svelte\"\n\n\n

\n

Full Nested Content: {JSON.stringify($content.fullNestedContent)}

\n

Partial Nested Value: {$content.partialNestedContent}

\n

\n```\n\n \n \n\nTo use nested content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"preact\";\nimport { useIntlayer } from \"preact-intlayer\";\n\nconst NestComponent: FC = () => {\n const { fullNestedContent, partialNestedContent } = useIntlayer(\n \"key_of_my_second_dictionary\"\n );\n\n return (\n

\n

Full Nested Content: {JSON.stringify(fullNestedContent)}

\n

Partial Nested Value: {partialNestedContent}

\n

\n );\n};\n\nexport default NestComponent;\n```\n\n \n \n\nTo use nested content in SolidJS components, retrieve it via the `useIntlayer` hook. 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 NestComponent: Component = () => {\n const { fullNestedContent, partialNestedContent } = useIntlayer(\n \"key_of_my_second_dictionary\"\n );\n\n return (\n

\n

Full Nested Content: {JSON.stringify(fullNestedContent)}

\n

Partial Nested Value: {partialNestedContent}

\n

\n );\n};\n\nexport default NestComponent;\n```\n\n \n \n\nTo use nested content in Angular components, retrieve it via the `useIntlayer` hook. 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-nest\",\n template: `\n

\n

\n Full Nested Content: {{ JSON.stringify(content().fullNestedContent) }}\n

\n

Partial Nested Value: {{ content().partialNestedContent }}

\n

\n `,\n})\nexport class NestComponent {\n content = useIntlayer(\"key_of_my_second_dictionary\");\n JSON = JSON;\n}\n```\n\n \n \n\nTo use nested content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"**/*.ts\" codeFormat={[\"typescript\", \"esm\"]}\nimport { installIntlayer, useIntlayer } from \"vanilla-intlayer\";\n\ninstallIntlayer();\n\nconst content = useIntlayer(\"key_of_my_second_dictionary\").onChange(\n (newContent) => {\n document.getElementById(\"nested\")!.textContent =\n newContent.partialNestedContent;\n }\n);\n\n// Initial render\ndocument.getElementById(\"nested\")!.textContent = content.partialNestedContent;\n```\n\n \n\n\n## Utilizzo dell'Annidamento con React Intlayer\n\nPer utilizzare contenuti annidati in un componente React, sfrutta il hook `useIntlayer` del pacchetto `react-intlayer`. Questo hook recupera il contenuto corretto in base alla chiave specificata. Ecco un esempio di come utilizzarlo:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"react\";\nimport { useIntlayer } from \"react-intlayer\";\n\nconst NestComponent: FC = () => {\n const { fullNestedContent, partialNestedContent } = useIntlayer(\n \"key_of_my_second_dictionary\"\n );\n\n return (\n

\n

\n Contenuto Annidato Completo: {JSON.stringify(fullNestedContent)}\n {/* Output: {\"content\": \"content\", \"subContent\": {\"contentNumber\": 0, \"contentString\": \"string\"}} */}\n

\n

\n Valore Annidato Parziale: {partialNestedContent}\n {/* Output: 0 */}\n

\n

\n );\n};\n\nexport default NestComponent;\n```\n\n## Risorse Aggiuntive\n\nPer informazioni più dettagliate sulla configurazione e sull'utilizzo, consulta le seguenti risorse:\n\n- [Documentazione CLI di Intlayer](/it/doc/concept/cli)\n- [Documentazione React Intlayer](/it/doc/environment/create-react-app)\n- [Documentazione Next Intlayer](/it/doc/environment/nextjs/15)\n\nQueste risorse forniscono ulteriori approfondimenti sulla configurazione e sull'utilizzo di Intlayer in diversi ambienti e con vari framework.\n","description":"Scopri come utilizzare l’annidamento dei contenuti in Intlayer per riutilizzare e strutturare il tuo contenuto multilingue in modo efficiente. Segui questa documentazione per implementare facilmente l’annidamento nel tuo progetto.","url":"https://intlayer.org/it/doc/concept/content/nesting","datePublished":"2025-02-07","dateModified":"2025-06-29","keywords":"Nesting, Riutilizzo del contenuto, 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:2025-02-07Ultimo 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

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

Annidamento / Riferimento a Contenuti Annidati

Come Funziona l'Annidamento

In Intlayer, l'annidamento viene realizzato tramite la funzione nest, che consente di fare riferimento e riutilizzare contenuti da un altro dizionario. Invece di duplicare i contenuti, è possibile puntare a un modulo di contenuto esistente tramite la sua chiave.

Configurazione dell'Annidamento

To use nested content in a React component, leverage the useIntlayer hook from the react-intlayer package. This hook retrieves the correct content based on the specified key. Here's an example of how to use it:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

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

const NestComponent: FC = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);

return (
  <div>
    <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

"use client";

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

const NestComponent: FC = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);

return (
  <div>
    <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in Vue components, retrieve it via the useIntlayer hook. Here's an example:

**/*.vue

Copiare il codice

Copiare il codice nella clipboard

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { fullNestedContent, partialNestedContent } = useIntlayer("key_of_my_second_dictionary");</script><template><div>  <p>Full Nested Content: {{ JSON.stringify(fullNestedContent) }}</p>  <p>Partial Nested Value: {{ partialNestedContent }}</p></div></template>

To use nested content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("key_of_my_second_dictionary");</script><div><p>Full Nested Content: {JSON.stringify($content.fullNestedContent)}</p><p>Partial Nested Value: {$content.partialNestedContent}</p></div>

To use nested content in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

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

const NestComponent: FC = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);

return (
  <div>
    <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in SolidJS components, retrieve it via the useIntlayer hook. 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 NestComponent: Component = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);

return (
  <div>
    <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

To use nested content in Angular components, retrieve it via the useIntlayer hook. 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-nest",template: `  <div>    <p>      Full Nested Content: {{ JSON.stringify(content().fullNestedContent) }}    </p>    <p>Partial Nested Value: {{ content().partialNestedContent }}</p>  </div>`,})export class NestComponent {content = useIntlayer("key_of_my_second_dictionary");JSON = JSON;}

To use nested content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

Copiare il codice

Copiare il codice nella clipboard

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

installIntlayer();

const content = useIntlayer("key_of_my_second_dictionary").onChange(
(newContent) => {
  document.getElementById("nested")!.textContent =
    newContent.partialNestedContent;
}
);

// Initial render
document.getElementById("nested")!.textContent = content.partialNestedContent;

Utilizzo dell'Annidamento con React Intlayer

Per utilizzare contenuti annidati in un componente React, sfrutta il hook useIntlayer del pacchetto react-intlayer. Questo hook recupera il contenuto corretto in base alla chiave specificata. Ecco un esempio di come utilizzarlo:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

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

const NestComponent: FC = () => {
  const { fullNestedContent, partialNestedContent } = useIntlayer(
    "key_of_my_second_dictionary"
  );

  return (
    <div>
      <p>
        Contenuto Annidato Completo: {JSON.stringify(fullNestedContent)}
        {/* Output: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
      </p>
      <p>
        Valore Annidato Parziale: {partialNestedContent}
        {/* Output: 0 */}
      </p>
    </div>
  );
};

export default NestComponent;

Risorse Aggiuntive

Per informazioni più dettagliate sulla configurazione e sull'utilizzo, consulta le seguenti risorse:

Queste risorse forniscono ulteriori approfondimenti sulla configurazione e sull'utilizzo di Intlayer in diversi ambienti e con vari framework.