Next-Intl

https://next-intl.dev/docs
Admin
Next-Intl is an internationalization toolkit for Next.js that provides tools for rendering localized...
Tokens:76,291
Snippets:599
Trust Score:7.7
Update:1 day ago
Show doc for...
Tokens:
Raw
### Install @eloqnt/cli

Source: https://next-intl.dev/docs/workflows/messages

Install the @eloqnt/cli package as a dev dependency using npm.

```bash
npm install @eloqnt/cli --save-dev
```

--------------------------------

### Install next-intl

Source: https://next-intl.dev/docs/getting-started/app-router

Install the next-intl package using npm.

```bash
npm install next-intl
```

--------------------------------

### messages/en.json - Example with argument placeholder

Source: https://next-intl.dev/docs/workflows/typescript

Example JSON message file with a placeholder {firstName} to demonstrate type-safe arguments.

```json
{
  "UserProfile": {
    "title": "Hello {firstName}"
  }
}
```

--------------------------------

### AGENTS.md internationalization instructions

Source: https://next-intl.dev/docs/workflows/agents

Example instructions for AGENTS.md to guide AI agents when using useTranslations. It enforces conventions like using next-intl for all user-facing strings, matching keys to messages/en.json, and using ICU arguments.

```markdown
## Internationalization
 
- All user-facing strings are rendered with `useTranslations` from `next-intl`,
  never hardcoded in components.
- Each message referenced by `useTranslations` should match an entry in `messages/en.json`,
  other locales are handled by translators.
- Use descriptive, yet short, key names like `title` and `description` instead of repeating
  the current source string.
- Use ICU arguments instead of string concatenation to give translators the flexibility
  to change the order of words within a sentence.
- ...
```

--------------------------------

### File structure for next-intl setup

Source: https://next-intl.dev/docs/getting-started/app-router

The recommended file structure for a next-intl project, including messages, next.config.ts, and src directories.

```text
├── messages
│   ├── en.json
│   └── ...
├── next.config.ts
└── src
    ├── i18n
    │   └── request.ts
    └── app
        ├── layout.tsx
        └── page.tsx
```

--------------------------------

### next.config.js - Plugin setup (JavaScript)

Source: https://next-intl.dev/docs/getting-started/app-router

Configures the next-intl plugin in a JavaScript Next.js config file.

```javascript
const createNextIntlPlugin = require('next-intl/plugin');
 
const withNextIntl = createNextIntlPlugin();
 
/** @type {import('next').NextConfig} */
const nextConfig = {};
 
module.exports = withNextIntl(nextConfig);
```

--------------------------------

### Create middleware with createMiddleware and matcher config

Source: https://next-intl.dev/docs/routing/middleware

Example of creating the next-intl middleware in proxy.ts (formerly middleware.ts up until Next.js 16). The matcher excludes paths starting with /api, /trpc, /_next, /_vercel, and any path containing a dot.

```typescript
import createMiddleware from 'next-intl/middleware';
import {routing} from './i18n/routing';
 
export default createMiddleware(routing);
 
export const config = {
  // Match all pathnames except for
  // - … if they start with `/api`, `/trpc`, `/_next` or `/_vercel`
  // - … the ones containing a dot (e.g. `favicon.ico`)
  matcher: '/((?!api|trpc|_next|_vercel|.*\..*).*)'
};
```

--------------------------------

### JSON format message catalog example

Source: https://next-intl.dev/docs/usage/plugin

Shows the structure of a JSON message catalog when using the JSON format. This example uses a human-readable key 'greeting'.

```json
{
  "greeting": "Hello"
}
```

--------------------------------

### messages.json - Example messages file

Source: https://next-intl.dev/docs/workflows/typescript

Example JSON file containing messages with a nested structure. Used to demonstrate type-safe message keys.

```json
{
  "About": {
    "title": "Hello"
  }
}
```

--------------------------------

### next.config.ts - Plugin setup (TypeScript)

Source: https://next-intl.dev/docs/getting-started/app-router

Configures the next-intl plugin in a TypeScript Next.js config file.

```typescript
import {NextConfig} from 'next';
import createNextIntlPlugin from 'next-intl/plugin';
 
const nextConfig: NextConfig = {};
 
const withNextIntl = createNextIntlPlugin();
export default withNextIntl(nextConfig);
```

