Reference · 66 terms

Glossary

Every short form used across the series. Inside a lesson, hover or tap any dotted term to see the same entry in place.

Next.js basics

App RouterApp Router: The Next.js routing system built on the app folder, where folders become URLs and special files like page and layout add behaviour.Lesson 0 →
client-side navigationClient-side navigation: Moving between pages without a full browser reload, with Link loading likely pages in the background first.Lesson 0 →
dynamic segmentDynamic segment: A folder name in square brackets, like [slug], that matches any value in that place of the URL.Lesson 0 →
generateStaticParamsgenerateStaticParams: A function that lists which dynamic route values to build at build time, so those pages are prerendered.Lesson 0 →
layoutLayout: A file that wraps pages and nested layouts through children and stays mounted when you move between the pages it wraps.Lesson 0 →
Pages RouterPages Router: The older Next.js router that uses the pages folder and functions like getServerSideProps.Lesson 0 →
segmentRoute segment: One piece of a URL path between slashes; in /blog/hello the segments are blog and hello.Lesson 0 →

Server and Client Components

boundaryServer and client boundary: The line created by 'use client' where the server module graph ends and everything below it ships to the browser.Lesson 1 →
Client ComponentClient Component: A component in a file starting with 'use client' that renders on the server for the first HTML and also runs in the browser.Lesson 1 →
DTOData transfer object: A small plain object holding only the fields a screen needs, used so secrets in a database row never cross to the browser.Lesson 1 →
hydrationHydration: React attaching event handlers to HTML the server already made, so buttons and inputs start to work.Lesson 1 →
RSC payloadReact Server Component payload: A compact description of the rendered server tree with placeholders for Client Components and the props passed to them.Lesson 1 →
serializableSerializable: A value that can be turned into text and sent over the network; props passed to Client Components must be serializable.Lesson 1 →
Server ComponentReact Server Component: A component that runs only on the server, so its code never reaches the browser and it can read data and secrets directly.Lesson 1 →
server-onlyserver-only package: A tiny package that makes the build fail if a file marked server-only is imported into client code.Lesson 1 →

Data fetching and caching

Cache ComponentsCache Components: The newer Next.js model, enabled with cacheComponents: true, where data is dynamic by default and you opt in to caching with the use cache directive.Lesson 2 →
cacheLifecacheLife and cacheTag: cacheLife sets how long a use cache result stays fresh, and cacheTag labels it so you can refresh it later by name.Lesson 2 →
memoizationRequest memoization: Identical fetch calls during one server render are sent only once, so components can each fetch what they need.Lesson 2 →
Partial PrerenderingPartial Prerendering: A page built as a static shell at build time with the dynamic parts streamed in at request time.Lesson 2 →
revalidationRevalidation: Refreshing a cached answer, either after a set time or on demand when data changes.Lesson 2 →
stale-while-revalidateStale-while-revalidate: Serve the old cached answer now and fetch a fresh one in the background so nobody waits.Lesson 2 →
updateTagupdateTag, revalidateTag and revalidatePath: Functions that refresh cached data after a change; updateTag expires it at once, revalidateTag serves stale while it refreshes.Lesson 2 →
waterfallRequest waterfall: Requests that wait for each other one by one when they could have run at the same time.Lesson 2 →

Actions and forms

IDORInsecure direct object reference: A bug where the client sends an id and the server acts on that row without checking the caller owns it.Lesson 3 →
progressive enhancementProgressive enhancement: A feature that works with plain HTML first, like a form post with JavaScript off, and gets nicer when JavaScript loads.Lesson 3 →
Server ActionServer Action: An async function marked 'use server' that runs on the server and is called from a form or button over a POST request.Lesson 3 →
useActionStateuseActionState: A React hook that gives you the last result of an action, the action to put on the form, and a pending flag.Lesson 3 →

Route handlers and Proxy

CORSCross-origin resource sharing: A browser rule that lets a page read a response from another origin only if that response has the right permission headers.Lesson 4 →
matcherProxy matcher: A setting that lists the paths Proxy runs on; without it Proxy runs on every request, including static files.Lesson 4 →
ProxyProxy (formerly middleware): A single file that runs before matched requests and can redirect, rewrite, change headers or respond directly.Lesson 4 →
rewriteRewrite versus redirect: A redirect sends the browser to a new URL, while a rewrite serves another route's content and keeps the URL the same.Lesson 4 →
Route HandlerRoute Handler: A route.ts file that answers HTTP requests with the standard Request and Response objects, used for public APIs and webhooks.Lesson 4 →
webhookWebhook: A request another service sends to your URL when something happens, which you should verify with a signature over the raw body.Lesson 4 →

Next.js auth

