#Type Error with params in Dynamic Route in Next.js 15

1 messages · Page 1 of 1 (latest)

gilded garnet
#

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:

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/....

radiant starBOT
#
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)

rain flume
# 
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 }>;
gilded garnet
#

its giving me syntax error on

  params,
}: {
  params: <{ slug: string }>;
}) {```

im in NextJS 15.
rain flume