--------------------------------

### Example Open Graph image route URL

Source: https://next-intl.dev/docs/environments/actions-metadata-route-handlers

Next.js creates a public route based on the segment where opengraph-image.tsx is placed, as shown in this example URL.

```text
http://localhost:3000/en/opengraph-image?f87b2d56cee109c7
```

--------------------------------

### Example lint output

Source: https://next-intl.dev/docs/workflows/messages

Example output from the lint command showing missing ICU arguments and missing translations.

```text
messages/de.json
│
│  "XOBPYD": "1.000 Teams sind bereits live"
│            ─┬─────────────────────────────
│             ╰─ Missing ICU argument: {count} (inconsistent-args)
│
│  "mCBO12": "Sign up today"
│            ─┬─────────────
│             ╰─ Missing translation in de.json (missing-translation)
```

--------------------------------

### messages/en.json - English translations

Source: https://next-intl.dev/docs/getting-started/app-router

Example JSON file containing translations for the HomePage component.

```json
{
  "HomePage": {
    "title": "Hello world!"
  }
}
```

--------------------------------

### PO format message catalog example

Source: https://next-intl.dev/docs/usage/plugin

Shows the structure of a PO message catalog when using the PO format. The key is stored in msgctxt, the original source string in msgid, and optional descriptions and file references are supported.

```po
#. Advance to the next slide
#: src/components/Carousel.tsx
msgctxt "carousel.next"
msgid "Right"
msgstr "Rechts"
```

--------------------------------

### Basic usage of use-intl in React apps

Source: https://next-intl.dev/docs/environments/core-library

Shows how to use IntlProvider and useTranslations from 'use-intl' to set up internationalization in a React app. The messages can be fetched from anywhere, and the provider must be rendered with the messages and locale. The example demonstrates translating a message with a username parameter.

```jsx
import {IntlProvider, useTranslations} from 'use-intl';
 
// You can get the messages from anywhere you like. You can also
// fetch them from within a component and then render the provider
// along with your app once you have the messages.
const messages = {
  App: {
    hello: 'Hello {username}!'
  }
};
 
function Root() {
  return (
    <IntlProvider messages={messages} locale="en">
      <App user={{name: 'Jane'}} />
    </IntlProvider>
  );
}
 
function App({user}) {
  const t = useTranslations('App');
  return <h1>{t('hello', {username: user.name})}</h1>;
}
```

--------------------------------

### Type-safe message keys with useTranslations

Source: https://next-intl.dev/docs/workflows/typescript

Example of using useTranslations with a valid namespace and message key. Shows that unknown keys are flagged as errors.

```tsx
function About() {
  // ✅ Valid namespace
  const t = useTranslations('About');
 
  // ✖️ Unknown message key
  t('description');
 
  // ✅ Valid message key
  t('title');
}
```

--------------------------------

### en.json - CompanyStats messages

Source: https://next-intl.dev/docs/usage/translations

Example JSON file containing messages for the CompanyStats component, with keys for yearsOfService, happyClients, and partners.

```json
{
  "CompanyStats": {
    "yearsOfService": {
      "title": "Years of service",
      "value": "34"
    },
    "happyClients": {
      "title": "Happy clients",
      "value": "1.000+"
    },
    "partners": {
      "title": "Products",
      "value": "5.000+"
    }
  }
}
```

--------------------------------

### Routing configuration for revalidation example

Source: https://next-intl.dev/docs/routing/configuration

A minimal `defineRouting` configuration with locales `['en', 'de']` and a pathname mapping for `/news/[slug]`. Used to illustrate how to revalidate localized paths.

```typescript
import {defineRouting} from 'next-intl/routing';
 
export const routing = defineRouting({
  locales: ['en', 'de'],
  defaultLocale: 'en',
  pathnames: {
    '/news/[slug]': {
      en: '/news/[slug]',
      de: '/neuigkeiten/[slug]'
    }
  }
});
```

--------------------------------

### RootLayout providing all messages to client components

Source: https://next-intl.dev/docs/environments/server-client-components

Example of a root layout that wraps the app in NextIntlClientProvider without specifying messages, making all messages available to client components (default behavior).

