Nextjs, dynamic routes, cloudflare and 404's
Answered
Dickcissel posted this in #help-forum
DickcisselOP
Hey guys, I have a weird situation with one of my projects.
The project is deployed in Azure and routed through Cloudflare.
We are using CMS for some pages and in the footer of the website, we have links to these pages.
The issue is that when these links get near the viewport, Nextjs is obviously trying to prefetch them (because we are using the Link component on the links) to enhance the UX which is great, however in the network/console tabs, what we see is 404's, whats important to note here is that, these pages do exist, and they do work, if I do click on the link the page will open, so this is only an issue with "prefetching", even if I disable prefetch on the link component, hovering is still making it prefetch and cause 404s.
The first screenshot is from our staging environment (Azure + Cloudflare)
The second screenshot is from our dev environment (Vercel), here we dont have these issues
What is also important to note probably is that these are SSG pages, so pages generated from [...slug].tsx in pages/ using both getStaticPaths and getStaticProps (old project that has not migraed to app/ yet, but is using Nextjs 13+)
The project is deployed in Azure and routed through Cloudflare.
We are using CMS for some pages and in the footer of the website, we have links to these pages.
The issue is that when these links get near the viewport, Nextjs is obviously trying to prefetch them (because we are using the Link component on the links) to enhance the UX which is great, however in the network/console tabs, what we see is 404's, whats important to note here is that, these pages do exist, and they do work, if I do click on the link the page will open, so this is only an issue with "prefetching", even if I disable prefetch on the link component, hovering is still making it prefetch and cause 404s.
The first screenshot is from our staging environment (Azure + Cloudflare)
The second screenshot is from our dev environment (Vercel), here we dont have these issues
What is also important to note probably is that these are SSG pages, so pages generated from [...slug].tsx in pages/ using both getStaticPaths and getStaticProps (old project that has not migraed to app/ yet, but is using Nextjs 13+)
Answered by Dickcissel
@Skipjack tuna @Silver cyprinid may be a bit late I just now saw it, there is no solution, the problem lies in the app being deployed as a Static Web App on azure, it must be deployed as a Web App, thats the only thing that resolved it
5 Replies
Skipjack tuna
Did you have any chance to get a solution on this issue? I'm facing the same error on my side.
Silver cyprinid
Ditto ^^
DickcisselOP
@Skipjack tuna @Silver cyprinid may be a bit late I just now saw it, there is no solution, the problem lies in the app being deployed as a Static Web App on azure, it must be deployed as a Web App, thats the only thing that resolved it
Answer
DickcisselOP
sooo o you need docker, github action, container registry in azure etc
Silver cyprinid
ehhhh ok thanks!