Next.js 13 internationalization (i18n)

With the introduction of the App Router (opens in a new tab) (i.e. the app directory), Next.js 13 provides a new level of flexibility for React apps and new possibilities when it comes to internationalization (i18n).

There are two major changes that affect next-intl:

1. Next.js is removing their built-in internationalized routing, leaving the implementation of this up to the user. To fill in the gap, next-intl provides a drop-in middleware replacement for i18n routing, handling the locale negotiation, redirects, rewrites and cookies.
2. Next.js now supports React Server Components.

There are currently two ways how you can set your app up with next-intl in the app directory:

1. Deferring the usage of next-intl to Client Components (stable, recommended when you migrate)
2. Using next-intl in Server Components (beta)