50 cards
Next.js is a React framework created by Vercel that provides a complete toolkit for building production-ready web applications. It bundles together features that React alone does not offer out of the box, including server-side rendering, static site generation, file-based routing, and API routes. Since version 13, the...
In the App Router, every component is a Server Component by default. Server Components render on the server and send the resulting HTML to the browser, which means they can directly read files, query databases, and call internal services without ever exposing secrets or backend logic to the client. Because they execute...
Next.js supports several rendering strategies, and the App Router chooses one automatically based on how a page uses dynamic data. Server-Side Rendering, or SSR, generates the HTML on the server for each incoming request. This mode is triggered when a page calls dynamic functions like cookies() or headers(), and it is...
Beyond the basic folder-to-route mapping, Next.js offers several routing patterns that handle common real-world needs. A dynamic route uses square brackets in the folder name, like app/blog/[slug]/page.tsx. The captured segment is then available on the page component through its params prop, typed as { slug: string }....
Layouts are one of the App Router's most powerful features. A layout.tsx file in any folder defines the chrome that wraps every page beneath that segment, such as a navigation bar, footer, or sidebar. Because layouts persist across navigations between their child routes, React state inside a layout survives route chang...
Data fetching in the App Router is one of the most pleasant developer experiences in modern web frameworks. Server Components can declare themselves async and use await directly on fetch calls or database queries, with no need for useEffect or third-party data libraries. Because the fetch happens on the server, secrets...
Navigation is a first-class concern in Next.js, and the framework provides both declarative and programmatic ways to move between routes. The <Link> component from next/link is the preferred way to navigate. It performs client-side transitions without a full page reload and, by default, prefetches the destination...
The main configuration file for a Next.js project is next.config.js, also available as .mjs or .ts. It centralizes many important settings, including allowed image domains, declarative redirects and rewrites, environment variable exposure, webpack customization, and experimental features. SEO is handled through metadat...