CODEWITHSUNDEEP
next.jsnext.js13
Aaron Marsden
Aaron Marsden

Reputation: 375

Nextjs 13 "not-found" isn't compatible with generateStaticParams?

I'm using Nextjs 13's "generateStaticParams" function to throw 404s on routes that don't match with a set of ids in data I'm getting from another function like so:

export async function generateStaticParams() {
  const posts = await PostsData();
  return posts.map((post) => ({
    postId: post.id,
  }));
}

I'm looking for a way to have a custom 404 page. It is to my understanding that, in order to have a custom 404 page, you need to create a "not-found.tsx" page, and import "notFound" from "next/navigation." You then need to call "notFound()" if you're unable to find an item that matches the id found in your page params.

However, this notFound() function only routes users to the custom 404 if I remove generateStaticParams(). If that function is still present, users are still routed to Nextjs 13's default 404 page.

Are these two functions incompatible? Am I unable to have a custom 404 page if I want to use generateStaticParams()? Any help is greatly appreciated here.

Upvotes: 2

Views: 2776

Answers (1)

Aaron Marsden
Aaron Marsden

Reputation: 375

Edit: See Maciej Wira's comment. This solution may not be entirely complete.

Figured out the answer shortly after. In order to prevent Nextjs from automatically generating pages even on routes that weren't statically generated, I was using:

export const dynamicParams = false;

Removing this line allows me to retain the SSG functionality on routes that exist, and calling notFound() allows me to route users to a custom 404 page defined by my content in not-found.tsx

Upvotes: 6

Related Questions