```tsx
import {NextIntlClientProvider} from 'next-intl';
 
export default async function RootLayout(/* ... */) {
  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider>...</NextIntlClientProvider>
      </body>
    </html>
  );
}
```

--------------------------------

### NavigationLink (Active Link Component)

Source: https://next-intl.dev/docs/routing/navigation

Example of creating a navigation link component that detects active state using useSelectedLayoutSegment from Next.js.

```APIDOC
## NavigationLink (Active Link Component)

### Description
This example shows how to create a custom `NavigationLink` component that uses `useSelectedLayoutSegment` to detect if a link is active and applies appropriate styling and `aria-current` attribute.

### Usage
```tsx
'use client';

import {useSelectedLayoutSegment} from 'next/navigation';
import {ComponentProps} from 'react';
import {Link} from '@/i18n/navigation';

export default function NavigationLink({
  href,
  ...rest
}: ComponentProps<typeof Link>) {
  const selectedLayoutSegment = useSelectedLayoutSegment();
  const pathname = selectedLayoutSegment ? `/${selectedLayoutSegment}` : '/';
  const isActive = pathname === href;

  return (
    <Link
      aria-current={isActive ? 'page' : undefined}
      href={href}
      style={{fontWeight: isActive ? 'bold' : 'normal'}}
      {...rest}
    />
  );
}
```

### Example Usage
```jsx
<nav>
  <NavigationLink href="/">{t('home')}</NavigationLink>
  <NavigationLink href="/about">{t('about')}</NavigationLink>
  <NavigationLink href="/blog">{t('blog')}</NavigationLink>
</nav>
```
```

--------------------------------

### Pass selected messages to NextIntlClientProvider

Source: https://next-intl.dev/docs/usage/configuration

Example of using getMessages to read all messages and then passing a subset (e.g., only 'Navigation') to NextIntlClientProvider using lodash's pick.

```jsx
import {NextIntlClientProvider} from 'next-intl';
import {getMessages} from 'next-intl/server';
import pick from 'lodash/pick';
 
async function Component({children}) {
  // Read messages configured via `i18n/request.ts`
  const messages = await getMessages();
 
  return (
    <NextIntlClientProvider messages={pick(messages, ['Navigation'])}>
      ...
    </NextIntlClientProvider>
  );
}
```

--------------------------------

### Define localized pathnames with defineRouting

Source: https://next-intl.dev/docs/routing/configuration

Example routing configuration using `defineRouting` from 'next-intl/routing'. It maps internal paths to localized external paths, including static, dynamic, and catch-all segments. Non-ASCII characters are encoded automatically.

```typescript
import {defineRouting} from 'next-intl/routing';
 
export const routing = defineRouting({
  locales: ['en-US', 'en-UK', 'de'],
  defaultLocale: 'en-US',
 
  // The `pathnames` object holds pairs of internal and
  // external paths. Based on the locale, the external
  // paths are rewritten to the shared, internal ones.
  pathnames: {
    // If all locales use the same pathname, a single
    // external path can be used for all locales
    '/': '/',
    '/blog': '/blog',
 
    // If locales use different paths, you can
    // specify the relevant external pathnames
    '/services': {
      de: '/leistungen'
    },
 
    // Encoding of non-ASCII characters is handled
    // automatically where relevant
    '/about': {
      de: '/über-uns'
    },
 
    // Dynamic params are supported via square brackets
    '/news/[articleSlug]': {
      de: '/neuigkeiten/[articleSlug]'
    },
 
    // Static pathnames that overlap with dynamic segments
    // will be prioritized over the dynamic segment
    '/news/just-in': {
      de: '/neuigkeiten/aktuell'
    },
 
    // Also (optional) catch-all segments are supported
    '/categories/[...slug]': {
      de: '/kategorien/[...slug]'
    }
  }
});
```

--------------------------------

### Format plain numbers with useFormatter

Source: https://next-intl.dev/docs/usage/numbers

Use the useFormatter hook to format plain numbers. The example formats 499.9 as USD currency, rendering "$499.90". Options can be passed as the second argument, and global formats can be referenced by name.

```javascript
import {useFormatter} from 'next-intl';
 
function Component() {
  const format = useFormatter();
 
  // Renders "$499.90"
  format.number(499.9, {style: 'currency', currency: 'USD'});
}
```

