Next.js Discord

Discord Forum

Why am I getting a 404 with dynamic params on a generated page?

Answered
Himalayan posted this in #help-forum
Open in Discord
Avatar
HimalayanOP
Why am I getting a 404 when visiting /posts/general/post-1

app/posts/[category]/[slug]/page.tsx
export const dynamicParams = false;

export async function generateStaticParams() {
  const { data } = await getClient().query({
    query: PostSlugsDocument,
  });
  const { items } = data?.postSlugs || {};

  if (!items) {
    return [];
  }

  return items?.map(post => ({
    category: post?.category?.slug,
    slug: post?.slug,
  }));
}


The page works when dynamicParams is true, but 404's when false.
Answered by Ray
which mean post-1 not get generated at build time
View full answer

18 Replies

Avatar
HimalayanOP
Could it be that the page is only ever rendering dynamically?
Avatar
Ray
yes that's exactly what dynamicParams does
true (default): Dynamic segments not included in generateStaticParams are generated on demand.
false: Dynamic segments not included in generateStaticParams will return a 404.
Avatar
Ray
which mean post-1 not get generated at build time
Answer
Avatar
HimalayanOP
But the segment is included in generateStaticParams,
post-1 should have been generated
Avatar
Ray
export async function generateStaticParams() {
  const { data } = await getClient().query({
    query: PostSlugsDocument,
  });
  const { items } = data?.postSlugs || {};

  console.log(items) <-- see if you get the items

  if (!items) {
    return [];
  }

  return items?.map(post => ({
    category: post?.category?.slug,
    slug: post?.slug,
  }));
}
Avatar
HimalayanOP
Yeah logs correctly
Avatar
Ray
could you show the log?
Avatar
HimalayanOP
Image
(post-1) is an example name by the way
Avatar
Ray
no post-1 here
and no general
Avatar
HimalayanOP
You may be on to something, will take a closer look thank you
As a matter of fact none of those posts or categories should exist, was all updated.
So perhaps a caching issue
Avatar
Ray
what is getClient()?
Avatar
HimalayanOP
Yeah was cache, deleted .next and it's refreshed
export const { getClient } = registerApolloClient(() => {
  return new NextSSRApolloClient({
    cache: new NextSSRInMemoryCache(),
    link: new HttpLink({
      uri: `${CONTENTFUL_BASE_URL}${CONTENTFUL_SPACE_ID}`,
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${CONTENTFUL_DELIVERY_TOKEN}`,
      },
    }),
  });
});
Avatar
Ray
 const { data } = await getClient().query({
    query: PostSlugsDocument,
    context: {
      fetchOptions: {
         cache:'no-store'
      },
    },
  });

I think you can disable the data cache like this since you are building static page
Avatar
HimalayanOP
Good idea, thank you and thank you for your help