What Next.js Is

React is a view library. Next.js is the framework you reach for when you need routing, server rendering, data fetching, and a production build pipeline without wiring all of that yourself.

What Next.js Gives You

Next.js wraps React with the pieces a real application needs:

• File-based routing through the app/ directory
• Server-side rendering (SSR), static generation (SSG), and incremental regeneration (ISR)
• React Server Components by default, with 'use client' to opt into client code
• Server Actions for mutations without writing API endpoints
• Built-in image, font, and script optimization
• A layered cache that spans fetch, route segments, and the router itself

It is maintained by Vercel and powers production sites like Notion, Hulu, TikTok, and Twitch.

Where It Sits

If you have used other frameworks, the family resemblance helps:

• Remix and Nuxt are similar full-stack frameworks, for React and Vue respectively
• Astro is content-first, with a different mental model around islands
• Next.js leans into React Server Components more aggressively than the others

Next.js 15 at a Glance

The current era of Next.js has settled on a clear default stack:

// app/page.tsx — a server component, the default
export default async function HomePage() {
  const posts = await fetch('https://example.com/posts').then((r) => r.json());
  return (
    <main>
      <h1>Latest Posts</h1>
      <ul>
        {posts.map((p: { id: string; title: string }) => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
    </main>
  );
}

App Router is the default, Turbopack powers the dev server, and partial prerendering is on the horizon. The next lesson scaffolds a project so you can see it run.