--------------------------------

### Manifest file with explicit locale

Source: https://next-intl.dev/docs/environments/actions-metadata-route-handlers

Place this in app/manifest.ts. Since the manifest is outside the [locale] segment, provide a locale explicitly to getTranslations. The example uses 'en' and returns name, start_url, and theme_color.

```ts
import {MetadataRoute} from 'next';
import {getTranslations} from 'next-intl/server';
 
export default async function manifest(): Promise<MetadataRoute.Manifest> {
  // Pick a locale that is representative of the app
  const locale = 'en';
 
  const t = await getTranslations({
    namespace: 'Manifest',
    locale
  });
 
  return {
    name: t('name'),
    start_url: '/',
    theme_color: '#101E33'
  };
}
```

--------------------------------

### Manual precompilation with icu-minify/compile in i18n/request.ts

Source: https://next-intl.dev/docs/usage/plugin

Example of manually precompiling messages fetched at runtime. Uses icu-minify/compile to compile string values recursively. Ensure the icu-minify version matches the one next-intl depends on for compatibility.

```typescript
import compile from 'icu-minify/compile';
import {getRequestConfig} from 'next-intl/server';
 
type Messages = Record<string, unknown>;
 
function compileMessages(messages: Messages): Messages {
  return Object.fromEntries(
    Object.entries(messages).map(([key, value]) => {
      if (value && typeof value === 'object') {
        return [key, compileMessages(value as Messages)];
      }
 
      if (typeof value === 'string') {
        return [key, compile(value)];
      }
 
      throw new Error(`Unexpected message: ${typeof value}`);
    })
  );
}
 
export default getRequestConfig(async () => {
  const response = await fetch('https://cdn.example.com/messages/en.json');
  const messages = (await response.json()) as Messages;
  const compiled = compileMessages(messages);
 
  return {
    messages: compiled
    // ...
  };
});
```

--------------------------------

### Override localePrefix per domain (routing.ts)

Source: https://next-intl.dev/docs/routing/configuration

Shows how each domain can override the overall `localePrefix` setting. The `us.example.com` domain uses `never`, `ca.example.com` uses `always`, and `fr.example.com` uses the global `as-needed` setting. This example is an alternative to the previous one, not a continuation.

```TypeScript
import {defineRouting} from 'next-intl/routing';
 
export const routing = defineRouting({
  locales: ['en-US', 'en-CA', 'fr-CA', 'fr-FR'],
  defaultLocale: 'en-US',
  localePrefix: 'as-needed',
  domains: [
    {
      domain: 'us.example.com',
      defaultLocale: 'en-US',
      locales: ['en-US'],
      localePrefix: 'never'
    },
    {
      domain: 'ca.example.com',
      defaultLocale: 'en-CA',
      locales: ['en-CA', 'fr-CA'],
      localePrefix: 'always'
    },
    {
      domain: 'fr.example.com',
      defaultLocale: 'fr-FR',
      locales: ['fr-FR']
      // Uses the global setting
    }
  ]
});
```

--------------------------------

### Counter component wrapping ClientCounter with NextIntlClientProvider

Source: https://next-intl.dev/docs/environments/server-client-components

Example of a Counter component that uses useMessages to get messages and provides only the relevant 'ClientCounter' namespace to a client component via NextIntlClientProvider.

```tsx
import pick from 'lodash/pick';
import {NextIntlClientProvider, useMessages} from 'next-intl';
import ClientCounter from './ClientCounter';
 
export default function Counter() {
  // Receive messages provided in `i18n/request.ts` …
  const messages = useMessages();
 
  return (
    <NextIntlClientProvider
      messages={
        // … and provide the relevant messages
        pick(messages, 'ClientCounter')
      }
    >
      <ClientCounter />
    </NextIntlClientProvider>
  );
}
```

--------------------------------

### Set up navigation APIs in src/i18n/navigation.ts

Source: https://next-intl.dev/docs/routing/setup

Creates lightweight wrappers around Next.js navigation APIs that consider the routing configuration.

```typescript
import {createNavigation} from 'next-intl/navigation';
import {routing} from './routing';
 
// Lightweight wrappers around Next.js' navigation
// APIs that consider the routing configuration
export const {Link, redirect, usePathname, useRouter, getPathname} =
  createNavigation(routing);
```

