Glossary

Every technical term from the tutorial, explained in plain language. In the text these words are underlined with dashes and can be clicked.

Router & files

App Router: Today'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.
Dynamic segment: A folder in square brackets, `[slug]`, standing in for any value at that position. `[...all]` catches any number of levels, `[[...all]]` also covers the empty case.
error.tsx: Catches errors from the area below and shows something readable instead. Has to be a client component.
Intercepting routes: Catching an address and showing it differently – a photo as an overlay rather than its own page, as long as you came from the list.
layout.tsx: A frame around everything below it – header, navigation, sidebar. It stays put while you navigate and keeps its state.
loading.tsx: What Next.js shows while the page below is still loading. Behind the scenes it is a Suspense boundary.
Middleware: Code running before every matching request – for redirects, languages or access control. It runs in a restricted environment: no database access, no Node modules.
not-found.tsx: Shown when an address does not exist or your code calls `notFound()`.
page.tsx: The file that makes up the content of an address. Without it the folder is not a reachable page.
Pages Router: The older approach using the `pages/` folder. It still works but no longer gets new capabilities.
Parallel routes: Several areas of one page filled at the same time and independently of each other. Their folders start with `@`.
Route group: A folder in round brackets, `(marketing)`, purely for organising files – it does not appear in the address.
Route handler: A `route.ts` that answers an address without being a page – your way to a custom API.
Route segment: A folder inside `app/` matching one piece of the address: `app/blog/[slug]` covers `/blog/my-article`.
template.tsx: Like a layout, but rebuilt on every navigation. For things that should start over each time – a fade-in animation, say.

Rendering & delivery

"use client": The line at the top of a file saying: from here on everything runs in the browser. It applies to the file and everything it imports – which is why you put it as deep in the tree as possible.
"use server": Marks a function as a server action: the browser may call it, but it executes on the server.
Client boundary: The point where a server component pulls in a client component. From there on everything ends up in the browser bundle.
Client component: A component that runs in the browser and can therefore use state, hooks and clicks. Marked with `"use client"` at the top of the file.
Dynamic rendering: The page is produced fresh on every request. Necessary as soon as it depends on cookies, headers or search params.
Hydration: The moment React takes over the server-delivered HTML in the browser and clicks start working.
ISR: A static page with an expiry date: after the configured time Next.js rebuilds it in the background. Short for Incremental Static Regeneration. Configured through `revalidate`.
Partial Prerendering: Serve the static shell immediately and stream the dynamic holes into it – both on one page.
RSC payload: The data format the server uses to send the result of its components to the browser – not HTML, but a description.
Server action: A function that runs on the server and that you can call straight from a form or a click – with no API in between.
Server component: A component that only runs on the server. It may fetch data directly but cannot handle clicks or use hooks. In the App Router this is the default – you do not have to do anything for it.
Static rendering: The page is produced at build time and then served identically to everyone. Fast and cheap – the default where possible.
Streaming: The page is sent in pieces: whatever is ready appears immediately, slow parts follow.
Suspense: An area showing a placeholder while something inside it is not ready – the basis for streaming.

Data & caching

Data cache: Next.js remembers `fetch` responses across requests and deploys, until you declare them stale.
Dynamic functions: `cookies()`, `headers()` and `searchParams`. Use one and the page can no longer be static.
Fetching on the server: In a server component you write `const data = await fetch(...)` straight in the component – no useEffect, no loading state.
Full route cache: The finished HTML of a static page, produced at build time and served directly afterwards.
generateStaticParams: Tells Next.js at build time which concrete values a dynamic segment should take – so it can turn them into static pages.
Request memoization: The same `fetch` used several times while building one page only really runs once.
revalidate: The setting for how many seconds cached data counts as fresh.
revalidatePath / revalidateTag: Targeted invalidation: after saving, refetch exactly the pages or data that are affected.
Router cache: The store in the browser: navigating back shows the page instantly from memory.
server-only: A tiny package that breaks the build if a file accidentally ends up in the browser. Protection for code holding secrets.
Waterfall: Two loads running one after the other although they could run side by side – the most common slowdown.

Around it

Draft mode: A switch that temporarily makes static pages dynamic – so editors can see unpublished drafts.
Edge runtime: A lightweight execution environment close to the user. Quick to start, but can do less than Node.
Environment variables: Values from `.env`. Only those starting with `NEXT_PUBLIC_` reach the browser – everything else stays on the server.
generateMetadata: The function you use to build title and description from loaded data – the article name from the database, say.
Metadata: A page's title, description and preview image – either as an exported object or as a function that computes them.
next/font: Downloads fonts at build time and puts them next to your code – no request to Google, no jumping text.
next/image: The image component that handles size, format and loading behaviour for you – and saves most of the load time.
next/link: An internal link that prefetches its target in the background as soon as the link becomes visible.
Turbopack: The bundler Next.js now uses by default – considerably faster than the old route.

Hirefullstack

Need React firepower on your team?

We have been building React and Next.js applications for clients across Germany for years – as a single expert, as reinforcement for an existing team, or as a complete Scrum team.

Talk about your project →