Next.js from zero
What Next.js takes off your hands – and what changes because of it
Next.js is React plus everything needed around it: routing, a server, bundling, images. The key difference: your components now run on the server by default.
With plain React you build a page that gets assembled in the browser. Everything else – which address maps to which view, how data arrives, how the whole thing is delivered – you have to put together yourself.
Those are exactly the parts Next.js brings along. You get routing through folders, a server that can run your components, ready-made image and font handling, and a deployment that works without configuration.
Words with a dashed underline can be clicked. Anything under “In more depth” can be skipped on a first pass. And if React itself is not solid yet: start with the React tutorial instead.
The one difference that changes everything
In plain React every component runs in the browser. In the Next.js App RouterToday's way of creating pages in Next.js: folders inside `app/` become addresses, and a `page.tsx` in one of them is the page.It replaces the older Pages Router. Server components, layouts that keep their state and streaming only exist here.→ it is the other way round: a component runs on the server by default and only sends its result to the browser.
// Runs on the server. No useEffect, no loading state.
export default async function Page() {
const posts = await db.post.findMany(); // direct data access
return (
<ul>
{posts.map((p) => (
<li key={p.id}>{p.title}</li>
))}
</ul>
);
}Plain React is a flat-pack kit arriving at the customer – the browser assembles everything. Next.js is a piece of furniture delivered assembled: the server puts it together and ships it. Only the parts that have to move come as a kit.
Less JavaScript in the browser, data without a detour through an API, and the content sitting in the HTML straight away – good for search engines and for first impressions. The price: you have to think about what runs where. That is what the next lessons are about.
Folders are addresses
app/
layout.tsx frame around everything
page.tsx /
blog/
page.tsx /blog
[slug]/
page.tsx /blog/my-article
about/
page.tsx /aboutOnly a page.tsx inside it makes the address reachable. A folder without one is purely structural – handy for organising files without creating an address.
The files Next.js knows about
page.tsx the content of this address
layout.tsx a frame that stays put while navigating
loading.tsx what to show while the page loads
error.tsx the safety net when something goes wrong
not-found.tsx when the address does not exist
route.ts answers with data instead of a pageThese names are reserved – Next.js recognises them by the file, not by an entry in some configuration. Every other file in the same folder is an ordinary module.
Getting started
npx create-next-app@latest my-app
cd my-app
npm run dev # development, http://localhost:3000
npm run build # build the production version
npm run start # try it out locallyIn development almost nothing is cached, so you see your changes immediately. After npm run build every cache kicks in – and suddenly a page is static that looked fresh before. People who do not know this spend a long time searching. More on that in the caching lesson.
▸ In more depth: App Router and Pages Router optional
In older projects and many tutorials you will find a pages/ folder instead of app/. That is the Pages RouterThe older approach using the `pages/` folder. It still works but no longer gets new capabilities.→ – the previous generation.
pages/ (old) app/ (today)
───────────────────────── ─────────────────────────
getServerSideProps async component with await
getStaticProps fetch + revalidate
_app.tsx / _document.tsx layout.tsx
everything runs in the browser server components by default
no streaming streaming and SuspenseBoth work side by side in the same project, which makes migrating easier. But only the App Router gets new capabilities. For a new project there is no reason left to start with pages/.
A great many answers online still talk about getServerSideProps and getStaticProps. If a guide uses those names, it describes the old router – and does not match what you are learning here.
Does it stick?
5 questions on this lesson. Wrong answers show up in your stats.