--------------------------------

### Use global formats with displayName

Source: https://next-intl.dev/docs/usage/display-name

Shows how to reference a global format by passing a name as the second argument, and optionally override some options with a third argument. Requires global formats configured in the configuration.

```javascript
// Use a global format
format.displayName('US', 'region');
 
// Optionally override some options
format.displayName('US', 'region', {style: 'narrow'});
```

--------------------------------

### Run the lint command

Source: https://next-intl.dev/docs/workflows/messages

Command to run the linting process with @eloqnt/cli.

```bash
npx eloqnt lint
```

--------------------------------

### Enable messages.precompile in next-intl plugin config

Source: https://next-intl.dev/docs/usage/plugin

Configuration for createNextIntlPlugin to precompile messages during build. Set experimental.messages.precompile to true, with path and format options. Note: t.raw is not supported with precompiled messages.

```javascript
const withNextIntl = createNextIntlPlugin({
  experimental: {
    messages: {
      path: './messages',
      format: 'json',
      precompile: true
    }
    // ...
  }
});
```

--------------------------------

### app/page.tsx - Using useTranslations hook

Source: https://next-intl.dev/docs/getting-started/app-router

Example of using the useTranslations hook in a page component to access translations.

```typescript
import {useTranslations} from 'next-intl';
 
export default function HomePage() {
  const t = useTranslations('HomePage');
  return <h1>{t('title')}</h1>;
}
```

--------------------------------

### Using createTranslator and createFormatter in non-React apps

Source: https://next-intl.dev/docs/environments/core-library

Shows how to use the low-level functions createTranslator and createFormatter from 'use-intl/core' in any JavaScript environment. These functions receive all configuration directly and do not rely on global configuration. The example demonstrates translating a simple message, generating markup with the 'markup' function, and formatting a date.

```javascript
import {createTranslator, createFormatter} from 'use-intl/core';
 
const messages = {
  basic: 'Hello {name}!',
  rich: 'Hello <b>{name}</b>!'
};
 
// This creates the same function that is returned by `useTranslations`.
// Since there's no provider, you can pass all the properties you'd
// usually pass to the provider directly here.
const t = createTranslator({locale: 'en', messages});
 
// Result: "Hello world!"
t('basic', {name: 'world'});
 
// To generate HTML markup, you can consider using the `markup`
// function which in contrast to `t.rich` returns a markup string.
t.markup('rich', {
  name: 'world',
  b: (chunks) => `<b>${chunks}</b>`
});
 
// Creates the same object that is returned by `useFormatter`.
const format = createFormatter({locale: 'en'});
 
// Result: "Oct 17, 2022"
format.dateTime(new Date(2022, 9, 17), {dateStyle: 'medium'});
```

--------------------------------

### app/page.tsx - Using getTranslations in async component

Source: https://next-intl.dev/docs/getting-started/app-router

Example of using the awaitable getTranslations function in an async page component.

```typescript
import {getTranslations} from 'next-intl/server';
 
export default async function HomePage() {
  const t = await getTranslations('HomePage');
  return <h1>{t('title')}</h1>;
}
```

--------------------------------

### Use locale in app/[locale]/layout.tsx

Source: https://next-intl.dev/docs/routing/setup

Example of using useTranslations in a page component; the locale is automatically from i18n/request.ts.

```tsx
import {useTranslations} from 'next-intl';
 
export default function Page() {
  // ✅ Uses the locale from `i18n/request.ts`
  const t = useTranslations();
 
  // ...
}
```

--------------------------------

### Add .eloqnt/config.ts

Source: https://next-intl.dev/docs/workflows/messages

Configuration file for @eloqnt/cli, specifying source path, messages path, locales, source locale, and format.

```typescript
import {defineConfig} from '@eloqnt/cli';
 
export default defineConfig({
  srcPath: './src',
  messages: {
    path: './messages',
    locales: 'infer',
    sourceLocale: 'en',
    format: 'json'
  }
});
```

--------------------------------

### Use global formats with format.number

Source: https://next-intl.dev/docs/usage/numbers

Shows how to use a global format by name and optionally override some options. The first call uses the 'precise' format, the second uses 'price' with a currency override.

