内容站怎么选：Astro 还是 Next.js（2026 年 6 月）

两者都能做内容站，但形态完全不同。该选谁，看接下来 12 个月的工作量，而不是”哪个听起来更强”。本文信息截至 2026 年 6 月，对比的是当前正式版：Astro 6（2026 年 3 月 10 日转正）和 Next.js 16（2025 年 10 月 21 日转正）。

一句话结论

• 内容为主的站点（博客、文档、营销页、靠 SEO 的内容库）：选 Astro 6。默认零 JS，托管更简单、跑起来更省钱，getCollection() 直接给你带类型的内容查询。
• 带内容板块的应用（SaaS 面板、登录鉴权路由、大量 API）：选 Next.js 16。Server Components 加上新的 Cache Components 模型就是为请求时逻辑设计的。
• 算账： 在静态 host（Cloudflare Pages、Netlify、Firebase Hosting Spark）上，Astro 站点可以商用且 0 元/月。而 Next.js 应用放在 Vercel 的 Hobby 计划上仅限非商用——一旦你开始变现，就得上 Vercel Pro，每个席位 20 美元/月，或者自己托管 Node 服务器。
• 唯一铁律： 选错框架可以补救；中途迁移才是真正烧钱的失误，实际成本通常是你预估的 2-3 倍。

两个框架在 2026 年各是什么

进入决策步骤之前，先各一段定义，免得后文一直在解码营销话术。

Astro 6

Astro 是内容导向、static-first 的框架。核心是 Astro islands：默认零 JavaScript，需要时再按需 hydrate 单个组件。同一个项目里可以混用 React、Vue、Svelte、Solid、Preact，每个组件都是独立的 island。页面是 .astro 文件——HTML 加一段 frontmatter 脚本来取数据。到了 Astro 6，旧的 Astro.glob() 已被移除，改用带类型的 Content Layer API（getCollection()）查询内容；v6 转正的 Live Content Collections 还能在请求时从 CMS 或数据库拉数据。Astro 6 要求 Node 22.12.0 及以上。

Next.js 16

Next.js 是 Vercel 出的 React-first 全栈框架。App Router 把文件路由配上 React Server Components。到了 Next.js 16，Turbopack 成了默认打包器（生产构建快 2-5 倍，Fast Refresh 最高快 10 倍），Cache Components 用显式、需主动开启的 "use cache" 模型取代了旧的隐式缓存，middleware.ts 也正在改名为 proxy.ts。它内置 React 19.2，要求 Node.js 20.9.0+ 和 TypeScript 5.1+。学习曲线是真的陡：缓存模型和 RSC 边界都有一堆微妙行为。

一眼差异表

维度	Astro 6	Next.js 16
默认渲染	static / islands	请求时动态（RSC）
默认客户端 JS	零	React 19.2 runtime
打包器	Vite（Rolldown 逐步铺开）	Turbopack（默认）
最低 Node 版本	22.12.0	20.9.0
内容加载	getCollection()（带类型）	fs / fetch，临场写
缓存模型	默认静态	Cache Components / "use cache"
学习曲线	低	较高（RSC + 缓存）
托管	任意静态 host、edge 或 Node	Vercel 最优；其他靠 adapter
适合	博客、文档、营销、内容库	面板、SaaS、电商、API

脚手架命令对比

# Astro 6
npm create astro@latest -- --template blog
cd my-astro-site
npm run dev    # Vite，HMR 非常快

# Next.js 16（App Router）
npx create-next-app@latest --typescript --app
cd my-next-app
npm run dev    # 默认走 Turbopack

各自的首页文件大概长这样。注意 Astro 这边用的是 getCollection()——Astro.glob() 在 v6 里已经不存在了：

