Next.js Discord

Discord Forum

next15 and async params

Answered
Polar bear posted this in #help-forum
Open in Discord
Avatar
Polar bearOP
So I just want to make sure that I understand it and I am doing the right thing.

In the past you could get the params in a client component without wrapping it in a promise
"use client";
export default function MyPage({ params }: { params: { name: string } }) {...}


But now that it is async I am not allowed to make my client component async so I must seperate it into a client component and a server component wrapper
"use client";
export default function MyClientComponent({name}: {name: string}){(client logic....)}

//server component wrapper
export default function MyPage({ params }: { params: Promise<{ name: string }> }) {
  return <>
      <MyClientComponent name={name}/>
  </>
}

It seems to me like a bit of a hassle for a feature I don't even need..
In addition I saw that next15 has a grace period where I don't need to wrap params in a Promise#Unknown Channel but when I try to build my code I get an error because I didn't wrap it in a promise.
Would really appreciate input on what's is the correct way to handle this (maybe I am just lazy, but in my mind the entire reason for using frameworks is to make our lifes easier)
Answered by Asian black bear
A page was never meant to be a client component in the first place since you opt out of many features.
View full answer

18 Replies

Avatar
Asian black bear
A page was never meant to be a client component in the first place since you opt out of many features.
Answer
Avatar
Asian black bear
That pattern you discovered with the wrapper is the way to go if for some reason your page needs to be a client component in its entirety.
And if you end up with all your pages behaving like this chances are you should evaluate whether Next is even the right tool.
Regarding the use of promises in client-side pages, I think use(params) should work, but I haven't tested it myself.
Avatar
Polar bearOP
I forgot about use (it never seemed useful in the past) I'll try it out later.
While I do find it is pretty common for me to have client pages, I do think next is the right tool and I am just not using it right.
I currently need to build a standalone dashboard app and from what i've seen online and the docs next should be able to handle it well
But I am also not that experienced in using it and all of it's features
Avatar
Asian black bear
There is pretty much no reason to keep a page a client component really. You can compose as necessary and move the boundary further down.
You lose out on all the RSC features and minor things like metadata or static generation.
Avatar
Polar bearOP
Yeah, you are right
I am still in the early stages, so I thought I can just start with making things work
And in the future refactor and make things right
But as I said above, next didn't even let me* compile without the Promise params
Avatar
Asian black bear
Because it's required. The "workaround" is designed for cases where you don't want to migrate just yet, but it requires explicit type assertions and is basically useless.
Just doing it right from the start is easier in the long run.
And it doesn't hurt adding a line that says const params = await props.params
Avatar
Polar bearOP
No, it doesn't, I think I am just lazy.
I need to rethink my approach so I can leverage next properly.
Thanks for the help, you helped me get my head straight.