Next.js Tutorial

_Index

Next.js Reference & Cheatsheet — Complete Guide

Complete Next.js reference: App Router, Pages Router, data fetching with SSR/SSG/ISR, API routes, middleware, and built-in components explained step by step.

Next.js Introduction — The React Framework for Production

Learn Next.js introduction: what Next.js is, pages vs app router, SSR SSG ISR, file-based routing, API routes, and why Next.js is the leading React production framework.

Next.js Setup Explained — Project Scaffolding and Configuration

Learn Next.js setup: create-next-app, project structure, TypeScript configuration, ESLint, environment variables, custom server, and deployment configuration.

Next.js Pages Router Explained — File-Based Routing

Learn Next.js Pages Router: file-based routing in pages directory, dynamic routes, catch-all routes, shallow routing, Link component, and useRouter hook.

Next.js App Router Explained — Modern React Routing

Learn Next.js App Router: app directory, layout components, nested routes, loading states, error boundaries, parallel routes, intercepting routes, and server components.

Next.js Routing Deep Dive — Links Navigation and Route Groups

Learn Next.js routing: Link component, useRouter, route groups, dynamic segments, catch-all segments, parallel routes, intercepting routes, and navigation lifecycle.

Next.js Layouts Explained — Nested and Shared Layouts

Learn Next.js layouts: root layout, nested layouts, layout persistence across navigation, template components, metadata API, and layout composition patterns.

Next.js Data Fetching Explained — Fetching Data in Server and Client

Learn Next.js data fetching: server components fetch, route handlers, client-side fetching, React Query integration, caching strategies, and revalidation patterns.

Next.js Static Site Generation (SSG) Explained — Pre-Built Pages

Learn Next.js SSG: getStaticProps for static generation, getStaticPaths for dynamic routes, incremental static generation, and when to use SSG for optimal performance.

Next.js Server-Side Rendering (SSR) Explained — Dynamic Pages

Learn Next.js SSR: getServerSideProps for server-rendered pages, request context, cookies and headers, redirects, and when SSR is the right choice over SSG or ISR.

Next.js ISR Explained — Incremental Static Regeneration

Learn Next.js ISR: revalidate option for time-based regeneration, on-demand revalidation, webhook-triggered rebuilds, stale-while-revalidate pattern, and ISR best practices.

Next.js API Routes Explained — Backend API in Next.js

Learn Next.js API routes: route handlers in App Router, pages/api in Pages Router, request methods, middleware, file uploads, database connections, and API versioning.

Next.js Middleware Explained — Request Interception

Learn Next.js middleware: middleware.ts file, request matching, redirects, rewrites, cookies and headers manipulation, geolocation, and internationalization.

Next.js Image Optimization Explained — Automatic Image Optimization

Learn Next.js Image component: next/image for automatic optimization, lazy loading, responsive images, remote patterns, placeholder blur, and performance best practices.

Next.js Font Optimization Explained — Automatic Font Loading

Learn Next.js font optimization: next/font for automatic font optimization, Google Fonts loading, variable fonts, font subsets, and performance best practices for web fonts.

Next.js Environment Variables Explained — Configuration Management

Learn Next.js environment variables: .env.local, .env.production, public variables with NEXT_PUBLIC_, runtime config, environment variable loading order, and secrets management.

Next.js Authentication Explained — Auth Patterns and Libraries

Learn Next.js authentication: NextAuth.js, middleware auth, session management, JWT tokens, OAuth providers, credential login, and protected routes with App Router.

Next.js TypeScript Explained — Type-Safe Next.js Applications

Learn Next.js TypeScript: typed routing, typed API routes, typed data fetching, typed env vars, typed middleware, and full-stack type safety across your Next.js app.

Next.js Styling Explained — CSS Modules Tailwind and CSS-in-JS

Learn Next.js styling: CSS Modules, Tailwind CSS, global styles, CSS-in-JS libraries, CSS variables, and module scoping patterns in Next.js applications.

Next.js Tailwind CSS Explained — Utility-First Styling

Learn Next.js Tailwind CSS: setup, configuration, utility classes, responsive design, dark mode, custom themes, and performance optimization with Tailwind in Next.js.

