Next.js Discord

Discord Forum

GetStaticPaths Dynamic Page

Answered
Adewale posted this in #help-forum
Open in Discord
AdewaleOP
fetching blog data from Wordpress API, how do I made sure that after build, and a new content is added, I trigger a new build so the page can be added.

I would have set fallback: true but we are using next export for deployment.

How do I fix this issue? Thank you
Answered by Northeast Congo Lion
https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration
View full answer

61 Replies

Plott Hound
you would need to manually trigger a rebuild somehow.

this would involve making webhook in wordpress that triggers a build for your nextjs app when you publish or update a post.

then in the environment where your nextjs app is hosted you'd need to listen for this webhook and run a build when its received.
with a combination of this and revalidation (ISG), I was able to achieve the same result you are after
Plott Hound
this is a statically exported site
@Plott Hound this is a statically exported site
Northeast Congo Lion
still possible
i achieved it with our static site, you can use webhook sure, but we couldn't as Publish flow was being triggered so much by our authors.
so we got it working with combination of static params + revalidate
Plott Hound
cool, i didnt think we could do ISG with static
thanks for correcting me
Northeast Congo Lion
neither did i
but we got it haha
you can use both for sure
Plott Hound
thats awesome!
Northeast Congo Lion
if u want blog to be instantly shown up
but say ISG is 5mins
so in 5mins it will appear
Plott Hound
cool. mine is not static so i can use SSR while waiting for rebuild. anyway thanks for correcting me this is great to know
Northeast Congo Lion
no problem, happy coding x)
@Northeast Congo Lion you can actually use `generateStaticParams`
AdewaleOP
generateStaticParams seems to be for app router, I am currently working on pages router
https://nextjs.org/docs/app/api-reference/functions/generate-static-params go to the docs
toggle this option
select pages
get static paths is the equivalent
@Northeast Congo Lion get static paths is the equivalent
AdewaleOP
Yeah, I am using getStaticPaths, the issue is when new content are added using Wordpress, I need to manually trigger build which I don't want to...
Northeast Congo Lion
you can add a revalidate option
inside fetch
fetch(url, {
  next: {
    revalidate: <time_in_seconds>
  }
});
so if you have revalidate on your getStaticPaths fetch, it should work
AdewaleOP
hmmm, okay will try this
thank you
Northeast Congo Lion
no problem
with this approach, new articles will not be available
right away
@Northeast Congo Lion fetch(url, { next: { revalidate: <time_in_seconds> } });
AdewaleOP
next does not exist in type RequstInit

I believe the fetch you referred to here is the browser fetch API, right?
Northeast Congo Lion
yues
AdewaleOP
Okay, got this response, next does not exist in type RequstInit
type error
Answer
It is just revalidate
For pages router
No next object
Next: {} must be app router
AdewaleOP
Okay
It seems fallback: blocking should fix it
AdewaleOP
Thank You @Northeast Congo Lion
Northeast Congo Lion
@Adewale No worries
you should implement some loading effect
blocking means page will hang till it is loaded
so you can pass a custom Skeleton Loader component
a skeleton screen is something like this
@Northeast Congo Lion you should implement some loading effect
AdewaleOP
Yeah, thank you! will do that
Northeast Congo Lion
if you found my answer helpful, pls mark it as solution
@Northeast Congo Lion if you found my answer helpful, pls mark it as solution
AdewaleOP
will do, should be able to test properly tomorrow
AdewaleOP
Thank You @Northeast Congo Lion
@Adewale Thank You <@213063998843781120>
Northeast Congo Lion
anytime 🙂
AdewaleOP
Hi @Northeast Congo Lion, thanks for the other time...

Turns out it only worked, when we deploy to vercel but not on firebase
@Northeast Congo Lion i only use Vercel I am afraid
AdewaleOP
Alright, thank you