Nextjs Framework

Next.js is a React framework created by Vercel that provides features like server-side rendering, static site generation, file-based routing, and API routes out of the box. It simplifies building production-ready React applications.

The App Router (introduced in Next.js 13) uses the app/ directory and supports React Server Components, nested layouts, streaming, and colocation of files. It replaces the older Pages Router (pages/ directory).

Routes are defined by the folder structure inside app/. A route is created by adding a page.tsx file inside a folder. For example, app/about/page.tsx maps to the /about route.

A Server Component renders on the server and sends HTML to the client. It is the default in the App Router. Server Components can directly access databases, read files, and fetch data without exposing secrets to the client.

A Client Component is declared with "use client" at the top of the file. It runs in the browser and supports interactivity: event handlers, state (useState), effects (useEffect), and browser APIs.

Use Client Components when you need:Event listeners (onClick, onChange)React hooks (useState, useEffect)Browser-only APIsUse Server Components for everything else — data fetching, static content, and accessing backend resources.

SSR generates HTML on the server at request time. Each incoming request triggers a fresh render. In the App Router, this is the default behavior when a page uses dynamic functions like cookies() or headers().

SSG generates HTML at build time. Pages are pre-rendered and served as static files from a CDN. In the App Router, pages without dynamic data are automatically statically generated.

ISR allows you to update static pages after the site has been built. You set a revalidate time (in seconds) so that stale pages are regenerated in the background. Example: fetch(url, { next: { revalidate: 60 } }).

Use square brackets in the folder name: app/blog/[slug]/page.tsx. The dynamic segment is available via params:
export default function Page({ params }: { params: { slug: string } })

A catch-all route uses [...slug] syntax, e.g., app/docs/[...slug]/page.tsx. It matches /docs/a, /docs/a/b, etc. The params are returned as an array: params.slug = ['a', 'b'].

An optional catch-all uses [[...slug]] syntax. It matches the parent route as well, e.g., app/docs/[[...slug]]/page.tsx matches both /docs and /docs/a/b.