authInterruptsauthInterrupts (experimental): An experimental Next.js setting that lets you call forbidden() or unauthorized() to show a 403 or 401 page.Lesson 5 →
Data Access LayerData Access Layer: One server-only place in your code that reads data and checks who is asking, so every other file goes through it.Lesson 5 →
database sessionDatabase session: A login where the cookie holds only a session ID and the data lives in your database, so you can end any session at once.Lesson 5 →
optimistic checkOptimistic check: A quick auth check that only reads the cookie and does not ask the database, so it is fast but can be out of date.Lesson 5 →
secure checkSecure check: An auth check that asks the database for the current state, so it is always up to date but costs a read.Lesson 5 →
server-onlyserver-only package: A tiny package: if a Client Component imports a file that imports it, the build fails, which stops server code and secrets from reaching the browser.Lesson 5 →
stateless sessionStateless session: A login where the cookie itself holds the signed data, so the server keeps no list of sessions and cannot cancel one early.Lesson 5 →

Next.js rendering

connection()connection(): A Next.js function that says 'wait for a real request before running this', which makes a component request-time.Lesson 6 →
dynamic renderingDynamic rendering: Building a page on the server for each request, usually because it needs cookies, headers or query values.Lesson 6 →
ISRIncremental Static Regeneration: A static page that is rebuilt in the background after a set time, so the old copy is served once and the next visitor gets the new one.Lesson 6 →
Partial PrerenderingPartial Prerendering: One page with a prebuilt static shell and dynamic parts that stream in at request time, shown as a half circle in the build table.Lesson 6 →
request-time APIRequest-time API: Something that only exists when a request arrives, such as cookies(), headers() or searchParams, which makes a page dynamic.Lesson 6 →
soft 404Soft 404: A page that shows 'not found' to the user but sends a 200 status, which can happen when notFound() runs after streaming has started.Lesson 6 →
static renderingStatic rendering: Building a page once at build time and serving the same ready file to everyone.Lesson 6 →
static shellStatic shell: The part of a page that does not wait for anything: layouts, static content and the Suspense fallbacks, sent first.Lesson 6 →

Next.js SEO and assets

canonical URLCanonical URL: The one official address of a page, given in a link tag, so search engines count one URL when several show the same page.Lesson 7 →
generateMetadatagenerateMetadata: A function a page exports that returns its title, description and other head tags, and can use params or data.Lesson 7 →
HTML-limited botHTML-limited bot: A crawler such as Twitterbot that reads the HTML but may not run JavaScript, so Next.js puts the title in the head for it.Lesson 7 →
JSON-LDJSON-LD: A small JSON block in a script tag that describes a page to search engines, such as 'this is a blog post by this author'.Lesson 7 →
metadataBasemetadataBase: The site's base URL, used to turn relative URLs in metadata (canonical, share images) into full ones.Lesson 7 →
next/fontnext/font: A Next.js tool that downloads fonts at build time and serves them from your own site, with a size-matched fallback to limit layout shift.Lesson 7 →
next/imagenext/image: A Next.js component that serves an image in the right size and a smaller format, and reserves space so the page does not jump.Lesson 7 →
Open GraphOpen Graph: Meta tags that chat apps and social sites read to build the card (title, text and picture) shown when you share a link.Lesson 7 →
robots.txtrobots.txt: A file that asks crawlers which paths not to visit. It does not hide a page and is not security.Lesson 7 →
sitemapSitemap: A file that lists the URLs you want search engines to find, made in Next.js by an app/sitemap.ts file.Lesson 7 →

Next.js deployment

env load orderEnvironment variable load order: The search order for a variable: the real environment, then .env.NODE_ENV.local, .env.local, .env.NODE_ENV, and .env, stopping at the first match.Lesson 8 →
inlineInlining (at build time): Replacing a variable with its actual value inside the code during the build, like find and replace.Lesson 8 →
instrumentation.tsinstrumentation.ts: A root file with register() that runs once at server start and onRequestError() that reports server errors to your monitoring tool.Lesson 8 →
NEXT_PUBLIC_NEXT_PUBLIC_ prefix: A name prefix that makes Next.js copy an environment variable into the browser JavaScript at build time, where it can no longer change.Lesson 8 →
output file tracingOutput file tracing: Next.js following your imports to find which files each page needs, so it can copy only those into a deployment.Lesson 8 →
standalone outputStandalone output: A build mode that makes a small folder with only the files needed to run the server, started with node server.js.Lesson 8 →
version skewVersion skew: A browser running old code talking to a server running new code after a deployment, which a deploymentId helps to handle.Lesson 8 →

Next.js interview traps

NEXT_REDIRECTNEXT_REDIRECT: The special error that redirect() throws, which a careless try/catch can swallow so that no redirect happens.Lesson 9 →