Glossary

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

Search the glossary

#

"use cache": A directive placed at the top of an async function or component that caches its result so it is made once and reused. `getProducts` uses it so the products file isn't read on every visit.
"use client": A directive placed on the first line of a file to make it a Client Component, which can use state, effects and events.
.env.local: The file in your project folder that holds environment variables, one `NAME=value` per line. It stays out of Git, so secrets aren't shared.
.gitignore: A file listing the files Git leaves out, such as `node_modules`, `.next` and `.env.local`.
.next folder: The folder where `npm run build` writes the production build. Never edit it, because the next build replaces it.
@/ import alias: A shortcut set up in jsconfig.json where `@/` means the project folder. `@/app/_components/Hero` works from any file, so imports don't break when you move one.

A

AGENTS.md: A notes file in a project that gives instructions and background to AI coding assistants. `create-next-app` can add it when it creates a project, but the project works the same without it.
alt: A required `Image` prop with text describing the picture. Screen readers read it aloud, and it shows if the picture can't load. Use `alt=""` only for pure decoration.
API (application programming interface): A server that sends and receives data for other programs rather than showing pages. Kettle & Crane's order API at api.kettleandcrane.com supplies the café data.
App Router: The part of Next.js that turns the folders and files inside the `app` folder into pages and URLs. A folder becomes a page when it holds a `page.js` file.
Async Server Component: A Server Component written as an `async` function that `await`s its data (from `fetch` or `readFile`) before returning JSX. The HTML reaches the browser with the data already in it.
AVIF: A compact modern image format. Next.js can serve AVIF or WebP copies of your pictures to make them download faster.

B

branch: A separate line of work in a Git repository. On Vercel, a push to the main branch updates the live site, and any other branch gets a preview deployment.

C

Cache Components: A Next.js setting that makes you choose, for each piece of slow data, whether it is cached or fresh. Kettle & Crane's kc-site turns it on when the project is created.
Cached / fresh data: Cached data is loaded once and reused for many visitors, like the product list. Fresh data is loaded again on every visit, like the café list.
cacheLife: A function from `next/cache` that sets how long a cached result stays good, using profiles such as "minutes", "hours" and "days". Without it, the default is 15 minutes.
Catch-all segment: A folder named like `[...slug]` that matches any number of URL parts. In `app/help/[...slug]`, /help/shipping/rates gives `slug` as `["shipping", "rates"]`.
children: The prop a layout receives holding the page (or nested layout) it wraps; the layout decides where to put it. A Client Component can also receive server content as `children`.
Client boundary: The point where a `"use client"` file starts. That file, and every file it imports, is also sent to the browser as JavaScript.
Client Component: A component whose file starts with `"use client"`. It is rendered to HTML on the server first, then runs in the browser, so it can use state, effects and click handlers, as `SaveButton` does.
Client island: A small Client Component inside an otherwise server-rendered page, used only for state, events or browser-only values, like `NavLinks` in the header.
Client-side navigation: Moving between pages without a full browser reload. `Link` fetches only the new page's content and swaps it in while the layout stays put.
Colocation: Keeping components and other files next to the pages that use them. Only `page.js` makes a public page, so other files in a folder never become URLs.
create-next-app: The tool, run with `npx`, that asks a few questions and then sets up a new Next.js project folder, such as kc-site.
CSS Module: A `.module.css` file whose class names apply only to the component that imports it. `SiteHeader.module.css` styles the header without affecting other pages.
CSS variable: A value you name once, such as `--font-lora`, and reuse anywhere in CSS with `var(--name)`. `next/font` uses one to hand you the Lora font.

D

Deploying: Copying your site to a host so visitors can use it. Kettle & Crane deploys by pushing to GitHub and importing the repository on Vercel.
Development server: The program that `npm run dev` starts. It serves your site on your own computer while you work, rebuilding pages as you save.
Directive: A plain string at the top of a file or function, such as `"use client"` or `"use cache"`, that tells Next.js how to treat it.
DNS (Domain Name System): The internet's address book that points a domain name such as www.kettleandcrane.com at a host. Vercel shows you the DNS record to add where you bought the domain.
Dynamic segment: A folder named in square brackets, like `[sku]`, that matches any value in that part of the URL. One `page.js` then serves every product, and the value arrives in `params`.

E

Environment variable: A named setting a program receives from outside its code, such as `API_URL`. It lets the same code use localhost in development and the real API address in production.
Error boundary: A part of the page that catches errors thrown inside it and shows a replacement, while everything outside it keeps working. `error.js` makes one for its folder.
error.digest: A code on the `error` object that matches a `digest` line in the server's log. In production the real message is hidden from the browser, so you use the digest to find the details.
error.js: A file that catches errors thrown while its folder's page is drawn and shows its own content instead. It must be a Client Component and receives `error` and `retry` props.
ESLint: A checker that warns about likely mistakes in your code. `npm run lint` runs it.

F

Fast Refresh: Next.js updating the changed component in your browser when you save a file, without a full page reload.
favicon: The small icon shown in the browser tab. Put `favicon.ico` or `icon.png` in `app/` and Next.js adds the tag for you.
File-system routing: Making routes from the folders and files in your project instead of writing routing code. In Next.js the folders inside `app` decide the URLs.
fill: An `Image` prop used instead of `width` and `height` when the size isn't known in pixels. The picture fills its parent, which must be positioned and have a size.
Framework: A toolkit that provides the main pieces of an app already fitted together and calls your code at the right time. Next.js is a framework built on React.

G

generateMetadata: An async function a dynamic page exports to build its metadata from its `params`, such as a product page's title from the product's name.
generateStaticParams: An async function exported from a dynamic route that returns one `params` object per page to prerender at build time, such as one `{ sku }` per product.
Git: A tool on your computer that tracks your project's files and history, and lets you push changes to a repository on GitHub.
GitHub: A website that stores projects' files and their history. Vercel deploys Kettle & Crane's site from the GitHub repository.
Global CSS: Styles in `app/globals.css` that apply to the whole site. It is imported once, in the root layout.
global-error.js: A special file that handles errors in the root layout itself. It replaces the whole page, so it must draw its own `<html>` and `<body>`.

H

Host: A computer on the internet that runs your site for visitors. Vercel and any Node.js server are hosts.
HTTP status codes: Numbers a server sends with a response to say how it went: 200 OK, 404 not found (the not-found page sends it) and 500 server error (a failing café API sends it).
Hydration: The step where React attaches click handlers and state to HTML the server already made, once the JavaScript loads in the browser.

I

Image: The component from `next/image` that serves pictures resized, compressed, lazy-loaded and with reserved space, instead of a plain `<img>` tag.

J

jsconfig.json: A project file that sets up the `@/` import shortcut.
JSON (JavaScript Object Notation): A text format for data, such as the product list in `products.json` or an API response. `JSON.parse` and `res.json()` turn the text into JavaScript objects.

L

Layout: A component in `layout.js` that wraps every page in its folder and the folders below it, receiving the page as `children`. It stays mounted as you move between those pages.
Layout shift: Content jumping around as late-loading images or fonts arrive. Giving an `Image` a width and height prevents it.
Lazy loading: Downloading a picture only when it is about to scroll into view. `Image` does this by default.
lib/: A folder outside `app` that is the usual home for helper code, such as `lib/products.js` and `lib/money.js`.
Library: A set of tools you call from your own code. React is a library: it draws components and nothing more.
Link: The component from `next/link` that becomes an `<a>` tag but navigates without a full reload and prefetches pages in view. Use it for your own pages and a plain `<a>` for other sites.
loading.js: A file in a page's folder that Next.js uses as the fallback while the page loads. It wraps the page in `<Suspense>` for you.
localhost: The name for your own computer (address 127.0.0.1). `http://localhost:3000` is your dev server, where 3000 is the port, a numbered doorway a program listens on.
LTS (Long-Term Support): A Node.js release line that receives updates and fixes for an extended period, which makes it the version recommended for most people. It is the safest choice for running Next.js.

M

