每当点击链接并触发导航时,浏览器都会进行完全刷新而不是软导航。然而,这仅在使用nginx和App Router时发生,如果应用程序在本地(App或Pages路由器),通过(App或Pages路由器)Vercel或使用nginx和Pages路由器访问,则SPA的软导航工作。
我可以确认它仍然失败与最新的金丝雀,也因为至少v13。
这是我的nginx配置:
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;
}
字符串
您可以使用此示例项目检查这两种行为:
使用App Router将代理反向到Vercel项目->执行全页刷新
https://sample-project-app-router.javimartinez.es/
使用Pages Router->工作(软导航)将代理反向到Vercel项目
https://sample-project-pages-router.javimartinez.es/的
使用App router(NextJS内置服务器)反向代理到自托管项目->进行全刷新
https://sample-self-hosted-app-router.javimartinez.es/的
使用Pages router(NextJS内置服务器)-> working(软导航)反向代理到自托管项目
https://sample-self-hosted-pages-router.javimartinez.es/的
使用App Router->工作(软导航)将Vercel vanity url转换为Vercel项目
https://sample-project-javiermartinz.vercel.app/的
使用Pages Router->工作(软导航)将Vercel vanity url转换为Vercel项目
https://sample-project-pages-router-javiermartinz.vercel.app/的
在本地运行的NextJS内置生产服务器(页面或应用程序路由器)->工作(软导航)
next build && next start
和访问http://localhost:3000
2条答案
按热度按时间wnvonmuf1#
第一个lint -https://sample-project-app-router.javimartinez.es/实际上执行客户端导航(参见下面的GIF)。
x1c 0d1x的数据
第二个红色交叉链接抛出502
Next.js官方文档似乎没有描述nginx配置。然而,似乎在服务器端渲染的javascript服务器组件存在一些问题。
4bbkushb2#
我终于找到了这整个问题的罪魁祸首。Nginx配置有一些好东西从
h5bp
,这个仓库是特定的https://github.com/h5bp/server-configs-nginx它看起来像NextJS应用路由器做了一些在引擎盖下的头,所以它是一个MIME类型是混乱的。我只是注解了这一行,一切都开始工作,因为它应该https://github.com/h5bp/server-configs-nginx/blob/862527003373d66e5da3147b9fd42fd24fe2442f/h5bp/media_types/character_encodings.conf#L27