NextJS app behind nginx reverse proxy is doing full page refresh (redirect) instead of soft-navigati

[woeful salmon]

Whenever a link is clicked and navigation is fired, the browser does a full refresh instead of soft-navigation. However, this only happens when using nginx, if the app is accesed locally or through Vercel, the soft navigation of the SPA works.

I can confirm it still fails with latest canary and also since (at least) v14. I have been downgrading my NextJS app till that version and the problem still persists.

This is my nginx config:

location / {
proxy_pass https://sample-project-javiermartinz.vercel.app;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host sample-project-javiermartinz.vercel.app;
proxy_ssl_server_name on;
proxy_cache_bypass $http_upgrade;
}
You can check both behaviours with this sample project:

❌ Reverse proxy to Vercel -> doing full page refresh
https://sample-project.javimartinez.es/

❌ Reverse proxy to self-hosted (NextJS built-in server) -> doing full refresh
https://sample-self-hosted-project.javimartinez.es

✅ Vercel vanity url -> working (soft-navigation)
https://sample-project-javiermartinz.vercel.app

✅ NextJS built-in production server running in local -> working (soft-navigation)
next build && next start and access to http://localhost:3000

[coarse relic]

Hi @woeful salmon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information provided in the extracts, it seems like the issue might be related to the way your nginx server is handling WebSocket connections. In Next.js 12, Hot Module Replacement (HMR) switched from using a server-sent events connection to a WebSocket connection. If these WebSocket connections are not correctly proxied, it could potentially interfere with Next.js's client-side navigation.

Here is the nginx configuration provided in the extracts for handling WebSocket connections:

location /_next/webpack-hmr {
  proxy_pass <http://localhost:3000/_next/webpack-hmr;>
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
}

You might want to add a similar configuration to your nginx setup to ensure WebSocket connections are correctly handled. Please replace <http://localhost:3000> with the appropriate address of your Next.js application.

Please note that this is just a suggestion based on the information provided in the extracts. The actual cause of the issue might be different and may require further investigation.

For more information, you can refer to the Next.js documentation (https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating) and the Vercel documentation (https://vercel.com/docs/edge-network/redirects).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@tawdry jackal kapa.ai is still learning and improving, please let us know how it did by reacting below

[woeful salmon]

@coarse relic I've added that extract, but it's still not working

[coarse relic]

Let me check the knowledge base for you. One moment! :books:

---

I'm sorry to hear that the issue persists. Unfortunately, the extracts provided do not contain further information to troubleshoot this specific issue.

It's recommended to check the network tab in your browser's developer tools to see if there are any failed requests or errors when a link is clicked. This might give you more insight into what's going wrong.

You might also want to ensure that your nginx server is correctly configured to serve static assets, as per the Next.js documentation (https://nextjs.org/docs/pages/building-your-application/deploying/static-exports).

If the issue continues, it would be best to seek help from the Next.js community or the nginx community, as they might have more experience with this specific issue.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: