Internationalization of Metadata & Route Handlers in Next.js 13
There are a few places in Next.js apps where you might need to apply internationalization outside of React components:
- Page Metadata API (opens in a new tab)
- Metadata files (opens in a new tab)
- Route Handlers (opens in a new tab)
For these cases, you can use the core library from next-intl.
💡
If you're using the next-intl Server Components beta
version, you can use a
set of new APIs that automatically pick up your request configuration.
app/[locale]/layout.tsx
import {createTranslator} from 'next-intl';
export async function generateMetadata({params: {locale}}) {
const messages = (await import(`../../../messages/${locale}.json`)).default;
// You can use the core (non-React) APIs when you
// have to use next-intl outside of components.
const t = createTranslator({locale, messages});
return {
title: t('LocaleLayout.title')
};
}