Faça sua pergunta e obtenha um resumo do documento referenciando esta página e o provedor AI de sua escolha
Ao integrar o servidor MCP Intlayer ao seu assistente de IA, você pode recuperar todos os documentos diretamente de ChatGPT, DeepSeek, Cursor, VSCode, etc.
Ver a documentação do servidor MCPO conteúdo desta página foi traduzido com uma IA.
Veja a última versão do conteúdo original em inglêsSe 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çãoCopiar o Markdown do documento para a área de transferência
Integração com Next.js: Documentação do Hook useIntlayer
O hook useIntlayer é projetado para aplicações Next.js para buscar e gerenciar conteúdo localizado de forma eficiente. Esta documentação focará em como utilizar o hook dentro de projetos Next.js, garantindo práticas adequadas de localização.
Importando useIntlayer no Next.js
Dependendo se você está trabalhando em componentes do lado do cliente ou do lado do servidor em uma aplicação Next.js, você pode importar o hook useIntlayer da seguinte forma:
Componente Cliente:
typescriptCopiar códigoCopiar o código para a área de transferência
import { useIntlayer } from "next-intlayer"; // Usado em componentes do lado do cliente
Componente Servidor:
tsxCopiar códigoCopiar o código para a área de transferência
import { useIntlayer } from "next-intlayer/server"; // Usado em componentes do lado do servidor
Parâmetros
- key: Um identificador string para a chave do dicionário da qual você deseja recuperar o conteúdo.
- locale (opcional): Um locale específico para usar. Se omitido, o hook utiliza o locale definido no contexto do cliente ou servidor.
Arquivos de Dicionário
É crucial que todas as chaves de conteúdo estejam definidas dentro dos arquivos de declaração de conteúdo para evitar erros em tempo de execução e garantir a segurança de tipos. Essa abordagem também facilita a integração com TypeScript para validação em tempo de compilação.
Instruções para configurar arquivos de declaração de conteúdo estão disponíveis aqui.
Exemplo de Uso no Next.js
Veja como você pode implementar o hook useIntlayer dentro de uma página Next.js para carregar dinamicamente conteúdo localizado com base no locale atual da aplicação:
Copiar o código para a área de transferência
import { ClientComponentExample } from "@components/ClientComponentExample";import { ServerComponentExample } from "@components/ServerComponentExample";import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";import { useIntlayer, IntlayerServerProvider } from "next-intlayer/server";const HomePage: NextPageIntlayer = async ({ params }) => { const { locale } = await params; const content = useIntlayer("homepage", locale); return ( <> <p>{content.introduction}</p> <IntlayerClientProvider locale={locale}> <ClientComponentExample /> </IntlayerClientProvider> <IntlayerServerProvider locale={locale}> <ServerComponentExample /> </IntlayerServerProvider> </> );};
Copiar o código para a área de transferência
"use-client";import type { FC } from "react";import { useIntlayer } from "next-intlayer";const ClientComponentExample: FC = () => { const content = useIntlayer("component-content"); return ( <div> <h1>{content.title}</h1> <p>{content.description}</p> </div> );};
Copiar o código para a área de transferência
import type { FC } from "react";import { useIntlayer } from "next-intlayer/server";const ServerComponentExample: FC = () => { const content = useIntlayer("component-content"); return ( <div> <h1>{content.title}</h1> <p>{content.description}</p> </div> );};
Tratamento da Localização de Atributos
Para localizar atributos como alt, title, href, aria-label, etc., assegure-se de referenciar o conteúdo corretamente:
Copiar o código para a área de transferência
<img src={content.image.src.value} alt={content.image.alt.value} />
Mais Informações
- Editor Visual Intlayer: Aprenda a usar o editor visual para facilitar o gerenciamento de conteúdo aqui.
Esta documentação descreve o uso do hook useIntlayer especificamente em ambientes Next.js, fornecendo uma solução robusta para gerenciar a localização em suas aplicações Next.js.
Histórico da Documentação
- 5.5.10 - 2025-06-29: Histórico inicial