```javascript
// Use a global format
format.number(499.9, 'precise');
 
// Optionally override some options
format.number(499.9, 'price', {currency: 'USD'});
```

--------------------------------

### StyledLink (Composing Link with href prop)

Source: https://next-intl.dev/docs/routing/navigation

Example of composing the Link component with additional props using ComponentProps type.

```APIDOC
## StyledLink (Composing Link with href prop)

### Description
This example demonstrates how to create a wrapper component that accepts an `href` prop and forwards it to `Link`, while adding custom styling props. When using `pathnames`, the `href` prop is strictly typed.

### Usage
```tsx
import {ComponentProps} from 'react';
import {Link} from '@/i18n/navigation';

type Props = ComponentProps<typeof Link> & {
  color: 'blue' | 'red';
};

export default function StyledLink({color, href, ...rest}: Props) {
  return <Link href={href} style={{color}} {...rest} />;
}
```
```

--------------------------------

### Add NextIntlClientProvider in _app.tsx (multiple languages)

Source: https://next-intl.dev/docs/getting-started/pages-router

Sets up the NextIntlClientProvider with the current locale from the router, a timeZone, and messages from pageProps. This is required for multiple-language support.

```tsx
import {NextIntlClientProvider} from 'next-intl';
import {useRouter} from 'next/router';
 
export default function App({Component, pageProps}) {
  const router = useRouter();
 
  return (
    <NextIntlClientProvider
      locale={router.locale}
      timeZone="Europe/Vienna"
      messages={pageProps.messages}
    >
      <Component {...pageProps} />
    </NextIntlClientProvider>
  );
}
```

--------------------------------

### Access locale in Pages Router with useRouter

Source: https://next-intl.dev/docs/usage/configuration

Shows how to get the locale from the router in the Pages Router and pass it to NextIntlClientProvider in _app.tsx.

```tsx
import {useRouter} from 'next/router';
 
// ...
 
const router = useRouter();
 
return (
  <NextIntlClientProvider locale={router.locale}>
    ...
  </NextIntlClientProvider>;
);
```

--------------------------------

### Add NextIntlClientProvider in _app.tsx (single language)

Source: https://next-intl.dev/docs/getting-started/pages-router

Sets up the NextIntlClientProvider with a fixed locale 'en', a timeZone, and messages from pageProps. This is for single-language support.

```tsx
import {NextIntlClientProvider} from 'next-intl';
 
export default function App({Component, pageProps}) {
  return (
    <NextIntlClientProvider
      locale="en"
      timeZone="Europe/Vienna"
      messages={pageProps.messages}
    >
      <Component {...pageProps} />
    </NextIntlClientProvider>
  );
}
```

--------------------------------

### Set localePrefix to 'always' (default)

Source: https://next-intl.dev/docs/routing/configuration

Configures routing so that pathnames always start with the locale (e.g. /en/about). This is the default behavior.

```typescript
import {defineRouting} from 'next-intl/routing';
 
export const routing = defineRouting({
  // ...
  localePrefix: 'always'
});
```

--------------------------------

### Type-safe message arguments with useTranslations

Source: https://next-intl.dev/docs/workflows/typescript

Example of using useTranslations with a message that requires an argument. Shows that missing arguments are flagged as errors.

```tsx
function UserProfile({user}) {
  const t = useTranslations('UserProfile');
 
  // ✖️ Missing argument
  t('title');
 
  // ✅ Argument is provided
  t('title', {firstName: user.firstName});
}
```

--------------------------------

### Import precompiled messages with dynamic import

Source: https://next-intl.dev/docs/usage/plugin

Shows how to import messages so they are pre-processed by a Turbo- or Webpack loader when precompile is enabled. The comment indicates the import will be pre-processed.

```javascript
// ✅ Will be pre-processed by a Turbo- or Webpack loader
const messages = (await import(`../../messages/en.json`)).default;
```

--------------------------------

### useRouter for programmatic navigation

Source: https://next-intl.dev/docs/routing/navigation

Use useRouter from next-intl to navigate programmatically. It localizes the pathname based on the current locale. Supports query parameters and locale override. Requires 'use client' directive.

