Refreshing or accessing page on dynamic route blocks rendering on NextJS


I’m trying to deploy a NextJS (v10) project on Netlify (a blog) that has basically 2 pages a landing page, and a dynamic page [slug].tsx that relies on getStaticPaths and getStaticProp to render the articles You can see the code for [slug].tsx here (it’s pretty short)
I tried to build both my app both with npm run build && npm run export and also with next-on-netlify
but both end up with the same issue:

  • refreshing a blog post “blocks rendering” the page gets “stuck” animations do not trigger
  • accessing a blog post directly (with a link) shows the same issue

What’s weird is that I can render the landing page and refresh it just fine, navigate to a blog post renders the page without any issues.

I hosted the same exact version of my website on Vercel and it doesn’t surface the same issue.
Vercel version (clicking on this will redirect you to a blog post rendered through [slug].tsx)

Netlify version (clicking on this will redirect you to the same blog post, but this time you’ll see that the page gets stuck)

You can see a video recording here

Thank you in advance for your help!

A post was merged into an existing topic: [NEXTJS]: Refreshing page on dynamic route blocks rendering (?)