NextJS app behind nginx proxy is doing full page refresh instead of soft-navigation

Question

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 and App Router, if the app is accessed locally (App or Pages router), through (App or pages router) Vercel or with nginx and Pages router, the soft navigation of the SPA works.

I can confirm it still fails with latest canary and also since at least v13.

This is my nginx config:

location / {
    proxy_pass <Vercel Vanity URL or NextJS built-in server in localhost>
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host <Vercel Vanity URL or NextJS built-in server in localhost>;
    proxy_ssl_server_name on;
    proxy_cache_bypass $http_upgrade;
}

You can check both behaviours with this sample project:

❌ Reverse proxy to Vercel project using App Router -> doing full page refresh

https://sample-project-app-router.javimartinez.es/

✅ Reverse proxy to Vercel project using Pages Router -> working (soft-navigation)

https://sample-project-pages-router.javimartinez.es/

❌ Reverse proxy to self-hosted project using App router (NextJS built-in server) -> doing full refresh

https://sample-self-hosted-app-router.javimartinez.es/

✅ Reverse proxy to self-hosted project using Pages router (NextJS built-in server) -> working (soft-navigation)

https://sample-self-hosted-pages-router.javimartinez.es/

✅ Vercel vanity url to Vercel project using App Router -> working (soft-navigation)

https://sample-project-javiermartinz.vercel.app/

✅ Vercel vanity url to Vercel project using Pages Router -> working (soft-navigation)

https://sample-project-pages-router-javiermartinz.vercel.app/

✅ NextJS built-in production server running in local (Pages or App router) -> working (soft-navigation)

next build && next start and access to http://localhost:3000

Answer 1

I finally found out the culprit of this whole issue. Nginx configuration has some goodies from h5bp, this repository to be specific https://github.com/h5bp/server-configs-nginx

It looks like NextJS App Router does something under the hood with headers, so it a MIME type was messing with it. I just commented out this line and everything started working as it should https://github.com/h5bp/server-configs-nginx/blob/862527003373d66e5da3147b9fd42fd24fe2442f/h5bp/media_types/character_encodings.conf#L27