Next.js Discord

Discord Forum

Router replace/push method not having any effect in preview environment deployment

Unanswered
Nile Crocodile posted this in #help-forum
Open in Discord
Nile CrocodileOP
I have a very simple page with a text input and a button and upon clicking the button, I fire a simple request which returns a boolean value indicating whether I can navigate away from the page or not. If true, I call router.replace(/some-page) to navigate to some page. This works fine on localhost but fails for my Vercel preview deployments. When I compare my logs and network activity for my localhost and Vercel preview deployments, the only difference is that the preview-url.vercel.app/_next/data/some-page network request which is triggered by the router replace method invocation is missing for my preview deployments and I don't understand why. I tried awaiting the replace method and logging the boolean return value which is always true but the subsequent network request is not triggered and therefore, I remain on the current page. Interestingly, if I manually reload the page via the browser's refresh button and repeat the steps (click the button again) it works and the expected replace method json network request is triggered. From what I can tell the exact same code is executed on localhost and my preview deployments. Any ideas what could be causing this difference in behaviour? Thanks!

This project is using the Pages Router.

2 Replies

@Nile Crocodile I have a very simple page with a text input and a button and upon clicking the button, I fire a simple request which returns a boolean value indicating whether I can navigate away from the page or not. If true, I call `router.replace(/some-page)` to navigate to some page. This works fine on localhost but fails for my Vercel preview deployments. When I compare my logs and network activity for my localhost and Vercel preview deployments, the only difference is that the `preview-url.vercel.app/_next/data/some-page` network request which is triggered by the router replace method invocation is missing for my preview deployments and I don't understand why. I tried awaiting the replace method and logging the boolean return value which is always true but the subsequent network request is not triggered and therefore, I remain on the current page. Interestingly, if I manually reload the page via the browser's refresh button and repeat the steps (click the button again) it works and the expected replace method json network request is triggered. From what I can tell the exact same code is executed on localhost and my preview deployments. Any ideas what could be causing this difference in behaviour? Thanks! This project is using the Pages Router.
Nile CrocodileOP
I added the routeChangeStart , routeChangeComplete and routeChangeError event listeners to the router to try and understand what is happening and was able to observe the following:
1. routeChangeStart is being invoked for the new target page some page (expected behaviour)
2. routeChangeStartis being invoked for the current page (observed behaviour - not expected)
3. routeChangeCompleteis being invoked for the current page (observed behaviour - not expected)

The current page is a middleware temporary redirect of some page so what seems to being happening is that when I invoke router.replace(/some-page) from the current page the browser is redirecting me back to the current page i.e. re-executing the middleware redirect to this page. How do I break out of this redirect chain and why doesn't this happen on localhost?