Ask your question and get a summary of the document by referencing this page and the AI provider of your choice
By integrating the Intlayer MCP Server to your favourite AI assistant can retrieve all the doc directly from ChatGPT, DeepSeek, Cursor, VSCode, etc.
See MCP Server docThe content of this page was translated using an AI.
See the last version of the original content in EnglishIf you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy doc Markdown to clipboard
Next.js Integration: useIntlayer Hook Documentation
The useIntlayer hook is tailored for Next.js applications to fetch and manage localised content efficiently. This documentation will focus on how to utilise the hook within Next.js projects, ensuring proper localisation practices.
Importing useIntlayer in Next.js
Depending on whether you're working on client-side or server-side components in a Next.js application, you can import the useIntlayer hook as follows:
Client Component:
typescriptCopy codeCopy the code to the clipboard
import { useIntlayer } from "next-intlayer"; // Used in client-side components
Server Component:
tsxCopy codeCopy the code to the clipboard
import { useIntlayer } from "next-intlayer/server"; // Used in server-side components
Parameters
- key: A string identifier for the dictionary key from which you want to retrieve content.
- locale (optional): A specific locale to use. If omitted, the hook defaults to the locale set in the client or server context.
Dictionary Files
It is crucial that all content keys are defined within content declaration files to prevent runtime errors and ensure type safety. This approach also facilitates TypeScript integration for compile-time validation.
Instructions for setting up content declaration files are available here.
It's crucial that all content keys are defined within content declaration files to prevent runtime errors and ensure type safety. This approach also facilitates TypeScript integration for compile-time validation.
Instructions for setting up content declaration files are available here.
Example Usage in Next.js
Here's how you can implement the useIntlayer hook within a Next.js page to dynamically load localised content based on the application's current locale:
Copy the code to the clipboard
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> </> );};
Copy the code to the clipboard
"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> );};
Copy the code to the clipboard
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> );};
Handling Attribute Localisation
To localise attributes such as alt, title, href, aria-label, etc., ensure you reference the content correctly:
Copy the code to the clipboard
<img src={content.image.src.value} alt={content.image.alt.value} />
Further Information
- Intlayer Visual Editor: Learn how to use the visual editor for easier content management here.
This documentation outlines the use of the useIntlayer hook specifically within Next.js environments, providing a robust solution for managing localisation across your Next.js applications.
Doc History
- 5.5.10 - 2025-06-29: Init history