What is Next.js?

Next.js is a framework for building websites and web apps with React. If React is the engine that puts pixels on the page, Next.js is the car around it — wheels, steering, dashboard. It gives you routing, server rendering, data fetching, image optimization and a build pipeline, so you do not have to wire those things up yourself.

You write components in JavaScript and put them in files. Next.js looks at the files, figures out which URL each one belongs to, and serves them. That sentence is most of what you need to know to start.

React, briefly

React is a UI library. You describe what the screen should look like using small reusable functions called components. Components return something that looks like HTML, called JSX:

function Welcome() {
  return <h1>Hello, world</h1>;
}

React on its own does not know about URLs, servers, or how to ship your code to a browser. Those are the gaps Next.js fills.

What Next.js adds

• **Routing** — files inside the app folder become pages automatically.
• **Server rendering** — components can render on the server, sending finished HTML to the browser.
• **Data fetching** — you can fetch data right inside a component, on the server.
• **Asset pipeline** — images, fonts and CSS are optimized for you.
• **APIs** — you can write backend endpoints in the same project.

Server vs. browser

A big shift in modern Next.js is that components can run on the server by default. That means database calls, secret keys and slow APIs can live next to your UI code without leaking to the browser. When something needs to be interactive — a button, a form, a piece of state — you mark that piece as a client component. We cover this in detail in lesson 6.