---
// src/pages/index.astro
import { getCollection } from 'astro:content';
const articles = await getCollection('blog');
---
<h1>我的站点</h1>
<ul>
  {articles.map(a => <li><a href={`/blog/${a.id}/`}>{a.data.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。

真正决定胜负的是托管账单

两个框架真正分道扬镳的地方是钱，不只是开发者口味。

• Astro 默认输出纯静态文件。放到 Firebase Hosting（Spark 计划）、Cloudflare Pages 或 Netlify 上，可以商用且免费。没有服务端 runtime，就没有冷启动，攻击面也极小。
• Next.js 最舒服的形态是一台常驻的 Node/edge 服务器。在 Vercel 上，Hobby 计划免费但明确仅限非商用，且带宽封顶 100 GB/月；要变现就得上 Vercel Pro，每席位 20 美元/月（含 1 TB 流量，超出后 0.15 美元/GB），或者自己托管 Node。你当然可以用 output: 'export' 把 Next.js 完全导出成静态站，但那样就关掉了用它的大半理由。

场景	Astro	Next.js
静态博客、商用	Firebase Spark / Cloudflare Pages 上 0 元	Vercel Pro 每席位 20 美元（Hobby 仅非商用）
月 100 万访问、以静态为主	只付 CDN 带宽	Vercel Pro + 带宽超额费
登录 + 面板 + API 路由	要 adapter + 服务器，别扭	原生合适

如果你的站点 80% 以上是文章，光托管这一项，Astro 就能帮你每月省下一个 Pro 席位的钱。

7 步决策清单

把上面的定义当心智模型——Astro = islands + static-first；Next.js = RSC + 完整 React——然后走这几步：

1. 写下站点最复杂的 5 个页面（结账、用户面板、动态信息流等）。
2. 挨个标”静态友好”或”请求时必须有服务端逻辑”。
3. 5 个里有 4 个静态友好，默认 Astro；3 个以上需要服务端逻辑，偏 Next.js。
4. 在第一选择里花一天搭最难的那一页，把真实摩擦点暴露出来。
5. 老实算托管账：那个 20 美元/月的 Vercel Pro 席位值不值，还是 0 元静态 host 就够？
6. 真刀真枪对比 DX——npm run dev 启动速度、热更新速度、每天 MDX/Markdown 编辑的手感。
7. 选定后 60 天内不要再看任何”框架对比”文章。

容易踩的坑

• 因为 Next.js “更火”就选它——火并不能帮你付静态站每月的 Vercel 账单。
• 因为 Astro “更简单”就选它，然后又想在里面塞完整应用。
• 中途换框架——迁移成本通常是预估的 2-3 倍。
• 只看通用基准测试，不在自己真实页面数量下测真实内容流水线。
• 忘了团队熟悉度对小团队往往比框架特性更重要。
• 照搬还在用 Astro.glob() 的老教程——它在 Astro 6 里已被移除，请改用 getCollection()。

这篇适合谁

在 Astro 和 Next.js 之间挑内容站框架的独立开发者——想要一个明确答案，外加背后的成本账。

FAQ

• 哪个 SEO 更好: 两个都能冲到搜索前排。SEO 来自内容、结构、内链和元数据，不来自框架 A 还是 B。Astro 默认零 JS 只是让你不用调优就更容易拿到好的 Core Web Vitals。
• 哪个开箱更快: Astro，因为它默认不发 JavaScript，不费力就能赢 Core Web Vitals。Next.js 16 配上 React Compiler、Cache Components 和精心设计的 RSC 边界能追上——但这是你要花的力气。
• 哪个生态更大: Next.js，差距还很大——集成、host、React 库都更多。Astro 生态较小，但内容站需要的（MDX、content collections、图片优化、sitemap）都覆盖得不错。
• 能混用吗: 不同子域用不同框架可以，单一站点内混合通常不值那个复杂度。一个域名选一个就好。
• Astro.glob() 还能用吗: 不能了。它在 Astro 5 被弃用、Astro 6 被移除。content collections 用 getCollection()，原始文件导入用 import.meta.glob()。
• Next.js 必须用 Vercel 吗: 不是，但 Vercel 最省心。自己托管 Node 服务器或用 adapter 都行，只是你得自己扛 Vercel 帮你扛掉的那部分运维。

参考来源

• Next.js 16 发布说明 — Turbopack 默认、Cache Components、proxy.ts、Node 20.9+
• Astro v6 升级指南 — Node 22.12+、移除 Astro.glob()、Live Content Collections
• Vercel 定价 — Hobby（非商用）对比 Pro 每席位 20 美元

相关阅读

• Astro 适合做什么网站
• Markdown / MDX 内容站搭建
• Astro SEO 基础

标签: #独立开发 #Astro #Next.js #对比

相关文章

独立开发 / 建站指南

Astro 图片优化 2026：AVIF / layout / priority

2026 年的 Astro 图片管线最佳实践：AVIF 优先的 Picture、已转正的响应式 layout、LCP 图的 priority 快捷写法，以及大多数教程还没讲的 Astro 6.1 编码器配置。

2026/05/23 #独立开发 #Astro

独立开发 / 建站指南

Astro 增量内容更新：不用全量重建

3000 页的 Astro 站点，改一篇文章不重建整站：Content Layer 缓存、按需渲染路由、hash 卡 CI、按文件 CDN 刷新。2026 年 6 月实测的工作流。

2026/05/23 #独立开发 #Astro

独立开发 / 建站指南

Astro 适合做什么网站

Astro 6 决策指南（2026 年 6 月）：什么项目形态适合 Astro，什么时候该换 Next.js 或 Hugo，以及动手前用一天 spike 验证清楚。

2026/05/17 #独立开发 #Astro

独立开发 / 建站指南

Astro 6 静态站怎么做分类与标签页

用 Astro 6 的 Content Layer（glob + file 加载器）做分类与标签页：可扩展、能排名、还能绕开薄页陷阱的实战做法。

2026/05/17 #独立开发 #Astro

独立开发 / 建站指南

Astro Content Collections 入门：半小时上手（Astro 6）

面向 Astro 6 的 Content Collections 上手指南：glob() loader、content.config.ts、Zod schema、render(entry)，让上千篇规模的站点依然好维护。

2026/05/17 #独立开发 #Astro

独立开发 / 建站指南

Astro 部署到 Firebase Hosting（2026）

把静态 Astro 站点正确部署到 Firebase Hosting：firebase.json 配置、缓存头、干净 URL，以及那个会让你 404 失效的 SPA rewrite 陷阱。

2026/05/17 #独立开发 #Astro