Metadata: Information about a page that sits in its `<head>` instead of on screen, mainly the title and description. You export a `metadata` object and Next.js writes the tags.
Minified: Code squeezed into as few characters as possible so it downloads faster. The production build minifies your JavaScript.

N

Nested layout: A layout in a subfolder that sits inside the root layout. `app/shop/layout.js` adds the category list to every shop page only.
next dev / next build / next start: The three scripts in package.json. `npm run dev` runs the site while you work, `npm run build` makes the production version and prints the route table, and `npm start` serves that build.
next.config.mjs: The file holding Next.js settings, such as Cache Components, `images.remotePatterns` and `output: "export"`.
next/font: Next.js's font tools. They download a font at build time and serve it from your own site with a matching fallback font, so there are no extra requests and no jumping text.
NEXT_PUBLIC_: A name prefix that makes Next.js copy an environment variable's value into the browser's JavaScript at build time. Never use it on a secret.
Node.js: A program that runs JavaScript outside the browser. Next.js needs it to run, and any computer with Node.js can host a Next.js site.
node_modules: The folder holding your project's installed packages. You never edit it, and Git leaves it out.
not-found.js: The special file for the page shown for unknown URLs and when `notFound()` is called. It sits inside the root layout, so the menu stays.
notFound(): A function from `next/navigation` that stops a page and shows the nearest `not-found.js`. Use it when the URL is fine but nothing exists there, such as an unknown SKU.
npm ci: A command that installs exactly the package versions listed in `package-lock.json`. It is used when setting up a project on your own server.
npx: A command that downloads a tool and runs it once, as in `npx create-next-app@latest`.

O

Open Graph: Tags that decide how a link to a page looks when shared in a chat or on social media. An `opengraph-image.png` file supplies the shared picture.

P

package.json: The project file listing its scripts and installed packages. `package-lock.json` records the exact versions installed.
page.js: The special file that makes a folder in `app` a public page. It must `export default` a component, and a folder without one makes no URL.
Pages Router: Next.js's older routing system, which builds routes from files in a `pages` folder instead of the `app` folder. It still works in older projects but is replaced by the App Router in newer ones.
params: A prop every page receives, as a promise, holding the values of its dynamic segments. For /shop/ESP-12, `await params` gives `{ sku: "ESP-12" }`.
Partial prerender: A page with a static shell made at build time and fresh parts streamed in per visit, shown as ◐ in the route table. /cafes is one.
pm2: A process manager that keeps `npm start` running on your own server, restarting it if it stops.
Prefetching: Loading a linked page in the background when its `Link` scrolls into view, so the click feels instant.
preload: An `Image` prop that loads the main picture as early as possible by adding a `<link rel="preload">` to the head. Use it on one picture per page at most; older guides call it `priority`.
Prerendering: Making a page's HTML at build time, before any visitor arrives.
Preview deployment: A copy of the site at its own address, which Vercel makes for each branch other than main. It lets Jo check new pages first.
Private folder: A folder whose name starts with an underscore, such as `_components`. Next.js skips it and its contents when making routes, so it is a safe place for shared components.
process.cwd(): A Node.js function that returns the current working directory, which in a Next.js project is the project folder where you ran `npm run dev`. It is often combined with `path.join` to build a path to a file such as `data/products.json`.
process.env: The object holding every environment variable of the running program, read as `process.env.API_URL`.
Production build: The optimized version of the site that visitors get, made once by `npm run build` into the `.next` folder.
Promise.all: A JavaScript function that waits for a list of promises at the same time, so slow requests overlap instead of adding up.
public/: The folder whose files are served as-is from the site's root, such as images. `public/images/mug-bl.png` is at /images/mug-bl.png.
Push: Uploading your changes with Git to a repository on GitHub. On Vercel, every push redeploys the site.

Q

Query string: The part of a URL after `?`, such as `?category=mugs`. It doesn't pick a different page; it changes what the same page shows.

R

