NextJS params Bug?
Answered
Cinnamon posted this in #help-forum
CinnamonOP
The params thing is extremely buggy but why?
This is my error when running npm run dev:
This is my Code:
This is my error when running npm run dev:
A param property was accessed directly with `params.playerUUID`. `params` is now a Promise and should be unwrapped with `React.use()` before accessing properties of the underlying params object. In this version of Next.js direct access to param properties is still supported to facilitate migration but in a future version you will be required to unwrap `params` with `React.use()`.
It's a client component and if I use React.use():Property 'playerUUID' does not exist on type 'unknown'.
Argument of type '{ playerUUID: string; }' is not assignable to parameter of type 'Usable<unknown>'.
This is my Code:
// Props type for the page component, receiving params from Next.js dynamic routing
type PlayerPageProps = {
params: {
playerUUID: string;
};
};
export default function PlayerPage({ params }: PlayerPageProps) {
// Directly access playerUUID from params
const { playerUUID } = React.use(params);
Answered by Asian black bear
First of all, the params have to be a promise since Next 15 and second your page component should never be a client component.
8 Replies
CinnamonOP
I use NextJS 15
Asian black bear
First of all, the params have to be a promise since Next 15 and second your page component should never be a client component.
Answer
@Asian black bear First of all, the params have to be a promise since Next 15 and second your page component should never be a client component.
CinnamonOP
How do I make my param a promise and you mean I should split my whole page into small client side components so not the whole page is client side? But pretty much everything on the page is client side because there are 2 Button which let u switch between 2 Tables and a Table Row is clickable. That's pretty much the whole page so I don't know why I should make it a server component?
Asian black bear
By marking a page as a client component you opt out of pretty much all Next.js features. Metadata, static/dynamic optimization, caching etc.
Routing also becomes very inconsistent between pages that are server components and those that are client components.
In the worst case scenario if you TRULY think nothing can be a server component on your page you follow the explanation here: https://nextjs-faq.com/metadata-client-components
Regarding the point about the params, the signature of those is
params: Promise<{ ... }>
instead of params: { ... }
.