QueraTeam / django-nextjs

Next.js integration for Django projects
MIT License
351 stars 18 forks source link

Client-side navigation does not work with NextJS 13 + App router #27

Closed RobbieFernandez closed 1 year ago

RobbieFernandez commented 1 year ago

When using NextJS 13 with the new app router, client-side navigation is not working and <Link> components cause the page to be reloaded, rather than replaced by JS. I've only tested this on the app router, so it's possible that the page router is also affected.

From what I can tell the issue is that requests made from the front-end use headers to tell the NextJS server if it should return full HTML or RSC. If the headers are not forwarded to NextJS, then the full HTML is always returned. NextJS also sets headers on the response that are required for this to work. These are the headers that I've found to be necessary: Request/Response Header Name
Request Rsc
Request Next-Router-State-Tree
Request Next-Router-Prefetch
Request Next-Url
Request Cookie
Request Accept-Encoding
Response Vary
Response Content-Type

I discovered the request headers by looking at the Vary header for RSC requests.

I've got this working for me locally, so I'll open a PR with the changes I've made.