TodayTools

Next.js flashcards

The React framework for full web apps, with routing, server rendering and data built in.

Donate
Beginner friendly, starts from zero
Section
How to study
0
Next.jsStart from zero · 1 of 12

What is Next.js, in one plain sentence?

Next.js is a toolkit for building websites with React that sets up , links, speed and search-friendliness for you.

React gives you bricks; Next.js gives you the whole building plan.

All topics

Next.js at a glance

Next.js is a toolkit that turns React components into a complete, fast website.

Like a house with fixed hallways: the layout stays, and only the room you enter changes.

Words you will meet

Component
A reusable piece of a page, written as a function
Route
A web address your site answers, like /pricing
Page
The page.tsx file that shows at a route
Layout
A wrapper with shared parts like a header that stays on screen
Server Component
A component that runs only on the server and sends HTML
Client Component
A component marked "use client" that also runs in the browser
Build
The finished, optimised copy of your site for real visitors

The steps

  1. 1. Start from zero (12 cards): What Next.js adds to React, and the web and React words it builds on.
  2. 2. Core basics (16 cards): How the App Router turns folders into pages, and where your code actually runs.
  3. 3. Next steps (17 cards): Loading and error states, Route Handlers, Server Actions, caching and env vars.
  4. 4. Go deeper (17 cards): Streaming, the server-client boundary, Cache Components, proxy, security and deployment.
All 12 cards in Start from zero
What is Next.js, in one plain sentence?
Next.js is a toolkit for building websites with React that sets up pages, links, speed and search-friendliness for you.
What problem does Next.js solve?
A plain React site sends the browser an almost empty page and builds it with JavaScript, which is slow on weak phones and hard for search engines. You also had to wire up pages, links and loading yourself.
Where do you already meet sites like this?
Shop, news and company websites where the first page appears quickly and clicking a link swaps the page instantly without a full white flash.
What everyday thing is Next.js like?
A house with fixed rooms: the hallway and roof (the layout) stay put, and you only swap the furniture in the room you walk into (the page).
What are a browser, a server, a URL and HTML?
A browser asks a server, a computer on the internet, for a URL (a web address like /pricing). The server sends back HTML, the text that describes the page.
Which React words does Next.js assume?
A component is a reusable piece of a page, written as a function that returns HTML-like tags (JSX). State is what a component remembers, like a counter, and a hook is a use... function such as useState that gives it that memory.
Which JavaScript and TypeScript words will you see?
TypeScript is JavaScript with labels for kinds of values, in .ts and .tsx files; export default shares the main thing a file makes. A Promise is a value that arrives later, and await waits for it inside an async function.
What do rendering, Server Components and Client Components mean?
Rendering is turning components into HTML. Server Components render on the server and send only HTML, while a file starting with the directive line "use client" makes Client Components that also run in the browser, adding to its download (the bundle).
What are routes, pages and layouts?
A route is a URL your site answers. In Next.js each folder inside app/ is a part of the URL, a page.tsx file is what shows there, and a layout.tsx wraps pages with shared parts like a header.
Your first tiny win: what does this file show, and where?
Saved as app/page.tsx, this component shows a heading at /, the home URL. export default tells Next.js this is the page.
What do you need before you start?
Node.js 20.9 or newer (it runs JavaScript outside the browser and brings npm, the package installer), a terminal, a text editor and a browser. npm run dev then runs a dev server, a preview of your site at localhost:3000 on your own computer.
What will you be able to do after this topic?
Create a Next.js project, add pages and shared layouts, link between them, load data on the server, add fast images and page titles, and make a production build.
Next.js cheatsheet

Special files

  • page.tsx Makes the folder a public route
  • layout.tsx Shared wrapper, stays mounted
  • template.tsx Like layout, remounts on navigation
  • loading.tsx Suspense fallback for the segment
  • error.tsx Error boundary (client)
  • not-found.tsx UI for notFound() and 404s
  • default.tsx Fallback for a parallel slot (required in 16)
  • route.ts HTTP handler: GET, POST...
  • proxy.ts Runs before routing (was middleware.ts)
  • instrumentation.ts register() and onRequestError hooks

Folder conventions

  • [slug] Dynamic segment
  • [...parts] Catch-all segment
  • [[...parts]] Optional catch-all
  • (group) Group, not in the URL
  • @slot Parallel route slot
  • _lib Private, never routed
  • (.)photo Intercept same level
  • (..)photo Intercept one level up

Server APIs

  • await params Dynamic segment values (Promise)
  • await searchParams Query string (Promise)
  • (await cookies()).get("session") Read a cookie
  • (await headers()).get("x-forwarded-for") Read a request header
  • redirect("/login") Throw a redirect
  • notFound() Throw a 404
  • after(() => log()) Run work after the response
  • import "server-only" Fail build if bundled for client

Caching (Next.js 16)

  • fetch(url) Not cached by default
  • fetch(url, { cache: "force-cache" }) Cache this request
  • { next: { revalidate: 300 } } Refresh at most every 5 min
  • { next: { tags: ["posts"] } } Tag for on-demand refresh
  • "use cache" Cache a function or component
  • cacheLife("hours") Set lifetime inside "use cache"
  • revalidateTag("posts", "max") Stale-while-revalidate a tag
  • updateTag("posts") Expire now, from a Server Action
  • revalidatePath("/blog") Refresh one path

Client hooks

  • useRouter().push("/x") Navigate in code
  • useRouter().refresh() Re-fetch server data
  • usePathname() Current path
  • useSearchParams() Read query (wrap in Suspense)
  • useActionState(action, init) Action result + pending
  • useOptimistic(state, fn) Instant UI before the server replies
  • useFormStatus() Pending state inside a form

CLI

  • npx create-next-app@latest app --yes New project with defaults
  • next dev Dev server (Turbopack)
  • next build Production build, prints route types
  • next build --webpack Build with webpack instead
  • next start -p 8080 Serve the build on a port
  • npx @next/codemod@canary upgrade latest Upgrade with codemods
  • next info Versions for bug reports
Donate