Only when preview mode is on, the newly added slug page can be seen.

[AruhaMaeda]

I want to ask whether this is a bug or something wrong setting.

Only when preview mode is on, the newly added slug page can be seen.
If I exit from preview mode, get 404.

• I deployed from Vercel template, and I added CORS setting to my sanity project. (I don't change any code. )

• video is below

Next.js.Blog.with.Sanity.io.Desk.-.13.February.2023.1.mp4

[choutkamartin]

Are you sure you set up the webhook that revalidates and triggers a page rebuild correctly? Webhooks also have an attempt log, that can show you if the revalidate function has been called correctly, and if not, what may be wrong.

[choutkamartin]

@AruhaMaeda Also, this may be a bad fallback setting.

Take a look at this:

// pages/posts//[slug].tsx
export const getStaticPaths = async () => {
  const slugs = await getAllPostsSlugs()

  return {
    paths: slugs?.map(({ slug }) => `/posts/${slug}`) || [],
    fallback: false,
  }
}

Do you see that fallback false? Well, that is probably the problem, because:

---

Sanity: Hey, Next.js, I changed some content, I sent you a request to revalidate some pages.

Next.js API: Let me take a look at which pages you want to revalidate. Oh, you want to revalidate articles too? Ok, I revalidated almost all articles except the new one, you have created. But that article wasn't generated at the build time so I can't revalidate it! It's fallback property is set to false, meaning if I can't find the page, I have to return 404 and don't generate it.

---

Yeah, so it's probably because of this. Setting it to "blocking" will probably help. You can find more information in Next.js documentation.

return {
    paths: slugs?.map(({ slug }) => `/posts/${slug}`) || [],
    fallback: "blocking",
  }

https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-false
https://stackoverflow.com/questions/67787456/what-is-the-difference-between-fallback-false-vs-true-vs-blocking-of-getstaticpa

[AruhaMaeda]

Thank you for your response!

As you said, I didn't set up revalidates so I did it but still did not reflect the changes correctly.

Finally, as you suggested, I changed fallback false to blocking, and it works! Thank you very much.

return {
    paths: slugs?.map(({ slug }) => `/posts/${slug}`) || [],
    fallback: "blocking",
  }

[choutkamartin]

@AruhaMaeda Glad you got it working! I opened a PR: #213

[maksimay]

@AruhaMaeda Also, this may be a bad fallback setting.

Take a look at this:

// pages/posts//[slug].tsx
export const getStaticPaths = async () => {
  const slugs = await getAllPostsSlugs()

  return {
    paths: slugs?.map(({ slug }) => `/posts/${slug}`) || [],
    fallback: false,
  }
}

Do you see that fallback false? Well, that is probably the problem, because:

Sanity: Hey, Next.js, I changed some content, I sent you a request to revalidate some pages.

Next.js API: Let me take a look at which pages you want to revalidate. Oh, you want to revalidate articles too? Ok, I revalidated almost all articles except the new one, you have created. But that article wasn't generated at the build time so I can't revalidate it! It's fallback property is set to false, meaning if I can't find the page, I have to return 404 and don't generate it.

Yeah, so it's probably because of this. Setting it to "blocking" will probably help. You can find more information in Next.js documentation.

return {
    paths: slugs?.map(({ slug }) => `/posts/${slug}`) || [],
    fallback: "blocking",
  }

https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-false https://stackoverflow.com/questions/67787456/what-is-the-difference-between-fallback-false-vs-true-vs-blocking-of-getstaticpa

thanks so much for this, had the same problem this fixed it