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

HimalayanOP
Could it be that the page is only ever rendering dynamically?
Ray
which mean post-1 not get generated at build time
Answer
@Himalayan 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`.
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,
  }));
}
@Himalayan Yeah logs correctly
Ray
could you show the log?
@Ray could you show the log?
HimalayanOP
(post-1) is an example name by the way
Ray
no post-1 here
and no general
@Ray no post-1 here
HimalayanOP
You may be on to something, will take a closer look thank you
@Ray and no general
HimalayanOP
As a matter of fact none of those posts or categories should exist, was all updated.
So perhaps a caching issue
HimalayanOP
Yeah was cache, deleted .next and it's refreshed
@Ray what is getClient()?
HimalayanOP
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}`,
      },
    }),
  });
});
@Himalayan js 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}`, }, }), }); });
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