If you search for a framework to build a website, two names come up constantly: Astro and Next.js. Both are popular, both are well supported, and both can produce fast sites. But they start from different ideas, and choosing the wrong one makes a simple project harder than it needs to be.

The short version: Astro is built for content-focused websites, and Next.js is built for web applications. A marketing site, a portfolio, a blog and a documentation site are content. A dashboard, a social network and an online tool are applications. Many real projects fall clearly on one side, and that settles the choice.

This article compares the two for the kind of site most people ask us about: a site that presents a business, a person or a product.

The core difference

Astro renders your pages to HTML at build time by default and sends that HTML to the visitor without a JavaScript framework attached. If a part of the page needs interactivity, such as a menu or a carousel, you add JavaScript to that part only. This approach is often called islands: static content with small interactive islands.

Next.js is a framework built on React. Every page is a React component, so the visitor’s browser usually receives some React JavaScript to make the page interactive. In return, you get the full React model for building complex, stateful interfaces, with routing, data loading and server rendering built in.

Neither is better in general. They optimize for different things.

Side-by-side comparison

JavaScript sent to the visitor

  • Astro: none by default. You opt in per component.
  • Next.js: a React runtime plus the code for each page, even on mostly static pages.

What you write

  • Astro: .astro files that look like HTML with a small script block on top. You can also use React, Vue, Svelte or other UI libraries inside them when needed.
  • Next.js: React components in JSX, with React concepts such as state, effects and server versus client components.

Content

  • Astro: content collections let you keep posts, projects or products as Markdown files with a typed schema, which suits blogs and portfolios very well.
  • Next.js: you can use Markdown or a CMS, but you set up the content pipeline yourself or with extra libraries.

Best at

  • Astro: marketing sites, landing pages, portfolios, blogs, documentation, e-commerce storefronts that are mostly content.
  • Next.js: dashboards, logged-in apps, products with lots of client-side state and real-time features.

Hosting

  • Both can be deployed as static sites or with a server, and both run on the common platforms such as Vercel, Netlify and Cloudflare.

Learning curve

  • Astro: gentle if you know HTML and CSS.
  • Next.js: needs React knowledge first, then the framework’s own concepts.

Performance for content sites

For a marketing site, the visitor mostly reads and scrolls. Sending less JavaScript means the page can be interactive sooner, which helps the Core Web Vitals that Google measures, especially on a phone with a weak connection.

Astro’s default makes this easy: you get a lightweight page without doing anything special. Next.js can also build fast static pages, and a well-built Next.js site can score very well, but you have to be more deliberate about what ships to the browser. The gap shows most on simple pages, where Astro’s approach has nothing extra to remove.

Keep in mind that the framework is only part of performance. Large images, many fonts and heavy animation libraries slow down a site in either one.

Working with an AI agent

More people now build and edit sites with AI agents like Claude Code, Codex and Cursor, and that is worth considering when you choose.

Astro has a few traits that help here:

  • Small, readable files. A .astro component is HTML-like, so an agent can see the structure and the text in the same place.
  • File-based routing. A page is a file, so “add an about page” is one new file.
  • Content collections. Text and projects live in Markdown with named fields, so an agent edits content without touching layout.
  • Fewer concepts. There is no hydration, no state management and no client/server component boundary to get wrong in a simple site.

Next.js is also very well known by AI tools and has a huge amount of documentation behind it, so agents write it fluently. Where it gets harder is the number of ways a Next.js project can be set up. The App Router, server and client components, caching rules and data fetching all affect how a change should be made, and a simple edit can run into them.

In both cases, the best results come from a project that explains itself with an AGENTS.md file and a clear structure. We cover that in What is an AI-ready website template?.

When to choose Astro

Choose Astro when:

  • The site is mostly pages with text, images and a few interactive parts.
  • You want the best default performance with the least effort.
  • You publish a blog, documentation or case studies as Markdown.
  • You want to change the site often, yourself or with an AI, without deep framework knowledge.
  • You may want to mix in a few interactive components using a library you already like.

When to choose Next.js

Choose Next.js when:

  • You are building an application: user accounts, dashboards, saved data, real-time updates.
  • Most of the interface is highly interactive and shares state across the page.
  • Your team already builds everything in React and wants one model for the whole product.
  • You need server features tightly connected to the interface, and you want a single framework for both.

Can you use both?

Yes, and many companies do. A common setup is a Next.js app for the product at one address and an Astro site for the marketing pages, blog and docs at another. The marketing team edits content freely, and the product team keeps the app in React. If you are unsure, start the public site in Astro. It is easy to add an app later.

A decision shortcut

Ask yourself: “Will visitors mostly read this, or mostly use it?”

  • Mostly read: choose Astro.
  • Mostly use: choose Next.js.
  • Both: split them.

Where to start

If you decide on Astro, you do not need to start from a blank project. Every Weblisy template is a complete Astro project with pages, components and styles, ready to customize with your favorite AI. Before you pick one, run through the 10-point checklist for choosing an Astro template. You can also try the workflow with the free Michael portfolio template.