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: useLocale Hook Documentation for next-intlayer
This section offers detailed documentation on the useLocale hook tailored for Next.js applications within the next-intlayer library. It is designed to handle locale changes and routing efficiently.
Importing useLocale in Next.js
To utilise the useLocale hook in your Next.js application, import it as shown below:
Copy the code to the clipboard
import { useLocale } from "next-intlayer"; // Used for managing locales and routing in Next.js
Usage
Here’s how to implement the useLocale hook within a Next.js component:
Copy the code to the clipboard
"use client";import type { FC } from "react";import { Locales } from "intlayer";import { useLocale } from "next-intlayer";const LocaleSwitcher: FC = () => { const { locale, defaultLocale, availableLocales, setLocale } = useLocale(); return ( <div> <h1>Current Locale: {locale}</h1> <p>Default Locale: {defaultLocale}</p> <select value={locale} onChange={(e) => setLocale(e.target.value)}> {availableLocales.map((loc) => ( <option key={loc} value={loc}> {loc} </option> ))} </select> </div> );};
Parameters and Return Values
When you invoke the useLocale hook, it returns an object containing the following properties:
- locale: The current locale as set in the React context.
- defaultLocale: The primary locale defined in the configuration.
- availableLocales: A list of all locales available as defined in the configuration.
- setLocale: A function to change the application's locale and update the URL accordingly. It manages prefix rules, deciding whether to add the locale to the path or not based on the configuration. Utilises useRouter from next/navigation for navigation functions such as push and refresh.
- pathWithoutLocale: A computed property that returns the path without the locale. It is useful for comparing URLs. For example, if the current locale is fr, and the URL is fr/my_path, the path without the locale is /my_path. Utilises usePathname from next/navigation to obtain the current path.
Conclusion
The useLocale hook from next-intlayer is an essential tool for managing locales in Next.js applications. It provides an integrated approach to adapting your application for multiple locales by seamlessly handling locale storage, state management, and URL modifications.
Doc History
- 5.5.10 - 2025-06-29: Init history