Server & Client Components

Messages from i18n/request.ts are available via useTranslations to components that execute on the server side.

If we want to use translations in async components, we can use getTranslations instead:

This function can also be used in other async functions, like generateMetadata:

Additionally, by wrapping our app in NextIntlClientProvider, we can allow Client Components to access translations via useTranslations:

Note that NextIntlClientProvider inherits configuration that is returned from i18n/request.ts automatically when it's rendered from a Server Component—there's no need to provide props.