Module 1: Introduction to Next.js

• What is Next.js?

• Why use Next.js over React?

• Key features overview: SSR, SSG, API Routes, File-based Routing.

---

Module 2: Setting Up the Environment

• Installing Node.js and npm

• Setting up a Next.js project (npx create-next-app)

• Understanding project structure

---

Module 3: Pages and Routing Basics

• File-based Routing in Next.js

• Dynamic Routing

• Nested Routes

• Catch-all and Optional Catch-all routes

---

Module 4: Linking Between Pages

• Using next/link

• Programmatic navigation with next/router

---

Module 5: Static Site Generation (SSG)

• What is SSG?

• getStaticProps

• getStaticPaths

• Building static pages at build time

---

Module 6: Server-Side Rendering (SSR)

• What is SSR?

• Using getServerSideProps

• When to prefer SSR over SSG

---

Module 7: Client-Side Rendering (CSR)

• Understanding CSR in Next.js

• Using React hooks for client data fetching

• useEffect and useSWR basics

---

Module 8: Styling in Next.js

• CSS Modules

• Global CSS

• Styled Components

• TailwindCSS Setup and Usage

---

Module 9: Image Optimization

• Using next/image

• Responsive images

• Image placeholders and blur-up effect

---

Module 10: Head Management

• Using next/head

• Setting dynamic page titles and meta descriptions

• SEO Basics with Next.js

---

Module 11: Layouts

• Creating reusable layouts

• Implementing nested layouts

• Layout patterns for authenticated routes

---

Module 12: API Routes

• Building APIs inside /pages/api

• Creating GET, POST endpoints

• Handling requests and responses

• API middlewares

---

Module 13: Authentication Basics

• Session-based authentication

• Token-based authentication

• Using NextAuth.js for easy setup

---

Module 14: Authorization and Protected Routes

• Creating private pages

• Redirecting unauthorized users

• Middleware for auth checking

---

Module 15: Fetching Data from External APIs

• Fetching with fetch, axios, and useSWR

• Displaying fetched data

• Error handling and loaders

---

Module 16: Forms and Form Handling

• Building forms in Next.js

• Validations with React Hook Form

• Integrating with Formik + Yup

---

Module 17: State Management

• Lifting state up

• Using Context API in Next.js

• Using Zustand/Recoil/Redux Toolkit (optional)

---

Module 18: Dynamic Imports and Code Splitting

• Lazy loading components with next/dynamic

• Reducing initial bundle size

---

Module 19: Internationalization (i18n)

• Setting up i18n in Next.js

• Multiple language support

• Routing based on locale

---

Module 20: Middleware in Next.js

• What is middleware?

• Edge Functions

• Redirects, rewrites, and header manipulation

---

Module 21: Deployment

• Deploying on Vercel

• Deploying on Netlify, AWS, and custom servers

• Environment Variables for production

---

Module 22: Performance Optimization

• Analyzing with Lighthouse

• Prefetching and preloading

• Improving Core Web Vitals in Next.js

---

Module 23: Testing in Next.js

• Unit testing with Jest

• Integration testing with React Testing Library

• End-to-End (E2E) testing with Cypress or Playwright

---

Module 24: Building a Full-stack App

• Integrating a database (MongoDB/PostgreSQL)

• Building backend APIs

• CRUD operations: Create, Read, Update, Delete

---

Module 25: Final Capstone Project

• Project Planning and Setup

• Creating pages, APIs, and authentication

• Implementing cart (if e-commerce) or dashboard (if admin panel)

• Deployment and showcase