```tsx
'use client';
 
import {useRouter} from '@/i18n/navigation';
 
const router = useRouter();
 
// When the user is on `/en`, the router will navigate to `/en/about`
router.push('/about');
 
// Search params can be added via `query`
router.push({
  pathname: '/users',
  query: {sortBy: 'name'}
});
 
// You can override the `locale` to switch to another language
router.replace('/about', {locale: 'de'});
```

--------------------------------

### Access messages with useMessages and getMessages

Source: https://next-intl.dev/docs/usage/configuration

Shows how to read messages in regular components using useMessages and in async server components using getMessages.

```javascript
// Regular components
import {useMessages} from 'next-intl';
const messages = useMessages();
 
// Async Server Components
import {getMessages} from 'next-intl/server';
const messages = await getMessages();
```

--------------------------------

### Merging shared tags with component values

Source: https://next-intl.dev/docs/usage/translations

Example of combining shared tags from RichText with additional values from the component using the spread operator.

```javascript
function UserPage({username}) {
  const t = useTranslations('UserPage');
  return (
    <RichText>{(tags) => t.rich('description', {...tags, username})}</RichText>
  );
}
```

--------------------------------

### Using useFormatter with typed format names

Source: https://next-intl.dev/docs/workflows/typescript

Shows how to call format.dateTime, format.number, format.list, and format.displayName with valid format names. Unknown format strings like 'unknown' are flagged as errors when formats are typed.

```tsx
function Component() {
  const format = useFormatter();
 
  // ✖️ Unknown format string
  format.dateTime(new Date(), 'unknown');
 
  // ✅ Valid format
  format.dateTime(new Date(), 'short');
 
  // ✅ Valid format
  format.number(2, 'precise');
 
  // ✅ Valid format
  format.list(['HTML', 'CSS', 'JavaScript'], 'enumeration');
 
  // ✅ Valid format
  format.displayName('US', 'region');
}
```

--------------------------------

### useExtracted inline message example

Source: https://next-intl.dev/docs/usage/extraction

Use useExtracted to define inline messages without keys. The message is extracted and replaced with useTranslations during compilation.

```tsx
import {useExtracted} from 'next-intl';
 
function InlineMessages() {
  const t = useExtracted();
  return <h1>{t('Look ma, no keys!')}</h1>;
}
```

--------------------------------

### Select with underscore mapping in en.json

Source: https://next-intl.dev/docs/usage/translations

Select values must be alphanumeric and can contain underscores; dashes are not supported. This example maps locale identifiers with underscores.

```json
"label": "{locale, select, en_GB {British English} en_US {American English} other {Unknown}}"
```

--------------------------------

### Set srcPath for monorepo with multiple packages

Source: https://next-intl.dev/docs/usage/plugin

Specifies multiple relative paths to app source code in a monorepo setup. Required when extract is enabled.

```javascript
// Monorepo with multiple packages
srcPath: ['./src', '../ui'],
```

--------------------------------

### Pagination component using useTranslations

Source: https://next-intl.dev/docs/environments/server-client-components

Example of a Pagination component that uses the useTranslations hook to display translated messages with dynamic values for current page and total pages.

```tsx
function Pagination({curPage, totalPages}) {
  const t = useTranslations('Pagination');
  return <p>{t('info', {curPage, totalPages})}</p>;
}
```

--------------------------------

### Create navigation APIs with routing configuration

Source: https://next-intl.dev/docs/routing/navigation

Call createNavigation with your routing configuration to export Link, redirect, usePathname, useRouter, and getPathname. Typically placed in a central module like src/i18n/navigation.ts.

```typescript
import {createNavigation} from 'next-intl/navigation';
import {routing} from './routing';
 
export const {Link, redirect, usePathname, useRouter, getPathname} =
  createNavigation(routing);
```

--------------------------------

### getPathname: construct pathname for a locale

Source: https://next-intl.dev/docs/routing/navigation

Call getPathname from '@/i18n/navigation' to construct a pathname based on a locale. Returns '/en/about' for the first example. Search params can be added via query.

```javascript
import {getPathname} from '@/i18n/navigation';
 
// Will return `/en/about`
const pathname = getPathname({
  locale: 'en',
  href: '/about'
});
 
// Search params can be added via `query`
const pathname = getPathname({
  locale: 'en',
  href: {
    pathname: '/users',
    query: {sortBy: 'name'}
  }
});
```
Tokens:
Raw