feat: Add async requestLocale param to getRequestConfig for Next.js 15 support#1383
Merged
feat: Add async requestLocale param to getRequestConfig for Next.js 15 support#1383
requestLocale param to getRequestConfig for Next.js 15 support#1383Conversation
…ions` can receive a locale
juanforlizzi
pushed a commit
to juanforlizzi/next-intl
that referenced
this pull request
Jan 16, 2025
…js 15 support (amannn#1383) Since [Next.js is switching `headers()` to be `async`](vercel/next.js#68812), the `locale` that is passed to `getRequestConfig` needs to be replaced by an awaitable alternative. Note that this is only relevant for your app in case you're using i18n routing. ## tldr; Switch to the new API and call it a day: ```diff export default getRequestConfig(async ({ - locale + requestLocale }) => { + const locale = await requestLocale; // ... }); ``` If your app worked well before, then this is a 1:1 switch and will get your app in shape for Next.js 15. ## Details The new `requestLocale` parameter also offered a chance to get in some enhancements for edge cases that were previously harder to support. Therefore, the following migration is generally recommended: **Before:** ```tsx import {notFound} from 'next/navigation'; import {getRequestConfig} from 'next-intl/server'; import {routing} from './routing'; export default getRequestConfig(async ({locale}) => { // Validate that the incoming `locale` parameter is valid if (!routing.locales.includes(locale as any)) notFound(); return { // ... }; }); ``` **After:** ```tsx filename="src/i18n/request.ts" import {getRequestConfig} from 'next-intl/server'; import {routing} from './routing'; export default getRequestConfig(async ({requestLocale}) => { // This typically corresponds to the `[locale]` segment let locale = await requestLocale; // Ensure that the incoming locale is valid if (!locale || !routing.locales.includes(locale as any)) { locale = routing.defaultLocale; } return { locale, // ... }; }); ``` The differences are: 1. `requestLocale` is a promise that needs to be awaited 2. The resolved value can be `undefined`—therefore a default should be supplied. The default assignment allows handling cases where an error would be thrown previously, e.g. when using APIs like `useTranslations` on a global language selection page at `app/page.tsx`. 3. The `locale` should be returned (since you can now adjust it in the function body). 4. We now recommend calling `notFound()` in response to an invalid `[locale]` param in [`app/[locale]/layout.tsx`](https://next-intl-docs-git-feat-async-request-locale-next-intl.vercel.app/docs/getting-started/app-router/with-i18n-routing#layout) instead of in `i18n/request.ts`. This unlocks another use case, where APIs like `useTranslations` can now be used on a global `app/not-found.tsx` page. See also the [updated getting started docs](https://next-intl-docs-git-feat-async-request-locale-next-intl.vercel.app/docs/getting-started/app-router/with-i18n-routing#i18n-request). Note that this change is non-breaking, but the synchronously available `locale` is now considered deprecated and will be removed in a future major version. Contributes to amannn#1375 Addresses amannn#1355
This file contains hidden or 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
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.
Since Next.js is switching
headers()to beasync, thelocalethat is passed togetRequestConfigneeds to be replaced by an awaitable alternative. Note that this is only relevant for your app in case you're using i18n routing.tldr;
Switch to the new API and call it a day:
export default getRequestConfig(async ({ - locale + requestLocale }) => { + const locale = await requestLocale; // ... });If your app worked well before, then this is a 1:1 switch and will get your app in shape for Next.js 15.
Details
The new
requestLocaleparameter also offered a chance to get in some enhancements for edge cases that were previously harder to support. Therefore, the following migration is generally recommended:Before:
After:
The differences are:
requestLocaleis a promise that needs to be awaitedundefined—therefore a default should be supplied. The default assignment allows handling cases where an error would be thrown previously, e.g. when using APIs likeuseTranslationson a global language selection page atapp/page.tsx.localeshould be returned (since you can now adjust it in the function body).notFound()in response to an invalid[locale]param inapp/[locale]/layout.tsxinstead of ini18n/request.ts. This unlocks another use case, where APIs likeuseTranslationscan now be used on a globalapp/not-found.tsxpage.See also the updated getting started docs.
Note that this change is non-breaking, but the synchronously available
localeis now considered deprecated and will be removed in a future major version.Contributes to #1375
Addresses #1355