6

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

Improve this question
6
  • 2
    Why hosting it on a n express server instead of using NextJS built-in server? If I run next build && next start and access to http://localhost:3000 soft navigation works. It's something misconfigured in nginx what blocks it. Commented Oct 26, 2023 at 18:16
  • I'm accessing my apps behind the reverse proxy and I do see the (index) file in Sources tab. I don't see the No resource with given URL found message you mentioned. @jQueeny Commented Oct 30, 2023 at 21:23
  • 2
    I try your links, I didn't see any difference, all the links does soft navigation Commented Nov 2, 2023 at 9:05
  • I don't know how you are testing it @user2226755, but I can assure you reverse proxy links are not using soft navigation. You will see a full page load. It's fast because is a dummy page, but it redirects to the example page. Commented Nov 2, 2023 at 13:11
  • Anything in the logs? Commented Nov 5, 2023 at 7:15

1 Answer 1

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.