No posts show after following the Vercel Contentful example guide

[justinzalewski]

Hello, I've followed this guide exactly: https://github.com/vercel/next.js/tree/canary/examples/cms-contentful

And no posts show, either on localhost or after deploying to Vercel.

I've double-checked environment variables are set just as the guide specifies.

Any ideas what I can check?

Any help would be much appreciated! Thank you!

[icyJoseph]

A little bit of console logging might help. Place one in getStaticPaths and getStaticProps in pages/posts/[slug].js

export async function getStaticProps({ params, preview = false }) {
  const data = await getPostAndMorePosts(params.slug, preview)

  const ret =  {
    props: {
      preview,
      post: data?.post ?? null,
      morePosts: data?.morePosts ?? null,
    },
  }
 console.log('gSP',ret);
 return ret;
}

export async function getStaticPaths() {
  const allPosts = await getAllPostsWithSlug()
  const ret =  {
    paths: allPosts?.map(({ slug }) => `/posts/${slug}`) ?? [],
    fallback: true,
  }
  console.log("gSPaths", ret);
  return ret;
}

When running next build, locally, what do you see? Does it even log to anything?

[justinzalewski]

@icyJoseph yes to your four questions :)

Here's something that might be a clue…when I go to any URL other than the root localhost:3000, I get a 404.

For example, I go to localhost:3000/posts/[slug] (where [slug] is the slug of a post I published in contentful) and it's a 404.

When I do this, I get this in the terminal:
gSPaths { paths: [], fallback: true } gSPaths { paths: [], fallback: true } gSP { props: { preview: false, post: null, morePosts: null } }

So this makes me think it's an issue of not being correctly connected with Contentful.

However, I've double-checked that I'm using the API keys from here:

and I know that the space ID is correct, because it ran the setup correctly (automatically created the content models for me)

[icyJoseph]

Could it be that the secret key is incorrect?

CONTENTFUL_PREVIEW_SECRET should be any value you want. It must be URL friendly as the dashboard will send it as a query parameter to enable preview mode

• Could you make sure to have only alphanumeric characters on that secret?
• Do you see the posts in the landing page? locahost:3000 If so, I wonder if the issue are the slugs, maybe they have a character like åiöä´ or something that (I don't think this is it though, but worth checking out)

if gsPaths is returning empty lists for paths, then it is possible that allPosts returns undefined/null

export async function getAllPostsWithSlug() {
  const entries = await fetchGraphQL(
    `query {
      postCollection(where: { slug_exists: true }, order: date_DESC) {
        items {
          ${POST_GRAPHQL_FIELDS}
        }
      }
    }`
  )
  console.log({entries});
  return extractPostEntries(entries)
}

Try to go to lib/api.js and there place a log console.log({entries}) as shown above, what do you see there?

In the same file there's a function fetchGraphQL, control inside it that the env variables have the values you expect, simply log them (that is space_id, and the tokens).

[justinzalewski]

@icyJoseph thank you for the quick response!

After adding that console log, the terminal now says this when I go to the intended post URL:
{ entries: { errors: [ [Object] ] } } gSPaths { paths: [], fallback: true } { entries: { errors: [ [Object] ] } } gSPaths { paths: [], fallback: true } gSP { props: { preview: false, post: null, morePosts: null } }

This weekend, I'm going to try and restart from the guide from scratch (new Contentful space, new Vercel, new repo) and see if that changes anything.

I'll report back here and let you know how it goes.

[icyJoseph]

Awesome! It looks like it's an issue with the data on the Contentful database though. I think it'll work if you re-do it.

[justinzalewski]

@icyJoseph after restarting completely from scratch it works! No idea what the issue was the first time. Thanks for your help!

[justinzalewski]

Restarting completely from scratch fixed the issue, so marking this answered.