Next.js 13（App Router）部署至Digital Ocean后页面渲染异常求助

问题概况 #

部署到DigitalOcean服务器后出现以下异常：

• 直接访问非首页路径时，页面显示一串类似1:HL["/_next/static/media/..."]的代码字符串，Chrome、Safari控制台无报错（已清除缓存）
• 从首页导航至其他页面，显示状态不稳定（有时正常，有时异常）
• 本地开发模式、npm run build && npm run start模式下完全正常
• 服务器构建完成后，首次打开的页面可正常使用，从该页面导航至其他页面也无问题，但无法直接访问其他页面
• 已尝试移除layout.tsx中Navbar的useRouter/usePathname代码，并将Navbar包裹在Suspense组件中，问题未解决

可能的根源及解决方案 #

1. 服务器路由重写配置错误 #

这是最常见的原因：服务器没有将所有页面请求转发给Next.js的入口文件，导致直接访问非首页时，返回了未解析的Next.js静态chunk或中间代码。

• DigitalOcean App Platform：
  进入App的Settings > Routing，添加重写规则：

  • 来源路径：/*
  • 目标路径：/（或/server.js，取决于你的Next.js输出模式）
  • 开启Preserve Path选项
    保存后重新部署应用。

• Nginx服务器：
  修改Nginx配置文件，添加路由重写规则：

  location / {
    try_files $uri $uri/ /index.html;
  }
  

  执行sudo systemctl restart nginx重启服务。

2. Next.js输出模式配置问题 #

如果使用了output: 'standalone'（Next.js 13推荐的生产输出模式），需确保部署资源和启动命令正确：

• 部署时需上传以下目录到服务器：
  • .next/standalone：独立的Node.js服务文件
  • .next/static：静态资源（CSS、字体、图片等）
  • public：公共静态文件
• 启动命令使用：node .next/standalone/server.js
• 检查next.config.js中是否有错误的basePath或assetPrefix配置，若无需自定义路径，建议移除相关配置。

3. 服务器缓存策略冲突 #

服务器缓存规则可能导致页面请求被错误映射到静态资源，或Next.js的静态生成页面与缓存不兼容：

• 确保服务器对/_next/static/目录设置正确的缓存策略（如长期缓存），但对页面路径（如/about）禁用错误缓存。
• 在DigitalOcean App Platform中，进入Settings > Cache Control，调整页面路径的缓存规则，避免将动态页面缓存为静态资源。

4. Next.js版本已知bug #

部分Next.js 13.x早期版本的App Router存在部署后直接访问非首页的渲染异常：

• 升级到最新的Next.js 13稳定版：

  npm install next@latest react@latest react-dom@latest
  

  重新构建并部署应用。

5. 额外排查点 #

• 确认服务器Node.js版本与本地开发环境一致（Next.js 13要求Node.js 18.17+或更高版本）。
• 查看服务器日志（DigitalOcean App Platform的Logs页面），检查是否有服务器端渲染的未捕获错误（浏览器控制台无报错不代表服务器端无异常）。

附异常代码片段 #

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"}]...

内容的提问来源于stack exchange，提问作者Anatoly Zenkov