Next.js & Reader API — Dynamic routes missing on deployed site (Vercel)

[unkleho]

I'm trying Keystatic out for a new project and followed the Next JS tutorial. Not sure if this is a Vercel or Keystatic issue, but the reader doesn't return posts when deployed on Vercel when the page is a dynamic route (eg. [slug].tsx). Static routes work fine. Also everything works well locally.

// app/posts/[slug].tsx

const reader = createReader(process.cwd(), keystaticConfig);

export default async function PostPage(params) {
  const post = await reader.collections.posts.read(params.slug);
  // post is empty when deployed on Vercel!
  // but works fine locally

  return ...
}

Static page routes work fine:

// app/posts/static-post.tsx

const reader = createReader(process.cwd(), keystaticConfig);

export default async function PostPage() {
  const post = await reader.collections.posts.read('static-post')
  // No probs, post has data

  return ...
}

Using:

 "@keystatic/core": "^0.3.17"
 "@keystatic/next": "^3.0.0"
 "next": "14.1.0"

I've created a reproduction repo here: https://github.com/unkleho/nextjs-keystatic-test

The deployed site is here: https://nextjs-keystatic-test.vercel.app/

Any help on this would be great. Perhaps I've missed a step?
Thanks heaps for the cool project.

[simonswiss]

Hey!

Neither a Keystatic nor a Vercel issue — this is a result of building your Next.js site with static pages.

Whenever you want to have dynamic path segments (which you do), the HTML pages for each entry need to be generated at build time with generateStaticParams.

If you add this export to your [slug] route, the individual post pages will start working.

It's pretty easy to do with the Reader API, since all you need to export is an array of slugs, which you can get with reader.collections.myCollection.list().

Here's an example from the Keystatic docs website, to generate all static docs pages:

https://github.com/Thinkmill/keystatic/blob/main/docs/src/app/(public)/docs/%5B...slug%5D/page.tsx#L86-L92

Hope it helps!

[unkleho]

Thanks so much @simonswiss
Got it all working, including draft mode!

If anyone is interested this is a simple example: https://github.com/unkleho/nextjs-keystatic-test

[needim]

Is there any way to use Keystatic on Dynamic (server-rendered on demand) pages? (nextjs & vercel)

I tried to move content to static folder, it is now included on build output but still no luck.

[needim]

I have found a workaround on Netlify with;

[functions]
  included_files = ["static/content/**"]

Still no luck with Vercel. I tried vercel.json to setup similar setup but didn't work.