Skip to content

Next.js Beyond the Basics

Glossary

109 terms from Next.js Beyond the Basics, in plain words, each with the chapter that teaches it.

#

"use cache"
A directive at the top of a function that tells Next.js to remember its result. Each distinct set of arguments is cached separately, so getProduct("DEC-12") and getProduct("ESP-12") get their own entries.
"use server"
A directive that marks the exported async functions in a file as server actions. Forms in the browser can call them, but they run on the server.
.all(), .get() and .run()
Methods that finish a Drizzle query on SQLite. `.all()` returns every row, `.get()` returns the first row or `undefined`, and `.run()` is for queries that return no rows.
.bind(null, value)
A JavaScript method that makes a new function with its first argument already filled in. Kettle & Crane uses it so a stock form can call updateStock("DEC-12", formData) without sending the SKU in a field.
.dockerignore
A file listing what `COPY . .` must skip, like .gitignore. It keeps node_modules, local databases and secrets out of the image.
.env.local
A file of environment variables, such as DB_FILE or secrets, that stays out of Git. Next.js reads .env.local by itself, and on the server the same job is done by .env.production.

A

API key
A secret value a program sends with each request, such as in the x-api-key header, to prove who it is. Alex's shipping app uses one to call the orders API.
APIError
The error type Better Auth throws when it refuses input, such as a short password. The sign-in actions catch it and send its message back to the form.
aria-invalid and aria-describedby
HTML attributes that tie an error message to its input for screen readers. aria-invalid marks the field as wrong, and aria-describedby points to the error text.
Authentication
Checking who someone is, usually with an email and password. Signing in as Maya is authentication.
Authorization
Checking what a signed-in person may do. Maya may see her own orders, but only staff such as Jo may change stock.
await connection()
A function from `next/server` that makes Next.js wait for a real visitor before continuing, so the code after it runs on every request instead of once at build time. It is used before reads of data that must be fresh, such as a database query.

B

Better Auth
A free library that handles accounts, passwords and sessions, and keeps them in your database through Drizzle. kc-shop uses it for sign-up and sign-in.
better-sqlite3
The Node.js package that opens SQLite files, and the driver Drizzle uses here. It is synchronous, so queries are not awaited.

C

Cache tag
A label given to cached data with cacheTag("products") so it can be expired by name later. One tag reaches every page that used the data.
cacheLife
A function used inside a "use cache" function to say how long the cached result stays good, for example cacheLife("hours"). Its profile names, like "max", are also used by revalidateTag.
Catch-all segment
A folder name like [...all] that matches any number of path parts. Better Auth's route handler uses it to receive every /api/auth/... request.
Clerk
A hosted service that runs user accounts for you, as an alternative to running Better Auth yourself.
Client router cache
Pages the browser keeps for a short time so going back is instant. The cache functions clear it for the visitor who ran the action.
config.matcher
The exported list in proxy.ts of the paths the proxy runs on. `:path*` means "and anything below", so /staff/:path* covers /staff/stock.
Container
A running copy of a Docker image. Replacing a container leaves data on its volume untouched.
Cookie
A small piece of text the browser stores for a site and sends back with each request. kc-shop uses cookies for the session token and the cart.
Cookie options (httpOnly, sameSite, secure)
Settings that protect a cookie. httpOnly hides it from page scripts, sameSite: "lax" stops other sites' forms sending it, and secure sends it only over HTTPS.
cookies()
A function from next/headers, awaited like headers(), that reads cookies and, in actions and route handlers, sets them. kc-shop uses it for the kc_cart cart cookie.
curl
A command-line tool that sends HTTP requests and prints the response. Flags such as `-i` (show status line and headers), `-H` (add a header), `-X` (set the method), `-d` (send a body), `-I` (headers only) and `-b` (send cookies) let you test APIs and check redirects.
Custom migration
An empty migration file created with `drizzle-kit generate --custom`, in which you write the SQL yourself. It is useful for things the schema can't describe, such as inserting starting rows like Kettle & Crane's products and orders.

D

Data access layer
Functions that fetch or change data and always check who's asking in the same place, so no page can forget the check. getOrder in kc-shop is an example.
Database
A program that stores organized data in tables so many visitors can read and change it safely. Kettle & Crane keeps products and orders in one.
Docker
A tool that packages a program with everything it needs, such as system files, Node.js and your code, so it runs the same anywhere.
Dockerfile
The recipe Docker follows to build an image, step by step. kc-shop's has a builder stage and a runner stage.
Drizzle ORM
A small, popular TypeScript ORM whose schema is plain TypeScript. It lets kc-shop query SQLite with typed code.
Drizzle Studio
A table viewer that opens in your browser with `npx drizzle-kit studio`, so you can look at and edit database rows.
drizzle-kit
Drizzle's command-line tool for generating and applying migrations and for opening Drizzle Studio.
Dynamic segment
A folder name in square brackets, such as [sku] or [id], that matches any value in that part of the URL. Its value arrives in params.