readFile: A function from Node's built-in `node:fs/promises` module that reads a whole file as text and returns a promise. Server Components use it to load `products.json`.
remotePatterns: The `images` setting in next.config.mjs that lists other hosts whose pictures Next.js may resize, such as cdn.kettleandcrane.com.
Repository: A project's folder on GitHub, holding its files and history. Vercel imports it to deploy the site.
retry: A prop that `error.js` receives, a function that loads and draws the page again. It powers a "Try again" button; Next.js 16.2 called it `unstable_retry`.
Revalidate and Expire: Columns in the route table showing how long a `cacheLife` result stays before it is refreshed in the background, and before it is thrown away.
robots.txt: A file at /robots.txt telling search engine robots which parts of the site they may visit. You make it with `app/robots.js`.
Root layout: The layout in `app/layout.js`. It wraps every page and is the only place that writes the `<html>` and `<body>` tags.
Route: A URL path that shows a page, such as `/about` or `/shop`.
Route group: A folder name in round brackets, such as `(info)`. It groups folders without adding anything to the URL, so `(info)/about` is still `/about`.
Route table: The list of every route that `npm run build` prints, marked ○ for static and ◐ for partial prerender, with Revalidate and Expire columns.

S

searchParams: A prop every page receives, as a promise, holding its query string values. For /shop?category=mugs, it gives `{ category: "mugs" }`. Await it inside `<Suspense>`.
Segment: One part of a URL path between slashes. Each folder inside `app` is one segment.
SEO (search engine optimization): Making pages that search engines can read and list well. Server-rendered HTML, titles, descriptions and a sitemap all help.
Serializable: Plain data (strings, numbers, booleans, arrays, plain objects) that can be written out as text and rebuilt. Props from a Server Component to a Client Component must be serializable, so functions can't be passed.
Server Component: The default kind of component in `app`. It runs on the server or at build time and sends only HTML to the browser, so it can be async and read files, but can't use state, effects or event handlers.
Server rendering: Making a page's HTML on a server instead of in the visitor's browser. The page shows before any JavaScript loads, and search engines can read it.
sitemap: A file at /sitemap.xml listing the pages you want search engines to find. You write `app/sitemap.js` returning full URLs, and Next.js turns it into XML.
sizes: An `Image` prop used with `fill` that says how wide the picture will be on screen, so Next.js picks a suitable copy. `100vw` means the full window width.
SKU (stock keeping unit): A short code that uniquely identifies a product, such as ESP-12 for Kettle & Crane's House Espresso. It can also serve as the product's URL segment, so one page file can show any product.
Static export: Building the whole site as plain HTML files into an `out` folder, so any web host can serve it without Node.js. It needs Cache Components turned off.
Static page: A page whose HTML is made once at build time and sent as-is to every visitor, shown as ○ in the route table.
Streaming: Sending a page in pieces as each part is ready. The prerendered shell arrives at once, then the café list streams in to replace the fallback.
Suspense: A React component that shows its `fallback` until the fresh data inside it is ready. In Next.js it marks the part of a page that is loaded per visit and streamed in.

T

Tailwind CSS: A styling framework where you style elements by combining many small utility class names, such as `flex gap-4`, instead of writing separate CSS rules. `create-next-app` offers it as an option.
Title template: A pattern such as `"%s | Kettle & Crane"` in the root layout's metadata. Each page's own title replaces `%s`, so every title ends with the site name.
Turbopack: The tool that bundles your code in `next dev` and `next build`. It is what makes the dev server start quickly.
TypeScript: JavaScript with added static types, which lets tools catch type mistakes before the code runs. `create-next-app` offers it as an option, and a project can also be written in plain JavaScript.

U

usePathname: A hook from `next/navigation` that returns the browser's current path, such as "/shop/coffee". `NavLinks` uses it to highlight the current page.

V

Vercel: The company behind Next.js, and a host that runs every Next.js feature with no setup. It deploys from GitHub and gives each branch a preview.
Vite: The tool used in *React Basics* to run a React project. Unlike Next.js, it needs an extra library to map paths to components.

W

WebP: A compact image format. Next.js converts your PNGs to WebP when it serves them, which makes them much smaller.

X

XML (Extensible Markup Language): A tag-based text format. Next.js turns `app/sitemap.js` into an XML file at /sitemap.xml.