jolly panther
I have these lines in my statically generated blog route
export const revalidate = 3600
export const dynamicParams = true
export async function generateStaticParams() {
const payload = await getPayload({ config })
const posts = await payload.find({
collection: 'posts',
})
return posts.docs.map((post) => ({
slug: post.slug,
}))
}```
I created a new blog post, but when I visit the route it just returns 404, how can I fix this
spring bayBOT
Hi @jolly panther. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the information provided in the knowledge sources, it appears that you're encountering an issue with Incremental Static Regeneration (ISR) and dynamic parameters in Next.js. Let's address your problem:
The issue you're experiencing is likely related to the behavior of generateStaticParams and dynamicParams in combination with revalidation. Here's what might be happening:
generateStaticParams function is generating static paths for existing blog posts at build time.dynamicParams = true, which should allow for generating new paths on demand.revalidate = 3600 for time-based revalidation.However, there's a known issue with on-demand revalidation and statically generated pages using generateStaticParams. According to the Github issue #63479, on-demand revalidation can sometimes remove statically generated pages, leading to 404 errors for previously generated paths.
To fix this issue, you can try the following approaches:
Remove generateStaticParams and rely solely on dynamic rendering:
This will cause all pages to be rendered on-demand, which might impact performance but will ensure new posts are always accessible.
Use dynamicParams = false instead of true:
This will prevent Next.js from attempting to generate new paths dynamically, but it will also mean that new blog posts won't be accessible until you rebuild the site.
revalidatePath or revalidateTag when you create a new blog post. This approach is described in the Next.js documentation on Incremental Static Regeneration.Here's an example of how you might implement on-demand revalidation:
'use server'
import { revalidatePath } from 'next/cache'
export async function createPost() {
// Your logic to create a new post
// ...
// Revalidate the /blog path
revalidatePath('/blog')
}
You would call this createPost function whenever you add a new blog post, which would trigger a revalidation of the blog pages.
It's worth noting that this issue seems to be less prevalent when deploying to Vercel, as mentioned in a comment on the Github issue.