Type Error with params in Dynamic Route in Next.js 15
Unanswered
Scale parasitoid posted this in #help-forum
Scale parasitoidOP
I'm using Next.js 15 with the App Router, and I have a dynamic route: app/blog/[slug]/page.tsx.
Everything works fine at runtime, but during build I get this type error from an auto-generated file:
This is strange because in my actual page.tsx, params is used like this:
So far everything is working — until the build fails due to .next/types/....
Everything works fine at runtime, but during build I get this type error from an auto-generated file:
.next/types/app/blog/[slug]/page.ts:34:29
Type error: Type '{ params: { slug: string; } }' does not satisfy the constraint 'PageProps'.
Types of property 'params' are incompatible.
Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
This is strange because in my actual page.tsx, params is used like this:
export default async function BlogPost({
params,
}: {
params: { slug: string };
}) {
const article = blogArticles.find((article) => article.slug === params.slug);
if (!article) {
notFound();
}
return (
<DefaultLayout>
<ArticleLayout
title={article.title}
date={article.date}
image={article.image}
duration={article.duration}
>
<ArticleBody slug={params.slug} />
</ArticleLayout>
</DefaultLayout>
);
}
export async function generateMetadata({
params,
}: {
params: { slug: string };
}): Promise<Metadata> {
...
}
So far everything is working — until the build fails due to .next/types/....
6 Replies
export default async function BlogPost({
params,
}: {
params: <{ slug: string }>;
}) {
// ...
}
export async function generateMetadata({
params,
}: {
params: <{ slug: string }>;
}): Promise<Metadata> {
// ...
}
- params: { slug: string };
+ params: Promise<{ slug: string }>;
Scale parasitoidOP
its giving me syntax error on
im in NextJS 15.
export default async function BlogPost({
params,
}: {
params: <{ slug: string }>;
}) {
im in NextJS 15.
@Scale parasitoid its giving me syntax error on
export default async function BlogPost({
params,
}: {
params: <{ slug: string }>;
}) {
im in NextJS 15.
oh sorry
Promise<{ slug: string }>
, dunno why i missed the Promise
parteither way it is a promise now, read the linked documentation page for more info