useLocale returns locale from path params instead of provider value in client components

[cbodin]

Description

useLocale will always return the locale path parameter in client components even though NextIntlClientProvider is configured with a hard-coded locale.

I cannot find anything related to this behaviour in the documentation so this should probably be documented and/or add an option to useLocale to retrieve the locale from the provider and not the path parameters for client components.

next-intl/packages/next-intl/src/react-client/useLocale.tsx

Lines 9 to 18 in 4369c76

	// The types aren't entirely correct here. Outside of Next.js
	// `useParams` can be called, but the return type is `null`.
	const params = useParams() as ReturnType<typeof useParams> | null;
	if (typeof params?.[LOCALE_SEGMENT_NAME] === 'string') {
	locale = params[LOCALE_SEGMENT_NAME];
	} else {
	// eslint-disable-next-line react-hooks/rules-of-hooks -- Reading from context conditionally is fine as long as we're in the render phase
	locale = useBaseLocale();
	}

Mandatory reproduction URL (CodeSandbox or GitHub repository)

https://codesandbox.io/p/devbox/next-intl-bug-template-app-forked-w4q7qq

Reproduction description

1. Open up the /_next/info page and view the resulting locales.
2. Open up the /en/info page and view the resulting locales.
3. Remove the notFound(); call in src/app/[locale]/layout.tsx.
4. Open up the /_next/info page and view the resulting locales.

Expected behaviour

The universal "useLocale" hook should return the expected locale configured in the provider in client components.
All displayed locales should be "en" in client components.

This ensures that components can be re-used in 404:s from _next/* paths.

[amannn]

Thank you so much for the great bug report!

I agree, this is indeed a bit confusing. #691 will fix this.

[cbodin]

Thanks @amannn, works perfectly now!