feat!: Require `NextIntlClientProvider` for using `useLocale` on the client side (preparation for `dynamicIO`)

tldr; — Do you already have a NextIntlClientProvider in your root layout that wraps all components? If yes, you can skip this.

Previously, useParams().locale was consulted when reading from useLocale() on the client side, allowing to use this API even when no NextIntlClientProvider is used.

This behavior has now been removed because:

Reading from useParams().locale doesn't apply if you're using an App Router setup without i18n routing.
Reading from useParams() might require additional work from the developer in the future to work with the upcoming dynamicIO rendering mode like adding 'use cache' or a <Suspense /> boundary.

Therefore, if you use any features from next-intl on the client side, you should now add a NextIntlClientProvider in the root layout and wrap all relevant components:

import {NextIntlClientProvider} from 'next-intl';

export default async function LocaleLayout(/* ... */) {
  // ...

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Note that also navigation APIs like Link rely on useLocale internally.

Name	Status	Preview	Comments	Updated (UTC)
next-intl-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 14, 2024 2:13pm
next-intl-example-app-router	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 14, 2024 2:13pm
next-intl-example-app-router-without-i18n-routing	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 14, 2024 2:13pm

amannn / next-intl

feat!: Require `NextIntlClientProvider` for using `useLocale` on the client side (preparation for `dynamicIO`) #1541