两者都能做内容站,但形态完全不同。该选谁,看接下来 12 个月的工作量,而不是”哪个听起来更强”。
问题背景
2026 年,这是独立内容开发者最常见的框架决定。Next.js 更通用,Astro 专门为内容设计。两者都能做出快站、生态都大。区别在 DX、构建复杂度,以及”页面”和”应用”边界的处理方式。
Astro 和 Next.js 各是什么
后面进入决策步骤之前,先各一段定义,免得后文一直在解码营销话术。
Astro
Astro 是内容导向、static-first 的 web 框架。核心是 “Astro islands”:默认零 JavaScript,需要时再按需 hydrate 单个组件。同一个项目里可以混用 React、Vue、Svelte、Solid 组件。页面是 .astro 文件——本质是 HTML 加一段 frontmatter 脚本来取数据。专为内容站优化:博客、文档、营销页、落地页。
Next.js
Next.js 是 Vercel 出的 React-first 全栈框架。当前 App Router 把文件路由配上 React Server Components,默认 SSR / SSG / edge 渲染。整个 React 生态都能直接用。最适合做动态应用:dashboard、SaaS、电商。学习曲线比 Astro 陡,因为 RSC 和缓存模型都有一堆微妙行为。
一眼差异表
| 维度 | Astro | Next.js |
|---|---|---|
| 默认渲染 | static / islands | SSR / RSC |
| Router | 文件路由、简单 | 文件路由、App Router |
| 客户端 JS | 默认零 | 完整 React runtime |
| 适合 | 内容为主:博客、文档、营销 | 动态应用:dashboard、SaaS |
| 学习曲线 | 低 | 较高(RSC + 缓存) |
| Hosting | 静态、edge、任意 host | Vercel 最优;其他靠 adapter |
| 内容协作 | MDX + content collections | 能做但临场 |
| SEO 默认 | 极快、零 JS | 需要小心(RSC streaming) |
脚手架命令对比
# Astro
npm create astro@latest -- --template blog
cd my-astro-site
npm run dev # vite,HMR 非常快
# Next.js(App Router)
npx create-next-app@latest --typescript --app
cd my-next-app
npm run dev # turbopack,速度也很快
各自的首页文件大概长这样:
---
// src/pages/index.astro
const articles = await Astro.glob('../content/*.md');
---
<h1>我的站点</h1>
<ul>{articles.map(a => <li><a href={a.url}>{a.frontmatter.title}</a></li>)}</ul>
// app/page.tsx
import fs from 'node:fs';
export default async function Home() {
const articles = fs.readdirSync('content').map(f => ({ slug: f.replace('.md', '') }));
return (
<>
<h1>我的站点</h1>
<ul>{articles.map(a => <li key={a.slug}><a href={`/${a.slug}`}>{a.slug}</a></li>)}</ul>
</>
);
}
Astro 输出纯 HTML,零 JS。Next 即便页面没有交互也会带上一小段 React runtime。
判断标准
- 站点 80% 以上是内容(文章、文档、营销页)。
- 想要构建简单、托管简单、默认极少客户端 JS。
- 大部分路由不需要服务端个性化或登录鉴权。
- 团队小,更喜欢稳定、可预测的工具链。
快速结论
2026 年内容为主的站点默认选 Astro。要叠加复杂服务端逻辑、登录或大量 API 路由再考虑 Next.js。
实操步骤
把上面那段定义当心智模型——Astro = islands + static-first;Next.js = RSC + 完整 React。然后走这几步:
- 写下站点最复杂的 5 个页面(结账、用户面板、动态信息流等)。
- 挨个标”静态友好”或”必须服务端”。
- 5 个里有 4 个静态友好,默认 Astro(对应上面”内容为主”的画像);3 个以上需要服务端逻辑,偏 Next.js。
- 在第一选择里花一天搭最难的那一页,把真实摩擦点暴露出来。
- 看 host 匹配:静态 host 上 Astro 更便宜更简单;Vercel 这类平台上 Next.js 体验更好。
- 诚实对比 DX——
npm run dev启动速度、热更新速度、MDX/Markdown 编辑手感。 - 选定后 60 天内不要再看任何”框架对比”文章。
容易踩的坑
- 因为 Next.js “更火”就选它——火并不能帮你付静态站每月的 Vercel 账单。
- 因为 Astro “更简单”就选它,然后又想在里面塞完整应用。
- 中途换框架——迁移成本通常是预估的 2-3 倍。
- 只看基准测试,不测自己真实的内容流水线。
- 忘了团队熟悉度对小团队往往比框架特性更重要。
这篇适合谁
在 Astro 和 Next.js 之间挑内容站框架的独立开发者。
这篇不适合谁
已经选定、只是来找认同的人——别看了,去干活。
FAQ
- 哪个 SEO 更好: 都很好。SEO 来自内容、结构和元数据,不来自框架 A 还是 B。
- 哪个更快: Astro 默认 JS 更少,Core Web Vitals 开箱即赢。Next.js 调优后能追上,但要花更多力气。
- 哪个生态更大: Next.js 插件、host、集成更多;Astro 生态较小但能覆盖内容站需求。
- 能混用吗: 不同子域用不同框架可以,单一站点内混合通常不划算。