英文:
Webpages render broken. Nextjs 13 on Digital Ocean
问题
我的Next.js网站的页面在直接访问时看起来像一串代码。控制台中没有错误（Chrome、Safari，也没有缓存）。从主页导航时可能正常工作，也可能不工作。
Next.js 13 网站，使用应用程序路由器。部署到服务器（digitalocean）。
错误在本地开发或构建/启动模式下不会发生。
我还注意到，唯一工作的页面是在服务器构建后首次打开的页面。您可以从该页面导航到其他页面，一切都正常。但您不能直接转到其他页面。
是否有人可以指出问题的可能原因？
我原本预计布局.tsx 中的问题是由于使用 useRouter 和 usePathname 的 Navbar 引起的。我将它们移除了，但没有帮助。我还将 Navbar 包装在了 Suspension 中。
英文:
The pages of my next.js website look like a strings of code when I get there directly. No errors in the Console (Chrome, Safari, no cache). It may or may not work normal when navigating from the homepage.
Nextjs 13 website. Using app router. Deployed to the server (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"}]
...
Errors are not occur locally in dev or build/start mode.
I also noticed that the only page is working — is the one that you open first after the build on the server. You can navigate from that page to others and all goes well. But you can't go to other pages directly.
Could anyone point out the possible source of the problem?
I expected the problems with the layout.tsx caused by Navbar that used useRouter and usePathname. I removed them but it doesn't help. Also I wrapped Navbar into Suspension.
答案1
得分: 0
问题发现
最近的Next.js版本缓存所有请求。为了澄清请求的预期结果（html或rsc），它使用了Vary头。由于CDN端的配置错误，许多CDN无法识别此Vary头（影响了Digital Ocean、Cloudfire等）。
解决方案
我从Digital Ocean迁移到了Vercel，这个功能在Vercel上运行得很好（因为nextjs是Vercel的产品）。我的与DO的关系不是那么紧密，所以对我来说不是问题。下面是我找到的其他解决方案。
其他解决方案
发现但未尝试：从项目的App Router配置切换到Page Router
链接
英文:
Problem found
Recent version of Next.js cache all requests. To clarify expected results of the request (html or rsc) it uses Vary headers. This Vary header is not recognized by many of CDN because of misconfiguration on the CDN side (it affects Digital Ocean, Cloudfire, and others).
Solution
I moved from Digital Ocean to Vercel which works just fine with this feature (since nextjs is a product of Vercel). My relationships with DO are not so tight so it is not problem for me. Below are couple of other solutions that I found.
Other solution
Found but didn't try: switch from App Router configuraion of the project to Page Router
Links
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论