feat!: next-intl@4
#1412
Draft
feat!: next-intl@4
#1412
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This reverts commit 47239f9.
…currently active pathname for localized pathnames
# Conflicts: # packages/next-intl/src/middleware/utils.test.tsx # packages/next-intl/src/shared/utils.test.tsx
…is rendered from a Server Component (#1191) This should ease the transition from Server to Client Components, as you don't have to manually pass this prop anymore. If you've previously passed this prop manually, you can remove this assignment now. If this is not desired (e.g. because you have a large `formats` object that you don't want to pass to the client side), you can manually opt-out via `formats={{}}` on `NextIntlClientProvider` in order to not provide any formats on the client side. **BREAKING CHANGE:** There's a very rare chance where this can break existing behavior. If you're rendering `NextIntlClientProvider` in a Server Component, you rely on static rendering, but you're not using `unstable_setRequestLocale` (i.e. you're using hooks like `useTranslations` exclusively in Client Components), this can opt your page into dynamic rendering. If this affects you, please provide the `formats` prop explicitly to `NextIntlClientProvider`.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
If you have nested providers, previously only the configuration of the innermost one would be applied. With this change, configuration is now passed from one provider to the next, while allowing to override individual props. **BREAKING CHANGE:** There's a very rare chance that this change affects your app, but in case you've previously relied on providers not inheriting from each other, you now have to reset props manually in case you want to retain the prev. behavior.
# Conflicts: # packages/next-intl/.size-limit.ts
…d for overriding the locale (#1625) **tldr;** — Do you use i18n routing and have you already switched to [`await requestLocale`](https://next-intl.dev/blog/next-intl-3-22#await-request-locale) in `getRequestConfig`? If yes, you can skip this. --- ### Deprecation of `locale` in favor of `await requestLocale` In [next-intl 3.22](https://next-intl.dev/blog/next-intl-3-22), the `locale` argument that was passed to `getRequestConfig` was deprecated in favor of [`await requestLocale`](https://next-intl.dev/blog/next-intl-3-22#await-request-locale): ```diff // i18n/request.ts export default function getRequestConfig(async ({ - locale + requestLocale }) => { + const locale = await requestLocale; // ... })); ``` This change was done in preparation for Next.js 15 where reading from headers [became async](https://nextjs.org/blog/next-15#async-request-apis-breaking-change). If you're using i18n routing, please upgrade to `requestLocale` now. ### Preview: `rootParams` are coming to Next.js Now, with [`rootParams`](vercel/next.js#72837) being on the horizon, this API will allow you to read a locale without receiving any param passed to `getRequestConfig`: ```tsx // i18n/request.ts import {unstable_rootParams as rootParams} from 'next/server'; import {getRequestConfig} from 'next-intl/server'; import {hasLocale} from 'next-intl'; import {routing} from './routing'; export default getRequestConfig(async () => { const params = await rootParams(); const locale = hasLocale(routing.locales, params.locale) ? params.locale : routing.defaultLocale; // ... }); ``` Among other simplifications, this allows to remove manual overrides like this that were merely done for enabling static rendering: ```diff - type Props = { - params: Promise<{locale: string}>; - }; export async function generateMetadata( - {params}: Props ) { - const {locale} = await params; - const t = await getTranslations({locale, namespace: 'HomePage'}); + const t = await getTranslations('HomePage'); // ... } ``` However, in some rare cases, you might want to render messages from multiple locales on the same page: ```tsx // Use messages from 'en', regardless of what the current user locale is const t = getTranslations({locale: 'en'}); ``` If you're using this pattern, you'll be able to accept the overridden locale in `getRequestConfig` as follows: ```tsx // i18n/request.ts import {unstable_rootParams as rootParams} from 'next/server'; import {getRequestConfig} from 'next-intl/server'; import {hasLocale} from 'next-intl'; import {routing} from './routing'; export default getRequestConfig(async ({locale}) => { // Use a locale based on these priorities: // 1. An override passed to the function // 2. A locale from the `[locale]` segment // 3. A default locale if (!locale) { const params = await rootParams(); locale = hasLocale(routing.locales, params.locale) ? params.locale : routing.defaultLocale; } // ... }); ``` This is quite an edge case, but this use case will remain supported via the re-introduced `locale` argument. Note that `await requestLocale` considers a potential locale override, therefore the `locale` argument will only be relevant once `rootParams` are a thing. I hope to have more to share on this in the future!
# Conflicts: # packages/next-intl/.size-limit.ts # packages/next-intl/src/react-client/useLocale.tsx # packages/next-intl/src/server/react-server/getConfig.tsx
Initially, I planned to add an expiration of 5 hours to the locale cookie for `next-intl@4` to comply with GDPR regulations. However, this has the implication that if the browser remains open for longer than 5 hours, the cookie can be reset in the middle of a session. Due to this, it seems more reasonable to not set an expiration at all, turning the cookie into a session cookie. Session cookies expiry only when a browser is closed. On mobile, this can be even more beneficial, as browsers are rarely closed (the browser can clear cookies though if memory is constrained).
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes
Locale#1495useMessages&getMessages#1489NextIntlClientProviderinstances are present #1413formatswhenNextIntlClientProvideris rendered from a Server Component #1191localeto be returned fromgetRequestConfig#1486localeCookie: falseis set #1487now={new Date()}fromNextIntlClientProviderfor usage withformat.relativeTime(preparation fordynamicIO) #1536NextIntlClientProviderfor usinguseLocaleon the client side (preparation fordynamicIO) #1541null,undefinedorbooleanas an ICU argument #1561typescriptversion to 5 for projects using TypeScript #1481localeargument forgetRequestConfigto be used for overriding the locale #1625TODO
rootParams#1619 (in case this becomes available and reliable)Related
Resolves #1153
Resolves #1452
Resolves #410
Resolves #779
Resolves #1464