#Why params in page server route need to awaited?

17 messages · Page 1 of 1 (latest)

uncut path
#

I have a single page handle a fetching a data with a parameter, but it return error for the params id
Error: Route "/member/[memberid]" used should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
at Page (page.tsx:7:28)
at JSON.parse (<anonymous>)

Dynamic APIs are Asynchronous

Learn more about why accessing certain APIs synchronously now warns.

twilit dustBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

winged crescent
uncut path
#

Do you have docs for itm

#

Last time is i use 13 next version

winged crescent
digital quartz
#

@uncut path TL; DR - async calls are used by Next.js to determine if your route has dynamic content. Previously they had to keep a list of functions that will make the page dynamic. Now it is done simply by checking if some things are awaited, which makes it easier for Next.js devs to cover all possible dynamic content scenarios.

Since params dictate the result of rendered page, it got promisified to match the above rule.

uncut path
uncut path
uncut path
#

guys why i have error when build
app/(member)/member/[memberid]/[name]/@funfact/page.tsx
Type error: Type '{ params: { memberid: string; name: string; }; }' does not satisfy the constraint 'PageProps'.
Types of property 'params' are incompatible.
Type '{ memberid: string; name: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

#

with this
const id = (await params).memberid;
const galleryResponse = await GetGallery(id);

the problem if we dont do await for the id it will crash like before

winged crescent
#

your types

uncut path
#

isnt already string ?

dusk lily
#

You have two choices how to solve it.
Either you can solve it like this:

type LandingPageProps = {
  params: Promise<{
    slug: string;
    locale: string;
  }>;
};

export default async function LandingPage({ params }: LandingPageProps) {
  const { slug, locale } = await params;

...
}

Or you can set a custom middleware header in where you can access it in the server component directly.

digital quartz
#

@uncut path For clarity, this is what happens in the code above and what you need to do in your code:
Replace { params: { memberid: string; name: string; }; } with { params: Promise<{ memberid: string; name: string; }>; }

Sorry if you already understood the message above, but I think it's worth mentioning what part of the code above is actual solution. The example provided is with a good practice, which assignes the types of parameters to a named alias - this clears the component definition a lot and I suggest doing the same.

uncut path
#

guys thank you so much

#

i just found i have second request forgot to give promise