Creación:2026-01-21Última actualización:2026-01-21

    Paquete next-intlayer

    El paquete next-intlayer proporciona las herramientas necesarias para integrar Intlayer en aplicaciones Next.js. Soporta tanto el App Router como el Page Router, incluyendo middleware para el enrutamiento basado en la locale.

    Instalación

    npm install next-intlayer

    Exportaciones

    Middleware

    Import:

    import "next-intlayer/middleware";
    Función Descripción Documento relacionado
    intlayerMiddleware Middleware de Next.js para manejar el enrutamiento y las redirecciones basadas en locale. Detecta la locale a partir de cabeceras/cookies y redirige a la ruta correspondiente para esa locale. intlayerMiddleware

    Ayudantes de configuración

    Import:

    import "next-intlayer/server";
    Función Descripción Documento relacionado
    withIntlayer Ayudante asíncrono para envolver la configuración de Next.js, asegurando que los diccionarios de Intlayer estén preparados antes de la compilación. Prepara los archivos de contenido y configura plugins de webpack/SWC. -
    withIntlayerSync Ayudante síncrono para envolver la configuración de Next.js, ideal para configuraciones donde la asincronía no es posible/deseada. No prepara los diccionarios al iniciar el servidor. -

    Proveedores

    Importar:

    import "next-intlayer";

    o

    import "next-intlayer/server";
    Componente Descripción Doc relacionado
    IntlayerClientProvider Proveedor para componentes del lado del cliente en el App Router de Next.js. Envuelve a IntlayerProvider de react-intlayer. -
    IntlayerServerProvider Proveedor para componentes del lado del servidor en Next.js (App Router). Proporciona el contexto de locale en el servidor. -
    IntlayerServer Envoltorio del lado del servidor para contenido de Intlayer en el App Router. Asegura el manejo adecuado de locale en los Server Components. -
    HTMLProvider Proveedor para configuraciones de internacionalización relacionadas con HTML. Permite sobrescribir componentes para etiquetas HTML. -
    HTMLRenderer Renderiza contenido HTML con componentes personalizados. -
    MarkdownProvider Proveedor para el contexto de renderizado de Markdown. Permite sobrescribir componentes personalizados para elementos Markdown. -
    MarkdownRenderer Renderiza contenido Markdown con componentes personalizados. -

    Hooks (lado del cliente)

    Importar:

    import "next-intlayer";

    Reexporta la mayoría de los hooks desde react-intlayer.

    Hook Descripción Documento relacionado
    useIntlayer Hook del lado del cliente que selecciona un diccionario por su key y devuelve su contenido. Usa la locale del contexto si no se proporciona. useIntlayer
    useDictionary Hook que transforma un objeto diccionario y devuelve el contenido para la locale actual. Procesa las traducciones t(), enumeraciones, etc. useDictionary
    useDictionaryAsync Hook que maneja diccionarios asíncronos. Acepta un mapa de diccionarios basado en promesas y lo resuelve para la locale actual. -
    useDictionaryDynamic Hook que maneja diccionarios dinámicos cargados por clave. Usa React Suspense internamente para los estados de carga. -
    useLocale Hook del lado del cliente para obtener la locale actual y una función para cambiarla. Mejorado para Next.js App Router con soporte de navegación. useLocale
    useRewriteURL Hook del lado del cliente para gestionar reescrituras de URL. Actualiza automáticamente la URL si existe una regla de reescritura localizada más legible. useRewriteURL
    useLocalePageRouter Hook específico del Page Router de Next.js para la gestión de locales. Maneja redirecciones y recargas de página al cambiar el locale. -
    useI18n Hook que proporciona una función de traducción t() para acceder a contenido anidado por clave. Emula el patrón de i18next/next-intl. useI18n
    useIntl Hook que proporciona un objeto Intl vinculado a la locale. Inyecta automáticamente la locale actual y utiliza un caché optimizado. -
    useLoadDynamic Hook para cargar diccionarios dinámicos usando React Suspense. Acepta una key y una promise, y almacena en caché los resultados. -
    useHTMLRenderer Hook para obtener una función de renderizado de HTML preconfigurada. -
    useMarkdownRenderer Hook para obtener una función de renderizado de Markdown preconfigurada. -

    Funciones (lado del servidor)

    Importar:

    import "next-intlayer/server";
    Función Descripción Doc relacionado
    t Versión del lado del servidor de la función de traducción para Next.js App Router. Devuelve la traducción de contenido multilingüe para la locale del servidor. traducción
    getLocale Función auxiliar para extraer la locale actual de los headers y cookies de Next.js. Diseñada para Server Components, Server Actions o Route Handlers. -
    generateStaticParams Genera parámetros estáticos para las rutas dinámicas de Next.js basadas en los locales configurados. Devuelve un array de objetos locale para el pre-renderizado. -
    locale Función para obtener o establecer el locale en el contexto del servidor (App Router). Proporciona gestión de locales en Server Components. -

    Tipos

    Importar:

    import "next-intlayer";
    Tipo Descripción
    NextPageIntlayer Tipo para páginas de Next.js con soporte de Intlayer. Tipo genérico que incluye el parámetro locale.
    Next14PageIntlayer Tipo para páginas de Next.js 14 con soporte de Intlayer.
    Next15PageIntlayer Tipo para páginas de Next.js 15 con soporte de Intlayer.
    NextLayoutIntlayer Tipo para layouts de Next.js con soporte de Intlayer. Tipo genérico que incluye el parámetro locale.
    Next14LayoutIntlayer Tipo para layouts de Next.js 14 con soporte de Intlayer.
    Next15LayoutIntlayer Tipo para layouts de Next.js 15 con soporte de Intlayer.
    LocalParams Tipo para parámetros de ruta de Next.js con locale. Objeto con la propiedad locale.
    LocalPromiseParams Tipo para parámetros de ruta de Next.js con locale (versión asíncrona). Promise que resuelve a un objeto con la propiedad locale.
    ¿Por qué Intlayer?