What is Next.js?

Why use Next.js?

Next.js vs React

Next.js vs other frameworks

Key features and achitecture

How Rendering Works in Next.js

App Router vs. Pages Router: Navigating Next.js Routing Systems

Prerequisites: HTML, CSS, JavaScript and React

Introduction to Next JS

Node.js and environment setup

Create a Next.js application

Run the development server

Project folder structure

Understanding package.json and scripts

TypeScript setup

ESLint and code quality

Path aliases and the src directory

Development vs production builds

File-system-based routing

Creating pages with page.tsx

Shared layouts with layout.tsx

Nested layouts

Link component and navigation

Dynamic route segments

Catch-all and optional catch-all routes

Route groups

Private folders

Loading UI with loading.tsx

Error handling with error.tsx

not-found.tsx

Parallel routes

Intercepting routes

Programmatic navigation and redirects

React components in Next.js

Server Components

Client Components

The use client directive

Choosing server or client rendering

Composing server and client components

Props and component reuse

State and event handlers

Forms and controlled inputs

Context and providers

Third-party client libraries

Global CSS

CSS Modules

Tailwind CSS

Sass and CSS-in-JS

Fonts with next/font

mages with next/image

Static assets and the public folder

Responsive design

Layouts and reusable UI patterns

Scripts with next/script

Fetching data in Server Components

Using the fetch API

Database and ORM integration

Fetching in Client Components

Sequential vs parallel fetching

Data loading states

Streaming and Suspense

Static rendering

Dynamic rendering

Server-side rendering concepts

Client-side rendering

Partial prerendering concepts

Environment variables and server-only code

Route Handlers

GET, POST, PUT, PATCH and DELETE

NextRequest and NextResponse

Server Functions and Server Actions

Form submissions

Validation and error handling

Database CRUD operations

Cookies and headers

File uploads

Webhooks

Backend-for-Frontend patterns

API security

Authentication vs authorization

Sessions and cookies

Login and logout flows

Protecting routes and layouts

Authorization checks near data access

Role-based access control

Using authentication libraries

Environment secrets

Input validation

CSRF and request security

Content Security Policy

Data security and safe serialization

Metadata API

Dynamic metadata

Open Graph images

Sitemaps and robots.txt

Canonical URLs

Font and image optimization

Link prefetching

Lazy loading

Bundle analysis

Core Web Vitals

Accessibility fundamentals

Analytics and Speed Insights

Internationalization

Redirects and rewrites

Unit and component testing

Jest and Vitest

End-to-end testing with Playwright or Cypress

Build and production start

Deployment to a managed platform

Self-hosting with Node.js or Docker

Static export

CI/CD pipelines

Logging and monitoring

Instrumentation and OpenTelemetry

Production security checklist

Troubleshooting and debugging

Upgrading Next.js and codemods

Middleware concepts and Proxy conventions

Edge Runtime

Custom servers

Multi-Zones

Progressive migration from Pages Router

Pages Router pages and layouts

getStaticProps

getServerSideProps

getStaticPaths

API Routes

Pages Router data fetching

useRouter and router events

Legacy image and head APIs

Migrating Pages Router applications