Haz tu pregunta y obtén un resumen del documento referenciando esta página y el proveedor AI de tu elección
Al integrar el servidor MCP Intlayer a tu asistente de IA, puedes recuperar todos los documentos directamente desde ChatGPT, DeepSeek, Cursor, VSCode, etc.
Ver la documentación del servidor MCPEl contenido de esta página ha sido traducido con una IA.
Ver la última versión del contenido original en inglésSi tienes una idea para mejorar esta documentación, no dudes en contribuir enviando una pull request en GitHub.
Enlace de GitHub a la documentaciónCopiar el Markdown del documento a la portapapeles
Integración con Next.js: Documentación del Hook useIntlayer
El hook useIntlayer está diseñado para aplicaciones Next.js para obtener y gestionar contenido localizado de manera eficiente. Esta documentación se centrará en cómo utilizar el hook dentro de proyectos Next.js, asegurando prácticas adecuadas de localización.
Importando useIntlayer en Next.js
Dependiendo de si estás trabajando en componentes del lado del cliente o del lado del servidor en una aplicación Next.js, puedes importar el hook useIntlayer de la siguiente manera:
Componente del Cliente:
typescriptCopiar códigoCopiar el código al portapapeles
import { useIntlayer } from "next-intlayer"; // Usado en componentes del lado del cliente
Componente del Servidor:
tsxCopiar códigoCopiar el código al portapapeles
import { useIntlayer } from "next-intlayer/server"; // Usado en componentes del lado del servidor
Parámetros
- key: Un identificador de cadena para la clave del diccionario desde la cual deseas obtener contenido.
- locale (opcional): Un locale específico para usar. Si se omite, el hook usará por defecto el locale establecido en el contexto del cliente o servidor.
Archivos de Diccionario
Es crucial que todas las claves de contenido estén definidas dentro de archivos de declaración de contenido para evitar errores en tiempo de ejecución y garantizar la seguridad de tipos. Este enfoque también facilita la integración con TypeScript para la validación en tiempo de compilación.
Las instrucciones para configurar archivos de declaración de contenido están disponibles aquí.
Ejemplo de uso en Next.js
Aquí se muestra cómo puedes implementar el hook useIntlayer dentro de una página de Next.js para cargar dinámicamente contenido localizado según la configuración regional actual de la aplicación:
Copiar el código al portapapeles
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 el código al portapapeles
"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 el código al portapapeles
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> );};
Manejo de la Localización de Atributos
Para localizar atributos como alt, title, href, aria-label, etc., asegúrese de referenciar el contenido correctamente:
Copiar el código al portapapeles
<img src={content.image.src.value} alt={content.image.alt.value} />
Más Información
- Editor Visual de Intlayer: Aprende a usar el editor visual para una gestión de contenido más sencilla aquí.
Esta documentación describe el uso del hook useIntlayer específicamente en entornos Next.js, proporcionando una solución robusta para gestionar la localización en tus aplicaciones Next.js.
Historial de la Documentación
- 5.5.10 - 2025-06-29: Historial inicial