What should the type of `props` for server component be?
Answered
Chinese softshell turtle posted this in #help-forum
Chinese softshell turtleOP
I found
AppProps in docs but it doesn't have paramsAnswered by joulev
just gonna put this here https://github.com/joulev/nextjs-route-types
40 Replies
is this app dir or pages dir?
I don't think
AppProps exists in app direxport default function Page({
params,
searchParams,
}: {
params: { slug: string };
searchParams?: { [key: string]: string | string[] | undefined };
}) {
return <h1>{searchParams?.greeting || "Hello!"}</h1>;
}^ this is how you should use it in server components
Chinese softshell turtleOP
app dir
yeah, app dir
Chinese softshell turtleOP
wait
so I can't just do
props: Somthingfails but i guess because it doesn't know im in dynamic route
you need to change
{slug: string} to the slug namein your case
{profile: string}just gonna put this here https://github.com/joulev/nextjs-route-types
Answer
Chinese softshell turtleOP
find it wild that next config uses
requireor i guess it doesn't have to
@joulev just gonna put this here https://github.com/joulev/nextjs-route-types
Chinese softshell turtleOP
fails
reload ts server
run npm run dev
Chinese softshell turtleOP
reloaded
the type is generated during npm run dev and npm run build
Chinese softshell turtleOP
oh reran
ok now it complains about param
oh wait
yea was thinking there was special case for dynamic route
but this is some function call
is it possible to get types on dynamic routes too?
yes? as you see above,
params.profile is a string as expectedyour code is complaining because
profilePublic.run is accepting something that a string is not compatibleChinese softshell turtleOP
ah true its my issue
ok sorry, thanks
export default async function Profile({ params }: PageProps) {is it really that next.js only passes params
i thought they would pass more things
example only extracts params
export type PageProps = {
params: Params;
searchParams: SearchParams;
};i guess there is also searchParams
yes there is