What is Next.js? — Next.js Complete Guide

ANALOGY

Real-world analogy: Building a house. You could build a house from raw materials — bricks, cement, timber. But most builders use prefabricated components — pre-made walls, standard frames, standard plumbing fittings. Next.js is like those prefabricated components for web apps. You still design and build the house — but you're not starting from absolute zero every time.

What Next.js gives you out of the box

🗂️

File-based Routing

Create a file, get a URL. No router configuration needed.

⚡

Server-Side Rendering

Pages can be generated on the server for speed and SEO.

🔌

API Routes

Build backend endpoints directly inside your Next.js project.

🖼️

Image Optimisation

Automatic compression, lazy loading, and modern formats.

🎨

CSS & Tailwind Ready

Scoped CSS Modules or utility-first Tailwind — both work out of the box.

🚀

Deploy Anywhere

One command to go live on Vercel. Also runs on any server.

The React foundation

Next.js is built on React. React is a JavaScript library for building user interfaces using reusable components. A component is just a function that returns HTML-like code. Everything in a React/Next.js app is made of components.

A React component — the building block of every Next.js app

jsx

// A component is just a function that returns "JSX" (HTML-like syntax)
function WelcomeBanner({ name }) {
  return (
    <div>
      <h1>Welcome back, {name}!</h1>
      <p>Ready to keep learning?</p>
    </div>
  );
}

// You use components like custom HTML tags:
// <WelcomeBanner name="Nelson" />
// <WelcomeBanner name="Alice" />

// Each one renders independently with its own data

NOTE

What is JSX?. JSX is the HTML-like syntax you see inside JavaScript files. It's not real HTML — it's a syntax extension that gets compiled to JavaScript. The key difference: use className instead of class, use {} for JavaScript expressions inside the markup, and all tags must be properly closed.