Next.js Server Actions Explained — Server-Side Mutations

Learn Next.js Server Actions: server-side form handling, mutations with "use server", revalidation, progressive enhancement, and data mutations without API routes.

Next.js App Router -- Complete Beginner's Guide

Learn Next.js App Router -- file-based routing with layout nesting, loading states, error boundaries, and React Server Components for modern web applications.

Next.js Dynamic Imports Explained — Lazy Loading Components

Learn Next.js dynamic imports: next/dynamic for component-level code splitting, SSR disabling, named exports, loading states, and performance optimization patterns.

Next.js Server Actions -- Mutations Guide

Learn Next.js server actions -- call server-side functions directly from components with progressive enhancement and automatic revalidation after data mutations.

Next.js Testing Explained — Testing Next.js Applications

Learn Next.js testing: Vitest and Jest setup, testing server components, testing client components, testing API routes, testing with MSW, and test patterns for Next.js.

Next.js Middleware -- Request Interception Guide

Learn Next.js middleware -- intercept requests before they reach routes, implement redirects and rewrites, add security headers, and handle edge authentication.

Next.js Performance Explained — Optimization and Monitoring

Learn Next.js performance: Lighthouse auditing, web vitals, Core Web Vitals measurement, bundle analysis, caching strategies, edge functions, and CDN optimization.

Next.js Interception Routes -- Modal Pattern Guide

Learn Next.js interception routes -- display content in modals while preserving the URL, enabling parallel views and seamless navigation for better UX.

Next.js Deployment Explained — Deploy to Production

Learn Next.js deployment: Vercel deployment, Docker deployment, self-hosting with Node.js, static export, environment configuration, and CI/CD pipeline setup.

Next.js Parallel Routes -- Layout Patterns Guide

Learn Next.js parallel routes -- render multiple independent pages simultaneously in one layout, build dashboards, and compose separate route segments together.

Next.js Caching Explained — Data Cache and Full Route Cache

Learn Next.js caching: Data Cache for fetch results, Full Route Cache for static pages, Router Cache for client navigation, revalidation strategies, and cache invalidation.

Next.js Image Optimization -- Complete Guide

Learn Next.js Image component for automatic optimization -- responsive srcsets, lazy loading, blur placeholders, WebP conversion, and CDN delivery. ...

Next.js Analytics Explained — Measuring User Interactions

Learn Next.js analytics: Vercel Analytics integration, Google Analytics setup, custom events, page view tracking, custom metrics with Web Vitals, and privacy compliance.

Next.js Font Optimization -- Typography Guide

Learn Next.js font optimization with next/font -- self-host Google Fonts, subset font files, eliminate layout shift, and improve loading performance. .

Next.js Metadata API Explained — SEO and Social Cards

Learn Next.js Metadata API: generateMetadata for dynamic SEO, static metadata objects, Open Graph and Twitter cards, JSON-LD structured data, and sitemap generation.

Next.js Instrumentation Explained — Monitoring and Observability

Learn Next.js instrumentation: instrumentation.ts hook, OpenTelemetry integration, logging, error tracking, performance monitoring, and custom metric collection in Next.js.

Next.js MDX Explained — Content with Markdown and JSX

Learn Next.js MDX: @next/mdx configuration, MDX pages, custom components in MDX, frontmatter, remark and rehype plugins, and building content-rich sites with MDX.

Next.js PWA Explained — Progressive Web Apps with Next.js

Learn Next.js PWA: service workers, manifest.json, offline support, push notifications, next-pwa configuration, and building installable Progressive Web Apps with Next.js.

Next.js Incremental Adoption Explained — Migrating to Next.js

Learn Next.js incremental adoption: adding Next.js to existing React apps, incremental migration from Pages to App Router, hybrid rendering, and coexisting strategies.

Next.js Edge Runtime Explained — Serverless at the Edge

Learn Next.js Edge Runtime: Edge Functions, Edge Config, Edge Middleware, Geo-based routing, A/B testing, and low-latency serverless functions at the CDN edge.

Next.js Project — Build a Complete Next.js Application

Learn Next.js by building a full-stack blog platform: App Router, authentication, database, API routes, MDX content, search, and deployment to production.