CODEWITHSUNDEEP
next.jsnext.js13sanitynextjs-dynamic-routingapp-router
Bhanwarlal Chaudhary
Bhanwarlal Chaudhary

Reputation: 452

Newly added blog page doesn't reflect in hosted NextJS Project

NextJs is used to render the blogs that are added on sanity.io

There was only one blog post on sanity and deployed NextJs on Vercel, hosted NextJs project rendered that single blog post, but when adding new blog to sanity, it doesn't reflect to NextJs - when running locally I works

For deployment used .next build generated with yarn build command also tried export

Things I tried to solve the problem

  1. Cache revalidation time based as well as on-demand
  2. Removed ajax request caching
  3. export const dynamic = 'force-dynamic'

Followed https://www.sanity.io/guides/nextjs-app-router-live-preview

Upvotes: 0

Views: 164

Answers (1)

Conner Murphy
Conner Murphy

Reputation: 59

Have you tried to pre-render the the blog paths using getStaticPaths()?

https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths


Where <cms_url> would be a path to your headless cms which would return an array of strings containing the unique slug/identifier to the blog.

export async function getStaticPaths() {

  const req = await fetch('<cms_url>');
  const res = await req.json();

  return {
    res.map(path => {
        return {
          params: {
            slug: path
          }
        }
    }),
    fallback: true
  }
}
 
export async function getStaticProps({ params }) {

  const url = `http://..../blog/${params.slug}`;
 
  const res = await fetch(url);
  const data = await res.json()
  return { props: { data } }
}

Hope this helps, I have a similar implementation on a few projects.

Upvotes: 1

Related Questions