\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## Usando Aninhamento com React Intlayer\n\nPara usar conteúdo aninhado em um componente React, utilize o hook `useIntlayer` do pacote `react-intlayer`. Este hook recupera o conteúdo correto com base na chave especificada. Aqui está um exemplo de como usá-lo:\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 Conteúdo Aninhado Completo: {JSON.stringify(fullNestedContent)}\n {/* Saída: {\"content\": \"content\", \"subContent\": {\"contentNumber\": 0, \"contentString\": \"string\"}} */}\n

\n

\n Valor Aninhado Parcial: {partialNestedContent}\n {/* Saída: 0 */}\n

\n

\n );\n};\n\nexport default NestComponent;\n```\n\n## Recursos Adicionais\n\nPara mais informações detalhadas sobre configuração e uso, consulte os seguintes recursos:\n\n- [Documentação do CLI Intlayer](/pt/doc/concept/cli)\n- [Documentação do React Intlayer](/pt/doc/environment/create-react-app)\n- [Documentação do Next Intlayer](/pt/doc/environment/nextjs/15)\n\nEsses recursos fornecem mais detalhes sobre a configuração e o uso do Intlayer em diferentes ambientes e com vários frameworks.\n","description":"Descubra como usar o aninhamento de conteúdo no Intlayer para reutilizar e estruturar seu conteúdo multilíngue de forma eficiente. Siga esta documentação para implementar o aninhamento sem problemas no seu projeto.","url":"https://intlayer.org/pt/doc/concept/content/nesting","datePublished":"2025-02-07","dateModified":"2025-06-29","keywords":"Nesting, Reutilização de conteúdo, Documentação, Intlayer, Next.js, JavaScript, React","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Desenvolvedores, Gerentes de Conteúdo"}}

Autor:

Criação:2025-02-07Última atualização:2025-06-29

Referência esta documentação ao seu assistente AI favoritoChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Faça sua pergunta e obtenha um resumo do documento referenciando esta página e o provedor AI de sua escolha

O conteúdo desta página foi traduzido com uma IA.

Veja a última versão do conteúdo original em inglês

Editar esta documentação

Se você tiver uma ideia para melhorar esta documentação, sinta-se à vontade para contribuir enviando uma pull request no GitHub.

Link do GitHub para a documentação

Copiar

Copiar o Markdown do documento para a área de transferência

Aninhamento / Referência de Subconteúdo

Como Funciona o Aninhamento

No Intlayer, o aninhamento é realizado através da função nest, que permite referenciar e reutilizar conteúdo de outro dicionário. Em vez de duplicar conteúdo, você pode apontar para um módulo de conteúdo existente usando sua chave.

Configurando o Aninhamento

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

Copiar código

Copiar o código para a área de transferência

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

Copiar código

Copiar o código para a área de transferência

"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

Copiar código

Copiar o código para a área de transferência

<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

Copiar código

Copiar o código para a área de transferência

<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

Copiar código

Copiar o código para a área de transferência

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

Copiar código

Copiar o código para a área de transferência

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

Copiar código

Copiar o código para a área de transferência

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

Copiar código

Copiar o código para a área de transferência

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;

Usando Aninhamento com React Intlayer

Para usar conteúdo aninhado em um componente React, utilize o hook useIntlayer do pacote react-intlayer. Este hook recupera o conteúdo correto com base na chave especificada. Aqui está um exemplo de como usá-lo:

**/*.tsx

Copiar código

Copiar o código para a área de transferência

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>
        Conteúdo Aninhado Completo: {JSON.stringify(fullNestedContent)}
        {/* Saída: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
      </p>
      <p>
        Valor Aninhado Parcial: {partialNestedContent}
        {/* Saída: 0 */}
      </p>
    </div>
  );
};

export default NestComponent;

Recursos Adicionais

Para mais informações detalhadas sobre configuração e uso, consulte os seguintes recursos:

Esses recursos fornecem mais detalhes sobre a configuração e o uso do Intlayer em diferentes ambientes e com vários frameworks.

Arquivo Markdown