Meet Next.js

lesson 1-2 · ~8 min · 2/29

Next.js in one sentence

Next.js is a framework built on React that adds the production layer: routing, server rendering, data fetching, and deployment tooling.

Every component you write in Next.js is a React component. Same JSX, same props, same hooks (where allowed). Nothing from the React course is wasted. Next.js just decides the questions React leaves open:

Question	Next.js answer
How do URLs map to pages?	File-based routing in the `app/` directory
Where does rendering happen?	On the server by default, in the browser when you opt in
How do I fetch data?	`await` it inside server components
How do I ship it?	`next build`, then deploy (e.g. Vercel)

Next.js wraps the React you already know with the production layer: routing, server rendering, data fetching, and build plus deploy tooling.

A page is just a component

Here is a complete Next.js page. Read it line by line:

// app/about/page.js
export default function AboutPage() {
  return <h1>About us</h1>;
}

Line 1 (the comment) is doing real work conceptually: the file path app/about/page.js is what makes this reachable at the URL /about. No router setup, no <Route> element.
The export default function is an ordinary React component. Next.js finds it, renders it on the server, and sends real HTML to the browser.

That is the whole trick of file-based routing, and it is the subject of Unit 2.

Quiz

In Next.js, what makes the AboutPage component above appear at the URL /about?

Problem

Your friend says: 'If I learn Next.js, my React knowledge is obsolete.' In one word, is that true or false?