Author:
    Aymeric PINEAU
    Creation:2026-01-21Last update:2026-01-21

    next-intlayer Package

    The next-intlayer package provides the necessary tools to integrate Intlayer into Next.js applications. It supports both the App Router and the Pages Router, including middleware for locale-based routing.

    Installation

    bash
    npm install next-intlayer

    Exports

    Middleware

    Import:

    tsx
    import "next-intlayer/middleware";
    FunctionDescriptionRelated documentation
    intlayerMiddlewareNext.js middleware to handle locale-based routing and redirects. Detects locale from headers/cookies and redirects to appropriate locale path.intlayerMiddleware

    Configuration Helpers

    Import:

    tsx
    import "next-intlayer/server";
    FunctionDescriptionRelated Doc
    withIntlayerAsynchronous helper to wrap Next.js configuration, ensuring Intlayer dictionaries are prepared before the build. Prepares content files and sets up webpack/SWC plugins.-
    withIntlayerSyncSynchronous helper to wrap Next.js configuration, ideal for configurations where asynchronous operations are not possible or not desired. Does not prepare dictionaries on server start.-

    Providers

    Import:

    tsx
    import "next-intlayer";

    or

    tsx
    import "next-intlayer/server";
    ComponentDescriptionRelated Doc
    IntlayerClientProviderProvider for client-side components in the Next.js App Router. Wraps IntlayerProvider from react-intlayer.-
    IntlayerServerProviderProvider for server-side components in the Next.js App Router. Provides the locale context on the server.-
    IntlayerServerServer-side wrapper for Intlayer content in the App Router. Ensures correct locale handling in Server Components.-

    Hooks (Client-side)

    Import:

    tsx
    import "next-intlayer";

    Re-exports most hooks from react-intlayer.

    HookDescriptionRelated documentation
    useIntlayerClient-side hook that selects a dictionary by its key and returns its content. Uses the locale from context if not provided.useIntlayer
    useDictionaryHook that transforms a dictionary object and returns the content for the current locale. Processes t() translations, enumerations, etc.useDictionary
    useDictionaryAsyncHook that handles asynchronous dictionaries. Accepts a promise-based dictionary map and resolves it for the current locale.-
    useDictionaryDynamicHook that handles dynamic dictionaries loaded by key. Uses React Suspense internally for loading states.-
    useLocaleClient-side hook to retrieve the current locale and a function to set it. Enhanced for the Next.js App Router with navigation support.useLocale
    usePathnameReturns the current pathname without the locale prefix and without locale query parameters.usePathname
    useRewriteURLClient-side hook to manage URL rewrites. Automatically updates the URL if a prettier localised rewrite rule exists.useRewriteURL
    useLocalePageRouterNext.js Page Router-specific hook for locale management. Handles redirections and page reloads when the locale changes.-
    useI18nHook that provides a translation function t() for accessing nested content by key. Mimics the i18next/next-intl pattern.useI18n
    useIntlHook that provides a locale-bound Intl object. Automatically injects the current locale and uses optimised caching.-
    useLoadDynamicHook to load dynamic dictionaries using React Suspense. Accepts a key and a promise, and caches results.-

    Functions (Server-side)

    Import:

    tsx
    import "next-intlayer/server";
    FunctionDescriptionRelated doc
    tServer-side version of the translation function for Next.js App Router. Returns the translation of multilingual content for the server locale.translation
    getLocaleHelper function to extract the current locale from Next.js headers and cookies. Intended for Server Components, Server Actions, or Route Handlers.-
    generateStaticParamsGenerates static parameters for Next.js dynamic routes based on configured locales. Returns an array of locale objects for pre-rendering.-
    localeFunction to get or set the locale in the server context (App Router). Provides locale management in Server Components.-

    Types

    Import:

    tsx
    import "next-intlayer";
    TypeDescription
    NextPageIntlayerType for Next.js pages with Intlayer support. Generic type that includes a locale parameter.
    Next14PageIntlayerType for Next.js 14 pages with Intlayer support.
    Next15PageIntlayerType for Next.js 15 pages with Intlayer support.
    NextLayoutIntlayerType for Next.js layouts with Intlayer support. Generic type that includes a locale parameter.
    Next14LayoutIntlayerType for Next.js 14 layouts with Intlayer support.
    Next15LayoutIntlayerType for Next.js 15 layouts with Intlayer support.
    LocalParamsType for Next.js route parameters with a locale. Object with a locale property.
    LocalPromiseParamsType for Next.js route parameters with a locale (asynchronous version). Promise that resolves to an object with a locale property.
    useRewriteURLintlayerMiddleware