AI AI Tools Guidebook
Indie Dev & Website Building

Astro vs Next.js for a Content Site (June 2026)

Astro 6 vs Next.js 16 for content sites: real version facts, hosting costs, a decision checklist, and the migration tax nobody warns you about.

Published: Updated: Author: AI Productivity Guide Team 🌐 查看中文版本

Both Astro and Next.js can build a content site. They are different shapes, and the right pick is the one that matches the next 12 months of your work, not the one that sounds more powerful. This page is current as of June 2026 and compares the shipping versions: Astro 6 (stable since March 10, 2026) and Next.js 16 (stable since October 21, 2025).

TL;DR

  • Content-first site (blog, docs, marketing, an SEO-driven library): pick Astro 6. Zero JS by default, simpler hosting, cheaper to run, and getCollection() gives you typed content out of the box.
  • App with a content section (SaaS dashboard, auth-gated routes, lots of API endpoints): pick Next.js 16. Server Components and the new Cache Components model are built for request-time logic.
  • Money math: on a static host (Cloudflare Pages, Netlify, Firebase Hosting Spark), an Astro site can run at $0/month for commercial use. A Next.js app on Vercel’s Hobby plan is non-commercial only — the moment you monetize you need Vercel Pro at $20/seat/month or a self-hosted Node server.
  • The one rule: picking the wrong one is recoverable; migrating mid-project is the expensive mistake. It usually costs 2-3x your estimate.

What each framework is in 2026

Before the decision steps, one paragraph of definition each so the rest isn’t marketing decode.

Astro 6

Astro is a content-focused, static-first framework. Its core idea is Astro islands: ship zero JavaScript by default, then hydrate individual components on demand. You can mix React, Vue, Svelte, Solid, and Preact inside one project, each treated as an independent island. Pages are .astro files — HTML with a frontmatter script for data. As of Astro 6, the legacy Astro.glob() helper is removed; you query content with the typed Content Layer API (getCollection()), and Live Content Collections (stable in v6) can fetch from a CMS or database at request time. Astro 6 requires Node 22.12.0 or later.

Next.js 16

Next.js is a React-first, full-stack framework built by Vercel. The App Router pairs file-based routing with React Server Components. As of Next.js 16, Turbopack is the default bundler (2-5x faster production builds, up to 10x faster Fast Refresh), Cache Components replace the old implicit caching with an explicit opt-in "use cache" model, and middleware.ts is being renamed to proxy.ts. It ships React 19.2 and requires Node.js 20.9.0+ and TypeScript 5.1+. The learning curve is real: the caching model and RSC boundaries have a lot of subtle behavior.

Differences at a glance

DimensionAstro 6Next.js 16
Default renderstatic / islandsdynamic (RSC) at request time
Default client JSzeroReact 19.2 runtime
BundlerVite (Rolldown rolling out)Turbopack (default)
Min Node version22.12.020.9.0
Content loadinggetCollection() (typed)fs / fetch, ad-hoc
Caching modelstatic by defaultCache Components / "use cache"
Learning curvelowhigher (RSC + caching)
Hostingany static host, edge, or NodeVercel optimal; others via adapter
Best forblog, docs, marketing, content librarydashboards, SaaS, e-commerce, APIs

Bootstrap commands side by side

# Astro 6
npm create astro@latest -- --template blog
cd my-astro-site
npm run dev    # Vite, very fast HMR

# Next.js 16 (App Router)
npx create-next-app@latest --typescript --app
cd my-next-app
npm run dev    # Turbopack by default

A first-page file in each framework. Note the Astro example uses getCollection() — Astro.glob() no longer exists in v6:

---
// src/pages/index.astro
import { getCollection } from 'astro:content';
const articles = await getCollection('blog');
---
<h1>My site</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>My site</h1>
      <ul>
        {articles.map(a => <li key={a.slug}><a href={`/${a.slug}`}>{a.slug}</a></li>)}
      </ul>
    </>
  );
}

