这篇文章里的每一条，都是我把自己网站从本地跑到线上、再迭代两年攒下来的。
所有的问题都是按：
- 有什么现象。
- 引发这个想象的原因。
- 应该如何修复？
的格式来写的，如果你也打算用Next.js做网站，可以收藏，仔细看看，能省去不少时间。
1. standalone模式不会自动带上静态资源
现象：部署完页面能打开，但样式全丢、图片全404。
原因：output: "standalone" 产出的是最小化的server和依赖，.next/static 和public/不在里面。
修法：部署脚本里手动拷进去（我是在本地打好包再 rsync 上去的）：
cp -r public .next/standalone/
mkdir -p .next/standalone/.next
cp -r .next/static .next/standalone/.next/
2. 在macOS上构建出的sharp，到Linux服务器直接崩
现象：页面能开，但带图片优化的接口500。
原因：sharp带原生二进制，不能跨系统搬运。
修法：本地构建时先把macOS的二进制删掉，到服务器上再装一次Linux版本；或者干脆用Docker构建。
3. 用useState做进入视口再渐显，等于把内容从 HTML里删掉了
现象：Google搜不到首页文案；禁用JS之后首屏一片空白。
原因：我一开始想让首屏那段状态逐行浮现，写法是 const [show, setShow] = useState(false) + IntersectionObserver。服务端渲染出来的 HTML 里那块就是空的,爬虫和无JS访客什么都看不到。
修法：渐显只用 CSS（animation + animation-delay），并且尊重 prefers-reduced-motion。记住一句话就行：
内容必须存在于 HTML 里，动效只是附加。
这个错误卡了我很长时间，虽然不致命，但是对SEO和用户体验都不太好。
4. Tailwind v4 没有 tailwind.config.ts
现象：想加一个自定义颜色，翻遍项目找不到配置文件。
原因：v4 是 CSS-first，配置写在CSS里。
修法：在 globals.css 里用 @theme 定义变量，不要再新建 config 文件（建了也不会生效）：
@theme {
--color-brand: #10b981;
}
这是不仔细看官方文档惹的祸，不过自从AI普及之后，我确实很少仔细的研读官网文档了。
5. 不写metadataBase，OG 图会解析到 localhost
现象：分享出去的卡片没有图。
原因：openGraph.images 里写相对路径时，需要 metadataBase 才能拼出绝对 URL。缺了它，生成的地址指向 http://localhost:3000/...。
修法：
export const metadata = {
metadataBase: new URL("online url"),
};
顺手加个兜底：环境变量非法时回退到生产域名，别让它抛错。
6. robots.txt 把自己的 CSS 和 JS 屏蔽了
现象：Search Console 提示页面可以访问，但样式和脚本被屏蔽。
原因：很早以前从模板里抄来的 robots.txt，里面写着：
Disallow: /*.js
Disallow: /*.css
修法：删掉这几行，Googlebot 需要拿到 CSS 和 JS 才能正确渲染页面，屏蔽它们等于自断 SEO。
7. sitemap 漏页，lastmod 全是构建时间
现象：新加的列表页一直不被收录。
原因：两个小问题叠在一起，排除列表配错，把不该排除的路由漏了；lastmod 用的是默认值（构建时刻），每次部署都变，Google 会当成噪音忽略。
修法：明确列出要排除的路由；文章页的 lastmod 用文章真实发布日期。
8. gray-matter 把 YAML 里的日期变成了 Date 对象
现象：文章日期偶尔差一天。
原因：YAML 里的 date: 2026-10-08 会被解析成 Date 对象，再 toISOString() 就随时区漂移。
修法：读 frontmatter 时统一规范化，并且明确按 UTC 取日期：
const date =
raw instanceof Date ? raw.toISOString().slice(0, 10) : String(raw).slice(0, 10);
9. 动态生成 OG 图时，字体缺字形
现象：分享卡片里出现乱码（□）。
原因：next/og 底层用 satori 渲染，需要显式提供字体数据；内置字体只覆盖常用字符。我当时用了一个装饰性的箭头字符，在网页里正常，在分享卡里就是一个方框。
修法：OG 图里只用中文、拉丁字母和基本标点；想要花哨图标就自己传字体文件，或者干脆用色块画。
10. 给整个section套 font-mono，中文悄悄换了字体
现象：中文标题在本地Mac上看着没问题，但是在其他地方打开看着就不对。
原因：等宽字体（JetBrains Mono）没有中文字形，中文直接落到系统默认字体。
修法：把中文回退栈写全，等宽只用在真正的代码和命令上：
--font-sans: var(--font-noto-sans), "PingFang SC", "Microsoft YaHei", sans-serif;
--font-mono: var(--font-jetbrains), ui-monospace, Menlo, monospace;
小结
回头看不难发现，这十条里真正属于框架问题的只有两三条，剩下的都是配置和习惯：
- 内容优先：HTML 里必须有的东西，就不要靠JS才出现。
- 不要在本地看起来没问题就发布：字体、跨平台二进制、分享卡片， 都是本地正常、线上翻车的重灾区。
- 把部署过程写成脚本：能跑通的命令就固化下来，不然每换一台机器都要重新踩一遍。
如果你正在选用nextjs做网站，可以对照参考。