nextjs 中的那些坑

众所周知，vercel是serverless，也就是按照请求次数计费的，虽然提供了免费额度，但是vercel喜欢在nextjs中夹带私货，导致我们很容易超出额度。

中间件之坑 (Middleware) —— 杀伤力：⭐⭐⭐⭐⭐

问题： middleware.ts 默认拦截所有请求（图片、CSS、Favicon）。每一个静态资源加载都变成一次代码执行。

后果： Edge Requests 爆炸（数万次/天），拖慢图片加载速度。

对策： 必须配置 matcher，排除静态文件。

图片组件之坑 (Image Optimization) —— 杀伤力：⭐⭐⭐⭐

问题： 使用 默认会调用 Vercel 的图片处理服务。

后果： 免费版每月只有 1000 张原图额度。资源站极易超标，导致图片变成 402 错误。

对策：

• 全局配置 unoptimized: true（推荐）。

• 本地将 PNG 转 WebP，直接分发静态文件。

动态渲染之坑 (SSR/404) —— 杀伤力：⭐⭐⭐⭐

问题： 页面每次访问都重新生成（0% Cache），特别是 404 页面如果是动态的，会被爬虫刷爆。

后果： Fast Origin Transfer (流量) 耗尽，Serverless Function 执行时间超标。

对策：

• 动态页（详情页）必须上 ISR (revalidate + generateStaticParams)。

• 404 页面必须是纯静态组件。

预加载之坑 (Link Prefetch) —— 杀伤力：⭐⭐⭐

问题： 列表页的 只要出现在屏幕上就会发请求。

后果： 莫名其妙产生大量 Edge Requests，即便用户什么都没点。

对策： 在密集列表的链接上加 prefetch={false}。

官方插件之坑 (Analytics) —— 杀伤力：⭐⭐

问题： 开启 Speed Insights / Web Analytics。

后果： 每个访客自动产生额外的统计请求，积少成多。

对策： 在 Vercel 后台关闭这两个功能，改用 Google Analytics 或 Umami。

我要彻底放弃 vercel和 nextjs，转向 astro 和 tanstack start 了。