47ng / nuqs

Type-safe search params state manager for React frameworks - Like useState, but stored in the URL query string.
https://nuqs.47ng.com
MIT License
4.86k stars 104 forks source link

withDefault not working on Next 15 server component #773

Closed FezVrasta closed 3 days ago

FezVrasta commented 3 days ago

Context

What's your version of nuqs?

2.2.1

What framework are you using?

Which version of your framework are you using?

next@npm:15.0.3

Description

I'm trying to upgrade my app from Next 14 to 15, but the following code starts failing:

const Page = async ({ searchParams }: Props) => {
 const { q: query, sport: sports } = createSearchParamsCache({
    q: parseAsString,
    sport: parseAsArrayOf<keyof typeof SPORTS>(
      parseAsStringEnum(Object.keys(SPORTS) as (keyof typeof SPORTS)[]),
    ).withDefault([]),
  }).parse(searchParams);

The sports variable ends up being undefined when no sport query parameters are set. On Next 14 it returns an empty array as expected.

Reproduction

N/A

franky47 commented 3 days ago

In Next.js 15, the searchParams page prop is a Promise (docs), you'll need to await it (at either side of the .parse function, both work):

const Page = async ({ searchParams }: Props) => {
 const { q: query, sport: sports } = await createSearchParamsCache({
    q: parseAsString,
    sport: parseAsArrayOf<keyof typeof SPORTS>(
      parseAsStringEnum(Object.keys(SPORTS) as (keyof typeof SPORTS)[]),
    ).withDefault([]),
  }).parse(searchParams);
FezVrasta commented 3 days ago

Ah good to know, thanks!