Vercel部署Next.js应用：查看console.log及调试504错误

一、查看服务端/客户端console.log的替代方法 #

• 全局搜索Vercel项目日志：不要仅局限于函数日志，进入项目主页的「Logs」面板，用自定义关键词（比如你代码中console.log的特定内容）全局检索。服务端SSR/SSG页面的日志会出现在这里，不一定归类在函数日志中。客户端的console.log需直接在浏览器开发者工具的「Console」面板查看，Vercel不会收集前端客户端日志。
• 检查Edge Runtime日志：如果你的页面或API使用了Edge Runtime（通过export const runtime = 'edge'声明），相关日志会单独显示在「Edge Functions」日志分类下，别遗漏该板块。
• 使用结构化日志输出：将普通console.log替换为结构化格式，比如console.log(JSON.stringify({ type: 'SSR_TRIGGER', path: req.url, timestamp: new Date().toISOString() }))，这样在Vercel日志中更容易筛选识别，避免被默认日志淹没。
• 导出日志到第三方工具：开启Vercel日志导出功能，将日志同步到Datadog、New Relic等平台，便于更高效的检索和分析复杂日志场景。

二、解决favicon.ico触发的504错误 #

• 确认静态文件路径：将favicon.ico放在Next.js项目的public目录根目录下，Vercel会自动映射到/favicon.ico路径。若放在子目录，需修改页面中link标签的href属性，或在next.config.js中配置路由映射。
• 删除动态路由文件：如果误创建了pages/favicon.ico.js这类动态路由文件，会导致favicon请求触发服务端函数，进而因超时或配置错误返回504。直接删除该动态路由文件，改用public目录下的静态文件。
• 添加缓存头优化请求：在next.config.js中为favicon配置缓存策略，减少重复请求并避免不必要的服务端交互：

  module.exports = {
    async headers() {
      return [
        {
          source: '/favicon.ico',
          headers: [
            {
              key: 'Cache-Control',
              value: 'public, max-age=31536000, immutable',
            },
          ],
        },
      ];
    },
  };
  

• 验证静态资源上传状态：进入Vercel项目的「Deployment」页面，查看部署详情中的静态资源列表，确认favicon.ico已成功上传。若未上传，检查.gitignore是否误排除了public目录下的文件，重新部署即可。

内容的提问来源于stack exchange，提问作者Jackson Kasi