E

Edge runtime
A lighter environment Next.js can run code in, which cannot open files. That is why instrumentation.ts only opens SQLite when NEXT_RUNTIME is "nodejs".
Environment variable
A named setting, such as DB_FILE, PORT or BETTER_AUTH_SECRET, supplied from outside the code so secrets stay out of the source.
eq, lt, gt, and, asc, desc, inArray
Helper functions from drizzle-orm for conditions and sorting: eq means equal, lt and gt mean less and greater than, and combines conditions, asc and desc sort, and inArray matches any value in a list.
Error boundary
A component or file that catches an error while rendering and shows a fallback instead of crashing. With only app/error.tsx, an error in one streamed part replaces the whole page.

F

Foreign key
A column that must match a key in another table. Each order_items row must point to an order that exists.
FormData
The standard web object holding a form's submitted fields. A server action receives it and reads fields with formData.get("stock"), which gives text or null.
FormState
A TypeScript type describing what a form action returns: an optional `error`, per-field `fieldErrors` and an optional `message`. A form using `useActionState` reads these values to show validation errors or a success message.

H

Hash
A one-way fingerprint of some data that can't be turned back. Better Auth stores a hash of each password, never the password itself.
headers()
An async function from next/headers that returns the current request's headers. Reading it makes a page depend on the request, so it needs Suspense.
Health check
A small endpoint (here /api/health) that monitoring tools call to ask "are you alive?". It answers {"ok":true}, or a 500 error if the database can't be opened.
Host and X-Forwarded-Host headers
Request headers naming the site address. Server actions compare them with the browser's origin, so a reverse proxy must forward them.
HTTP header
A named value sent along with an HTTP request or response, such as x-api-key on a request or X-Robots-Tag on a response.
HTTP methods
The verb of an HTTP request, such as GET to read or POST to send data. A route handler exports one function per method it answers.

I

Image
A packaged program that Docker can run, built from a Dockerfile. A running copy of it is a container.
innerJoin
A Drizzle query step that combines rows from two tables where the given columns match. Jo's order list uses it to attach each product's name to an order line.
instrumentation.ts
A file in the project root whose register() function Next.js runs once as the server starts, before any request. kc-shop uses it to run migrations.

J

JSON
A plain-text format for data such as {"carrier":"UPS"}. APIs, request bodies and the cart cookie use it.

L

loading.tsx
A file beside page.tsx that shows a fallback for the whole page while it loads. Use it for pages that are one slow piece, and Suspense for finer parts.

M

maxAge
A cookie option setting its lifetime in seconds. The kc_cart cookie uses 30 days, which is 2,592,000 seconds.
Middleware
The older name for proxy.ts, used before Next.js 16. Older guides and the build output still say middleware.
Migration
A SQL file that brings the real database to the next version of the schema. `drizzle-kit migrate` applies those that haven't run yet.

N

NEXT_PUBLIC_ variables
Environment variables whose names start with NEXT_PUBLIC_ are written into the browser's JavaScript at build time. They are public, so never put secrets in them.
NextRequest
A web Request with Next.js extras, such as nextUrl (the parsed URL, with searchParams) and cookies. Route handlers and the proxy receive one.
NextResponse
What a proxy returns: next() carries on to the page, redirect(url) sends the browser elsewhere, and rewrite(url) shows another page's content while keeping the address bar.
notFound()
A function from next/navigation that shows the 404 page. kc-shop uses it for unknown SKUs and for staff pages shown to non-staff.
npm ci
A command that installs exactly the versions in package-lock.json. The Dockerfile uses it so builds are repeatable.

O

OAuth
A way to let people sign in with another account, like "Sign in with Google". Better Auth supports it through its socialProviders setting.
Optimistic check
A quick check that trusts a hint, such as a session cookie existing, without asking the database. The proxy uses it, so requireUser still does the real check.
ORM
A library that lets you query database tables with your language's code instead of SQL, and types every row so your editor catches mistakes.

P

Partial prerender
A page whose static parts are built ahead of time while parts inside Suspense wait for each visitor. Product pages show name and price at once, and "Checking stock…" until stock arrives.
Passkeys
A way to sign in with a key stored on your phone instead of a password. Better Auth offers it as a plugin.
PostgreSQL
A database server commonly used for large shops. Drizzle works with it by changing the dialect and driver.
Prerender
Building a page's HTML ahead of time during npm run build instead of per visit. Cached queries run during the build, so the database must exist then.
Primary key
The column that identifies each row, such as a product's sku or an order's auto-numbered id.
Progressive enhancement
A page that works as a plain form post without JavaScript and gets better once scripts load. Server action forms behave this way.
Promise
A value standing for a result that isn't ready yet. kc-shop starts getOrders without await and passes the promise down so fast parts don't wait.
Proxy
A function in proxy.ts that Next.js runs before every matching request, before any page or action. It can redirect, rewrite or add headers, and was once called middleware.

