Introduction to Next.js

Next.js is a React framework for building full-stack web applications. Created and maintained by Vercel, it takes the React library — which by itself only handles rendering components in the browser — and wraps it with everything a production application actually needs: routing, server-side rendering, data fetching conventions, bundling, and a long list of performance optimizations that work out of the box.

You can think of React as the engine and Next.js as the car built around it. React gives you components, state, and a rendering model. Next.js gives you the folder structure that becomes your URLs, the ability to render pages on the server before they ever reach the browser, built-in image and font optimization, API endpoints living alongside your UI code, and a deployment story that just works.

What Next.js adds on top of React

File-based routing — creating a folder with a page.tsx file inside it automatically creates a route, no router configuration required.
Server rendering built in — components render on the server by default, sending fully-formed HTML to the browser instead of an empty shell.
Data fetching conventions — you can await data directly inside a Server Component, no extra client-side data-fetching library required.
Automatic optimizations — images, fonts, and third-party scripts are optimized by dedicated Next.js components with no manual setup.
Full-stack capability — Route Handlers let you write backend API endpoints in the same project, right next to the pages that use them.

Note

Next.js is not a replacement for React — it is built directly on top of it. Every Next.js component is still a React component. Choosing Next.js means choosing to add a framework layer on top of React rather than assembling routing, rendering, and bundling tools yourself.

A quick teaser: creating a page

In a Next.js App Router project, creating a new page is as simple as adding a folder and a file. Create app/about/page.tsx with a default-exported component, and the route /about exists — no router configuration, no route registration.

app/about/page.tsx

TSX

export default function AboutPage() {
  return <h1>About Us</h1>
}

Visiting /about renders: About Us

Tip

Every later page in this tutorial series builds on this idea of folders-as-routes. Getting comfortable with it early makes everything else — layouts, dynamic routes, route groups — click into place much faster.

Where this series is headed

This tutorial series walks through Next.js from first principles, using the App Router (the modern, recommended default since Next.js 13) as the primary paradigm throughout. You will learn how routing, layouts, Server and Client Components, data fetching, caching, styling, and deployment all fit together into one coherent framework.