next.js 网页呈现破碎,下一篇:数字海洋13

vaj7vani  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(107)

我的next.js网站的页面看起来像一串代码,当我直接到达那里。控制台中没有错误(Chrome,Safari,没有缓存)。从主页导航时,它可能会或可能不会正常工作。
Nextjs 13网站。使用应用程序路由器。部署到服务器(digitalocean)。

1:HL["/_next/static/media/3876a0f72c3984e0-s.p.woff2",{"as":"font","type":"font/woff2"}]
2:HL["/_next/static/media/8a2807d88ac56020-s.p.woff2",{"as":"font","type":"font/woff2"}]
3:HL["/_next/static/media/d9b920ce8a984259-s.p.woff2",{"as":"font","type":"font/woff2"}]
4:HL["/_next/static/css/fdd13217d4859704.css",{"as":"style"}]
0:[[["",{"children":["soft-ice",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],"$L5",[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/fdd13217d4859704.css","precedence":"next"}]],["$L6",["$","meta",null,{"name":"next-size-adjust"}]]]]]
7:HL["/_next/static/css/92be51721d315283.css",{"as":"style"}]
...

Screenshot
在dev或build/start模式下本地不会发生错误。
我还注意到,唯一的页面正在工作-是在服务器上构建后首先打开的页面。您可以从该页面导航到其他页面,一切都很顺利。但是你不能直接转到其他页面。
谁能指出问题的可能来源?
我预料到了使用useRouter和usePathname的Navbar会导致layout.tsx出现问题。我把它们去掉了,但没有用。我还把Navbar Package 成了Suspension。

nkcskrwz

nkcskrwz1#

发现问题

最新版本的Next.js缓存所有请求。为了阐明请求的预期结果(html或rsc),它使用了Vary头。由于CDN端的错误配置,许多CDN无法识别该Vary报头(它影响Digital Ocean、Cloudfire等)。

解决方案

我从Digital Ocean转移到Vercel,它与这个功能配合得很好(因为nextjs是Vercel的产品)。我和DO的关系不是那么紧密,所以这对我来说不是问题。下面是我找到的几个解决方案。

其他解决方案

找到但未尝试:从项目的应用路由器配置切换到页面路由器

友情链接

  1. https://github.com/vercel/next.js/issues/48569
  2. https://github.com/vercel/next.js/pull/49140

相关问题