What is Next.js?
Next.js is a framework built on top of React that adds the things real websites need — routing, server rendering and a backend.
What you will learn
- Explain what Next.js adds to plain React
- List the big problems it solves
- Know when to reach for Next.js
React is great, but it leaves gaps
You already know React — it builds user interfaces out of components. But a plain React app (like one made with Vite) does not come with answers to some everyday questions:
- How do I make different pages at
/aboutand/blog? - How do I get good SEO (Search Engine Optimisation — helping Google read and rank my pages) so Google can read my pages?
- Where do I put a small backend to talk to a database?
- How do I make the first load fast instead of a blank screen?
You can solve all of these yourself by gluing libraries together. Next.js solves them for you, in one tidy package.
A friendly definition
Next.js is a React framework: it is still React, but with batteries included. It adds file-based routing, server rendering, API routes (a backend), image and font tools, and one-command deployment.
| Need | Plain React (Vite) | Next.js |
|---|---|---|
| Pages / routing | Add a router library yourself | Built in — from your folders |
| SEO-friendly HTML | Hard (renders in the browser) | Built in (renders on the server) |
| A backend / API | Build a separate server | Built in (route handlers) |
| Deployment | Configure it yourself | One command to Vercel |
Tip: Think of React as the engine and Next.js as the whole car built around that engine — wheels, seats and a steering wheel included. You still drive with React; Next.js gives you everything else.
Watch out: Next.js is not a replacement for React. Everything you learned — components, props, useState, useEffect — still works. Next.js only adds structure and server features around it.
Q. Which of these does Next.js add on top of React?
✍️ Practice
- List three websites you use and guess which would benefit from server rendering and SEO.
- Write one sentence explaining the difference between React and Next.js to a friend.
🏠 Homework
- In 3-4 sentences, explain why a company building a public, SEO-important site might choose Next.js over a plain React app.