Astro ships HTML with no JS for a static list like this. Next ships a small React runtime even when nothing on the page is interactive.

The hosting bill is the real decision

This is where the two frameworks diverge in money, not just developer taste.

  • Astro outputs plain static files by default. Host them free for commercial use on Firebase Hosting (Spark plan), Cloudflare Pages, or Netlify. No server runtime means no cold starts and a tiny attack surface.
  • Next.js is happiest as a running Node/edge server. On Vercel the Hobby plan is free but explicitly non-commercial and capped at 100 GB bandwidth/month; a monetized site needs Vercel Pro at $20 per seat/month (1 TB transfer included, then $0.15/GB) or a self-managed Node host. You can run next build with output: 'export' for a fully static export, but then you’ve turned off most of the reason to use Next.js.
ScenarioAstroNext.js
Static blog, commercial$0 on Firebase Spark / Cloudflare Pages$20/seat on Vercel Pro (Hobby is non-commercial)
1M monthly views, mostly staticCDN bandwidth onlyVercel Pro + bandwidth overages
Auth + dashboard + API routesneeds an adapter + server, awkwardnative fit

If your site is 80%+ articles, Astro’s hosting story alone can save you the price of a Pro seat every month.

A 7-step decision checklist

Use the definitions above as the mental model — Astro = islands + static-first; Next.js = RSC + full React — then walk these steps:

  1. List the 5 most complex pages your site needs (checkout, user dashboard, dynamic feed, etc.).
  2. Label each “static-friendly” or “needs server logic at request time”.
  3. If 4 of 5 are static-friendly, default to Astro. If 3+ need server logic, lean Next.js.
  4. Prototype the hardest page in your top choice in one day to surface real friction.
  5. Price the hosting honestly: is a $20/month Vercel Pro seat justified, or would a $0 static host do?
  6. Compare DX for real: npm run dev startup, hot reload, and how MDX/Markdown editing feels day to day.
  7. Commit to one and stop reading framework-comparison articles for 60 days.

Common pitfalls

  • Picking Next.js because it’s more “popular” — popularity doesn’t pay your monthly Vercel bill on a static site.
  • Picking Astro because it’s “simpler”, then trying to bolt a full app inside it.
  • Switching mid-project — the migration almost always runs 2-3x longer than estimated.
  • Comparing generic benchmarks instead of testing your real content pipeline at your real page count.
  • Forgetting that team familiarity usually beats framework features for a small team.
  • Copying old Astro tutorials that still call Astro.glob() — it was removed in Astro 6; use getCollection().

Who this is for

Indie builders deciding between Astro and Next.js for a content-first site, who want a concrete answer plus the cost math behind it.

FAQ

  • Which has better SEO?: Both can rank at the top. SEO comes from content, structure, internal links, and metadata, not from framework A vs B. Astro’s zero-JS default just makes good Core Web Vitals easier to hit without tuning.
  • Which is faster out of the box?: Astro, because it ships no JavaScript by default, so it tends to win Core Web Vitals with no effort. Next.js 16 can match it with React Compiler, Cache Components, and careful RSC boundaries — but that’s effort you have to spend.
  • Which has a bigger ecosystem?: Next.js, by a wide margin — more integrations, hosts, and React libraries. Astro’s ecosystem is smaller but covers content-site needs (MDX, content collections, image optimization, sitemaps) well.
  • Can I mix them?: You can host different subdomains in different frameworks, but mixing within one site is rarely worth the complexity. Pick one per domain.
  • Is Astro.glob() still a thing?: No. It was deprecated in Astro 5 and removed in Astro 6. Use getCollection() for content collections and import.meta.glob() for raw file imports.
  • Do I have to use Vercel for Next.js?: No, but it’s the smoothest path. Self-hosting a Node server or using an adapter works; you just take on the ops that Vercel handles for you.

Sources

Tags: #Indie dev #Astro #Next.js #Comparison

Related Articles