nginx代理背后的NextJS应用程序正在进行全页面刷新,而不是软导航

k4ymrczo  于 2023-11-17  发布在  Nginx
关注(0)|答案(2)|浏览(155)

每当点击链接并触发导航时,浏览器都会进行完全刷新而不是软导航。然而,这仅在使用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

wnvonmuf

wnvonmuf1#

第一个lint -https://sample-project-app-router.javimartinez.es/实际上执行客户端导航(参见下面的GIF)。
x1c 0d1x的数据
第二个红色交叉链接抛出502

Next.js官方文档似乎没有描述nginx配置。然而,似乎在服务器端渲染的javascript服务器组件存在一些问题。

4bbkushb

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

相关问题