next-intl

The next-intl preset supports next-intl and use-intl.

Detection

The preset applies when the project depends on next-intl or use-intl.

import { nextIntl } from '@x18n/cli/presets'
import { defineConfig } from '@x18n/core'

export default defineConfig({
  presets: [nextIntl()],
})

Locale files

If your config has no resources, the preset uses messages/{locale}.json and src/messages/{locale}.json.

Supported syntax

useTranslations and getTranslations return a translate function. Their argument is a key prefix, which next-intl calls a namespace:

import { useTranslations } from 'next-intl'
import { getTranslations } from 'next-intl/server'

function Header() {
  const t = useTranslations('header')
  return <h1>{t('title')}</h1> // header.title
}

async function Page() {
  const t = await getTranslations({ namespace: 'pages.home' })
  return t.rich('intro', { b: chunks => <b>{chunks}</b> }) // pages.home.intro
}

t, t.rich, t.markup, t.raw and t.has are translate calls. getTranslations takes the prefix as a string, or as the namespace property of an object.

Placeholders

ICU MessageFormat: {name}, and plural, select and selectordinal arguments such as {count, plural, one {# item} other {# items}}. The invalid-syntax check reports unbalanced braces and a plural or select without an other case.

Extraction templates