---
createdAt: 2025-08-23
updatedAt: 2026-09-27
priority: 5
title: useDictionary Hook Documentation | next-intlayer
description: "Use useDictionary in Next.js to interpret a dictionary object you declare yourself, with translations resolved for the current locale."
keywords:
  - useDictionary
  - dictionary
  - key
  - Intlayer
  - Internationalization
  - Documentation
  - Next.js
  - JavaScript
  - React
slugs:
  - doc
  - packages
  - next-intlayer
  - useDictionary
history:
  - version: 9.4.0
    date: 2026-08-22
    changes: "Update to Next.js >= 9.4.0 architecture"
  - version: 5.5.10
    date: 2025-06-29
    changes: "Init history"
author: aymericzip
---

# React Integration: `useDictionary` Hook Documentation

This section provides detailed guidance on using the `useDictionary` hook within React applications, enabling efficient handling of localized content without a visual editor.

## Importing `useDictionary` in React

The `useDictionary` hook can be integrated into React applications by importing it based on the context:

- **Client Component:**

  ```typescript codeFormat="typescript"
  import { useDictionary } from "next-intlayer"; // Used in client-side React components
  ```

  ```javascript codeFormat="esm"
  import { useDictionary } from "next-intlayer"; // Used in client-side React components
  ```

  ```javascript codeFormat="commonjs"
  const { useDictionary } = require("next-intlayer"); // Used in client-side React components
  ```

- **Server Component:**

  ```typescript codeFormat="typescript"
  import { useDictionary } from "next-intlayer/server"; // Used in server-side React components
  ```

  ```javascript codeFormat="esm"
  import { useDictionary } from "next-intlayer/server"; // Used in server-side React components
  ```

  ```javascript codeFormat="commonjs"
  const { useDictionary } = require("next-intlayer/server"); // Used in server-side React components
  ```

## Parameters

The hook accepts two parameters:

1. **`dictionary`**: A declared dictionary object containing localized content for specific keys.
2. **`locale`** (optional): The desired locale. Defaults to the current context's locale if not specified.

## Dictionary

All dictionary objects should be declared in structured content files to ensure type safety and prevent runtime errors. You can find the [setup instructions here](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md). Here's an example of content declaration:

```typescript fileName="component.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
import { t, type Dictionary } from "intlayer";

const exampleContent = {
  key: "component-example",
  content: {
    title: t({
      en: "Client Component Example",
      fr: "Exemple de composant client",
      es: "Ejemplo de componente cliente",
    }),
    content: t({
      en: "This is the content of a client component example",
      fr: "Ceci est le contenu d'un exemple de composant client",
      es: "Este es el contenido de un ejemplo de componente cliente",
    }),
  },
} satisfies Dictionary;

export default exampleContent;
```

- [Content Declaration Files (.content.ts)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)

## Example Usage in React Client Component

Below is an example of how to use the `useDictionary` hook in a React component:

```tsx fileName="ClientComponentExample.tsx" codeFormat={["typescript", "esm"]}
"use client";

import type { FC } from "react";
import { useDictionary } from "next-intlayer";
import clientComponentExampleContent from "./component.content";

const ClientComponentExample: FC = () => {
  const { title, content } = useDictionary(clientComponentExampleContent);

  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
};
```

## Example Usage in React Server Component

If you're using the `useDictionary` hook outside the `IntlayerProvider` (or `IntlayerServerProvider` for Intlayer < 9.4), the locale must be explicitly provided as a parameter when rendering the component:

```tsx fileName="ServerComponentExample.tsx" codeFormat={["typescript", "esm"]}
import type { FC } from "react";
import { useDictionary } from "next-intlayer/server";
import clientComponentExampleContent from "./component.content";

const ServerComponentExample: FC = () => {
  const { content } = useDictionary(clientComponentExampleContent);

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.content}</p>
    </div>
  );
};
```

## Notes on Attributes

Unlike integrations using visual editors, attributes like `buttonTitle.value` do not apply here. Instead, directly access the localized strings as declared in your content.

```jsx
<button title={content.title}>{content.content}</button>
```

## Additional Tips

- **Type Safety**: Always use `Dictionary` to define your dictionaries to ensure type safety.
- **Localization Updates**: When updating content, ensure all locales are consistent to avoid missing translations.

This documentation focuses on the integration of the `useDictionary` hook, providing a streamlined approach to managing localized content without relying on visual editor functionalities.