Q

Query string (searchParams)
The part of a URL after ?, such as ?status=placed or ?next=/account. Code reads it with request.nextUrl.searchParams or useSearchParams.

R

redirect()
redirect("/shop") from next/navigation sends the visitor elsewhere by throwing a special error, so call it last and never inside try/catch. Fixed moves belong in redirects() in next.config.ts, and permanent ones answer 308.
refresh()
A function from next/cache that re-renders the current page without touching any cache. It is right when only uncached data changed.
Request and Response
The standard web types that fetch uses and route handlers receive and return. Response.json(data, { status }) sends JSON with a status code.
requireUser and requireStaff
Helper functions that protect pages and server actions by checking who is signed in. `requireUser` redirects signed-out visitors to `/signin`, and `requireStaff` shows non-staff users the 404 page so outsiders can't tell staff pages exist.
returning()
A Drizzle step on insert or update that hands back the affected row, with its new id and defaults. On an update it gives undefined when no row matched.
revalidatePath
A next/cache function that throws away the cached data used by one page. Use it when you have no tag.
revalidateTag
Marks a tag stale so visitors get the old data once while fresh data loads in the background. The second argument "max" is recommended, and it works in route handlers.
Reverse proxy
A server in front of the app, such as nginx or Caddy, that handles HTTPS and passes requests on to port 3000.
Rewrite
Showing another page's content while keeping the address bar unchanged, unlike a redirect, which changes it.
Route group
A folder name in parentheses, like (auth), that organizes files without appearing in the URL.
Route handler
A route.ts file in app/ that answers HTTP requests with any response, usually JSON. It exports a function per method, such as GET and POST.
RouteContext, PageProps and LayoutProps
Type helpers Next.js generates, usable without an import, that type a route handler's context, a page's props and a layout's props. Params in them is a Promise.

S

Salt
Random data, different for every user, mixed into a password before hashing so a leaked database doesn't leak passwords.
Schema
The description of a database's tables and columns. In Drizzle it is a TypeScript file. (Zod also has schemas, which describe the shape of data.)
Self-hosting
Running the app on a machine you manage, such as Kettle & Crane's own server, instead of a hosting platform like Vercel.
Server action
An async function that runs on the server but that a form or button in the browser can call. Every action is a public endpoint, so it must validate input and check who is calling.
server-only
A package that makes the build fail if a Client Component imports the file, so database and session code never reaches the browser.
Session
A database record saying a browser is signed in, for example "this browser is Maya's for 7 days". It is found by the token in a cookie.
Skeleton
A gray placeholder shaped like content that is still loading, used as a Suspense fallback so the page doesn't jump.
SKU
A short product code, such as ESP-12, that identifies one product. kc-shop uses it as the products table's primary key and in product URLs.
sql tag
Drizzle's `sql` template tag for writing raw SQL, run with db.get. The health check uses it with `select 1`.
SQLite
A database stored in one file with no server to install. kc-shop keeps its data in kc.db.
Stage
One FROM section of a multi-stage Dockerfile. The runner stage copies only what it needs from the builder stage, so the shipped image stays small.
Standalone output
A build setting that produces .next/standalone with a small server.js and only the packages the app needs, so it runs with plain Node.js.
Status code
The number in an HTTP response that says how the request went: 200 OK, 201 created, 400 bad request, 401 not signed in or wrong key, 404 not found, 405 method not allowed, 307 temporary redirect, 308 permanent redirect, 500 server error.
Streaming
Sending a page in parts: the shell arrives at once and each Suspense part follows when its data is ready.
Suspense
A React component that shows a fallback while its children wait for data. kc-shop wraps every part that reads fresh data or request data in it.

T

Token
A long random value that proves something. The session token in the cookie means nothing without its session row, and can't be guessed.
Transaction
Several database changes that succeed or fail together. Placing an order adds items and lowers stock, and if one step throws, everything is undone.

U

updateTag
A next/cache function that expires everything with a tag right away, so the next read waits for fresh data. It only works in server actions and lets the user see their own change.
use()
A React function that reads a promise in a Client Component, suspending until it has a value. The value must be plain data because it travels as text.
useActionState
A React hook that connects a form to an action and returns [state, formAction, isPending]. The action gets the previous state and the form data and returns the new state.
useFormStatus
A hook from react-dom that tells a component inside a form whether it is being sent. SubmitButton uses its pending flag to disable itself.
useSearchParams
A hook from next/navigation that reads the address's query string, such as ?next=. A page using it puts the component inside Suspense.

V

Volume
Storage Docker keeps outside a container, so data such as kc.db survives when the container is replaced.

W

Webhook
A request another service sends your app when something happens, like a payment. A route handler is the right place to receive one.

Z

Zod
A library that checks data against a schema and explains what is wrong. safeParse returns { success, data } or { success: false, error } without throwing, and z.coerce converts form strings to numbers first.