Next Js Study Notes

Authentication Patterns in Next.js

How to implement session-based and token-based authentication in Next.js, protect routes with middleware, and handle auth in Server Components and Server Actio…

Building and Deploying a Next.js App

How to prepare a Next.js application for production, choose a hosting model, and ship it reliably to Vercel or a self-hosted environment.

Caching in Next.js

A tour of the four caching mechanisms in the Next.js App Router — Request Memoization, the Data Cache, the Full Route Cache, and the Router Cache — and how the…

Creating a Next.js Project

How to scaffold a new Next.js application with create-next-app, understand its generated project structure, and run the development server.

Dynamic Routes and Params

Understand how to build dynamic and catch-all routes using bracket folder naming, read route params in Server and Client Components, and pre-render them with g…

Environment Variables in Next.js

How Next.js loads .env files, the difference between server-only and NEXT_PUBLIC_-prefixed browser-exposed variables, and per-environment configuration.

Fetching Data in Server Components

Learn how to fetch data directly inside React Server Components using async/await, and how Next.js handles deduplication, parallelization, and streaming for th…

File-Based Routing

How Next.js derives an application's routes automatically from the folder structure inside the app directory, including dynamic segments and navigation.

Font Optimization

How next/font automatically self-hosts and optimizes web fonts to eliminate layout shift and remove external network requests.

Image Optimization with next/image

How the built-in Next.js Image component automatically resizes, lazy-loads, and serves modern image formats to improve performance.

Incremental Static Regeneration

Learn how Incremental Static Regeneration (ISR) lets Next.js update statically generated pages after deployment without a full rebuild.

Layouts and Nested Routes

How layout.tsx files in the Next.js App Router share UI across routes, compose through nesting, and persist state across navigations.

Loading and Error States

Learn how loading.js, error.js, and not-found.js use React Suspense and Error Boundaries to give every route automatic, granular loading and error UI.

Metadata and SEO in Next.js

Learn how to manage titles, descriptions, Open Graph tags, and structured metadata using the App Router's metadata object and generateMetadata, plus sitemap an…

Middleware in Next.js

Learn how middleware.ts intercepts requests on the Edge Runtime before they reach a route, and how to use it for redirects, rewrites, and authentication checks.

Next.js Interview Questions

A curated set of Next.js interview questions covering rendering strategies, the App Router, data fetching, and performance, with model answers.

Next.js Performance Optimization

Practical techniques for making Next.js apps fast: image and font optimization, code splitting, caching strategies, and Core Web Vitals.

Next.js Quick Reference

A condensed cheat sheet of core Next.js App Router APIs, file conventions, rendering rules, and common commands for fast lookup.

Revalidation Strategies

Understand time-based revalidation (ISR) and on-demand revalidation with revalidatePath and revalidateTag, and how to wire them into Server Actions and Route H…

Route Handlers (API Routes)

Learn how to build server-side API endpoints in the Next.js App Router using route.ts files, the Web Request/Response APIs, dynamic segments, and their caching…

Server Actions Explained

Learn how Server Actions let you write server-side mutations that are callable directly from forms and Client Components, with progressive enhancement, pending…

Server Components vs Client Components

Learn how React Server Components and Client Components split rendering work in the Next.js App Router, and when the 'use client' directive is actually needed.

Server-Side Rendering

Understand how Server-Side Rendering (SSR) generates HTML on every request in Next.js, and how it differs from static generation.

Static Assets and the public Folder

How Next.js serves files from the public directory at the site root, and when to use it versus importing assets directly into components.