HTMLCSSJAVASCRIPTANGULARINTERVIEW QUESTIONSSQLPYTHONJAVAPHPHOW TOW3.CSSCC++C#BOOTSTRAPREACTNEXTJSMYSQLJQUERYEXCELXMLDJANGONUMPYPANDASNODEJSDSATYPESCRIPTANGULARJSGITPOSTGRESQLMONGODBASPAIRGOKOTLINSWIFTSASSVUEGEN AIAGENTIC AIPROMPT ENGINEERINGDOCKERKUBERNETESSPRINGSPRING BOOTUNIXSCIPYAWSCYBERSECURITYDATA SCIENCEINTRO TO PROGRAMMINGINTRO TO HTML & CSSBASHRUSTTOOLSHTMLCSSJAVASCRIPTANGULARINTERVIEW QUESTIONSSQLPYTHONJAVAPHPHOW TOW3.CSSCC++C#BOOTSTRAPREACTNEXTJSMYSQLJQUERYEXCELXMLDJANGONUMPYPANDASNODEJSDSATYPESCRIPTANGULARJSGITPOSTGRESQLMONGODBASPAIRGOKOTLINSWIFTSASSVUEGEN AIAGENTIC AIPROMPT ENGINEERINGDOCKERKUBERNETESSPRINGSPRING BOOTUNIXSCIPYAWSCYBERSECURITYDATA SCIENCEINTRO TO PROGRAMMINGINTRO TO HTML & CSSBASHRUSTTOOLS
    nextjs

    Next.js Course

    Master Next.js from React fundamentals to App Router, Server Components, caching, auth, security, and enterprise full-stack architecture.

    Beginner → Architect · 95h guided content · 207 lessons · 32 modules

    Start courseView curriculum
    207
    Lessons
    32
    Modules
    0/207
    Completed

    Architecture

    Next.js Application Architecture

    React is the UI library. Next.js is the framework: App Router, Server Components, Client Components, Server Actions, Route Handlers, and caching.

    Browser
    request
    HTTP
    Next.js
    App Router
    RSC
    Server UI
    no client JS
    hydrate
    Client UI
    interactivity
    data
    Data Layer
    DB · APIs · cache
    Server first
    Default to Server Components
    Trust boundaries
    Secrets never reach the browser
    Caching is versioned
    Verify APIs for your Next release
    Types ≠ runtime checks
    Validate params and FormData
    About this course

    What you will learn

    From React fundamentals to App Router, Server Components, caching, auth, security, performance, and enterprise Next.js architecture.

    Built for Beginner → Architect learners who want a structured Next.js path with free lessons, examples, and progress tracking — not a paid certificate program.

    Practical projects

    Interview preparation

    Exercises & practice

    Related courses

    Other live tracks in UI — same free, hands-on format.

    HTML

    Structure the content of every web page.

    Beginner · 139 lessons

    CSS Mastery

    From styling basics to frontend engineering — rendering, performance, design systems, and architecture.

    Beginner → Architect · 203 lessons

    Angular

    Build large-scale, type-safe apps with components & signals.

    Beginner → Pro · 42 lessons

    React

    Modern frontend engineering with React, Hooks, Routing, State Management and production UI systems.

    Beginner → Pro · 120 lessons

    TypeScript

    From JavaScript foundations to advanced types, framework integration, enterprise architecture, security, performance, and interviews.

    Beginner → Architect · 102 lessons

    Frequently asked questions

    Curriculum

    Enterprise learning path

    32 modules · 207 lessons

    Next.js Tutorial

    0/12 complete
    1. 1
      Next.js Home
      Next up

      Start the Next.js course with a roadmap from React fundamentals to App Router, Server Components, caching, security, and enterprise architecture.

    2. 2
      What is Next.js?

      Define Next.js as a React framework, distinguish it from React, and learn the application capabilities, architecture, and server/browser boundaries that make Next.js valuable for TechLearningPro.

    3. 3
      Why Next.js?

      Understand when teams choose Next.js for SEO, performance, and full-stack React, and when another stack fits better.

    4. 4
      React vs Next.js

      Compare React as a UI library with Next.js as a React framework that owns routing, rendering, and server boundaries.

    5. 5
      Next.js Architecture

      See Browser, App Router, Server Components, Client Components, Server Actions, Route Handlers, and data layers.

    6. 6
      Next.js App Router Overview

      Introduce the App Router as the modern Next.js routing and rendering model based on the app directory.

    7. 7
      Next.js Installation

      Install Next.js with create-next-app, Node.js requirements, and TypeScript defaults for TechLearningPro.

    8. 8
      Create Your First Next.js Application

      Create, run, and understand the first page rendered by Next.js without inventing custom backends.

    9. 9
      Next.js Project Structure

      Organize app, components, lib, and public so server and client code stay intentional.

    10. 10
      Development Server

      Use next dev for local development, Fast Refresh, and environment-aware configuration.

    11. 11
      Production Build

      Build and start a production Next.js output and understand what is pre-rendered versus dynamic.

    12. 12
      Environment Variables

      Use NEXT_PUBLIC_ versus server-only env vars and keep secrets off the client. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    App Router Fundamentals

    0/15 complete
    1. 13
      App Directory

      Learn how the app directory defines routes, layouts, and conventions. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 14
      Pages

      Use page.tsx as the UI for a route segment. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 15
      Layouts

      Share UI across routes with layout.tsx that persists during navigation. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 16
      Nested Layouts

      Compose nested layouts for sections like courses and dashboards. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    5. 17
      Route Segments

      Understand segments, partial rendering, and how URLs map to folders. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    6. 18
      Dynamic Routes

      Create [slug] and [id] params with typed props in modern Next.js. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    7. 19
      Catch-All Routes

      Use [...slug] for multi-segment paths like docs trees. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    8. 20
      Optional Catch-All Routes

      Use [[...slug]] when the segment may be empty. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    9. 21
      Route Groups

      Organize routes with (group) folders that do not affect the URL. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    10. 22
      Private Folders

      Use _folder conventions for colocation without routing. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    11. 23
      Linking and Navigation

      Navigate with next/link and understand client transitions versus full reloads. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    12. 24
      not-found

      Customize 404 UI with not-found.tsx and notFound(). This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    13. 25
      error

      Recover from segment errors with error.tsx client boundaries. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    14. 26
      loading

      Show instant loading UI with loading.tsx and Suspense. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    15. 27
      redirect and notFound

      Use redirect() and notFound() for server-side control flow. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Rendering Architecture

    0/11 complete
    1. 28
      Server Components

      Explain React Server Components in Next.js: default server execution, no client bundle cost for server-only code.

    2. 29
      Client Components

      Mark interactive islands with use client and keep them small. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 30
      Server vs Client Execution

      Reinforce where code runs and what APIs are legal in each environment. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 31
      "use client"

      Understand the use client directive as a bundle boundary, not a runtime toggle per function.

    5. 32
      Component Boundaries

      Compose Server and Client Components with props that serialize across the boundary.

    6. 33
      Server Component Benefits

      List benefits: smaller bundles, direct data access, secure secrets, streaming. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    7. 34
      Client Component Trade-offs

      Weigh hydration cost, bundle size, and interactivity needs. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    8. 35
      Component Composition

      Pass Server Components as children into Client Components to keep heavy UI on the server.

    9. 36
      Serialization

      Explain what can cross the RSC boundary and why Dates and Maps need care. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    10. 37
      Hydration

      Connect HTML/RSC payload to client interactivity and hydration mismatches. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    11. 38
      Streaming

      Stream HTML with Suspense so users see content progressively. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Rendering Strategies

    0/7 complete
    1. 39
      Static Rendering

      Pre-render routes when data can be known ahead of requests. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 40
      Dynamic Rendering

      Render per request when data depends on cookies, headers, or uncached fetches. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 41
      Server Rendering

      Generate HTML on the server for the request or cached result. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 42
      Client Rendering

      Fetch and render in the browser after JS loads when appropriate. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    5. 43
      Streaming Rendering

      Combine server rendering with progressive streaming of Suspense boundaries. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    6. 44
      Pre-rendering and Revalidation Concepts

      Explain incremental freshness without outdated universal cache claims. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    7. 45
      Hybrid Rendering

      Mix static shells with dynamic islands and document trade-offs. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Data Fetching

    0/10 complete
    1. 46
      Fetching Data in Server Components

      Fetch on the server with async components and keep credentials server-side. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 47
      Client-Side Data Fetching

      Use client fetching for user-driven refreshes and highly interactive views. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 48
      Request Memoization Concepts

      Explain per-request deduplication concepts and verify version behavior. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 49
      Parallel Data Fetching

      Start independent fetches together to reduce waterfalls. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    5. 50
      Sequential Data Fetching

      Sequence fetches only when later calls need earlier results. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    6. 51
      Loading UI

      Design skeletons and Suspense fallbacks that match layout. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    7. 52
      Error Handling for Data Fetching

      Map fetch failures to error.tsx and domain errors. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    8. 53
      Streaming and Suspense

      Stream slow panels while showing fast content first. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    9. 54
      Data Caching Overview

      Introduce caching layers without outdated universal rules. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    10. 55
      Revalidation and Cache Invalidation

      Invalidate or revalidate when content changes; APIs vary by Next.js version. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Caching

    0/8 complete
    1. 56
      Request-Level Caching Concepts

      Describe request memoization versus cross-request caches carefully. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 57
      Data Caching

      Cache fetched data with version-correct APIs and document assumptions. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 58
      Full Route Caching

      Cache entire routes when output is shareable. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 59
      Client-Side Caching

      Use browser and client library caches for UX, not as source of truth. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    5. 60
      Time-Based Revalidation

      Refresh on an interval when eventual consistency is acceptable. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    6. 61
      On-Demand Revalidation

      Trigger revalidation after mutations. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    7. 62
      Cache Tags

      Tag cached entries for targeted invalidation when supported. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    8. 63
      CDN and Browser Caching

      Place CDN and Cache-Control in the overall architecture. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Server Actions

    0/11 complete
    1. 64
      What are Server Actions?

      Define Server Actions as server functions callable from forms and clients with clear trust boundaries.

    2. 65
      "use server"

      Mark server modules or inline actions with use server. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 66
      Form Actions

      Wire HTML forms to Server Actions with progressive enhancement. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 67
      Mutations

      Perform creates/updates/deletes in actions with transactions. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    5. 68
      Validation

      Validate FormData and JSON on the server every time. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    6. 69
      Authentication in Server Actions

      Resolve identity inside actions; do not trust client claims. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    7. 70
      Authorization in Server Actions

      Check permissions for the resource being mutated. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    8. 71
      Error Handling

      Return safe errors and log internals. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    9. 72
      Optimistic UI

      Update UI optimistically then reconcile with server results. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    10. 73
      Revalidation after Actions

      Refresh cached views after successful mutations using version-correct APIs. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    11. 74
      Security Considerations

      Treat actions as public endpoints: CSRF considerations, authn, authz, input limits.

    Routing

    0/11 complete
    1. 75
      App Router Routing Deep Dive

      Deepen URL matching, soft navigation, and segment rendering. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 76
      Nested Routes

      Nest routes for hierarchical UI. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 77
      Route Groups Advanced

      Use groups for multiple roots and conditional chrome. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 78
      Parallel Routes

      Render multiple pages in the same layout with @slots. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    5. 79
      Intercepting Routes

      Intercept navigations to show modals while keeping URLs shareable. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    6. 80
      Programmatic Navigation

      Navigate in event handlers with the App Router. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    7. 81
      useRouter, usePathname, useSearchParams

      Read location state in Client Components via hooks. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    8. 82
      Query Parameters

      Encode filters in the URL for shareable state. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    9. 83
      Navigation Patterns

      Design breadcrumbs, back stacks, and cancel flows. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    10. 84
      Protected Routes

      Gate routes with server checks and proxy redirects. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    11. 85
      Route-Level Loading and Error Handling

      Combine loading.tsx and error.tsx per segment. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Route Handlers & Backend

    0/7 complete
    1. 86
      Route Handlers Overview

      Introduce route.ts handlers as Next.js HTTP endpoints. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 87
      GET POST PUT PATCH DELETE

      Implement REST-ish handlers with correct methods. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 88
      Request and Response

      Parse Request and return Response with status codes. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 89
      Headers and Cookies

      Read/write headers and cookies carefully on the server. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    5. 90
      Authentication and Validation

      Authenticate and validate inputs in handlers. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    6. 91
      Error Handling and API Design

      Design stable error envelopes for API clients. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    7. 92
      Next.js Route Handlers vs Express vs Dedicated Backend

      Compare colocated handlers, Express, and separate services. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Databases

    0/10 complete
    1. 93
      Database Integration

      Connect databases only from server code. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 94
      PostgreSQL and MySQL

      Use SQL databases from Next.js server modules. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 95
      MongoDB

      Use MongoDB carefully with application schemas. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 96
      Prisma

      Use Prisma as a server-side ORM with migrations. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    5. 97
      Drizzle

      Use Drizzle for SQL-centric typed access. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    6. 98
      Connection Management

      Manage pools in serverless and long-lived Node hosts differently. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    7. 99
      Queries and Transactions

      Keep multi-row invariants in transactions on the server. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    8. 100
      Migrations

      Evolve schema with versioned migrations. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    9. 101
      Repository Patterns

      Hide DB behind repositories used by server actions and RSC. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    10. 102
      Server-Side Database Access Rules

      Codify rules: no DB in client, validate tenant, log query cost. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Authentication

    0/7 complete
    1. 103
      Authentication Fundamentals

      Define authentication as proving identity. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 104
      Sessions and Cookies

      Prefer secure cookies for web sessions when appropriate. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 105
      JWT Authentication Tokens

      Use JWTs carefully with short TTL and rotation strategies. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 106
      OAuth and OpenID Connect

      Delegate identity with OAuth/OIDC correctly. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    5. 107
      Login Architecture

      Design login, session creation, and failure modes. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    6. 108
      Logout and Session Management

      Invalidate sessions and clear cookies on logout. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    7. 109
      Protected Routes

      Protect App Router segments with server checks and proxy redirects. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Authorization

    0/3 complete
    1. 110
      Role-Based Access Control

      Assign roles that bundle permissions. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 111
      Permission-Based Access

      Authorize by permission keys for finer control. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 112
      Resource Authorization

      Authorize against a loaded resource to prevent IDOR. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Security

    0/10 complete
    1. 113
      OWASP and Next.js

      Map OWASP risks to Next.js apps. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 114
      Cross-Site Scripting (XSS)

      Prevent cross-site scripting in React/Next output and markdown. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 115
      CSRF

      Understand CSRF for cookie sessions and action endpoints. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 116
      CORS

      Configure CORS for browser clients; it is not authorization. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    5. 117
      Authentication and Cookie Security

      Harden sessions, cookies, and token storage. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    6. 118
      Secrets and Environment Variables

      Keep secrets server-only and rotate them. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    7. 119
      SQL Injection and Input Validation

      Parameterize queries and validate all inputs. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    8. 120
      SSR, Server Actions, and Route Handler Security

      Treat every server entry as public attack surface. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    9. 121
      Security Headers and CSP

      Set CSP and security headers appropriately. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    10. 122
      Rate Limiting and Supply Chain Security

      Rate-limit auth and review dependencies. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Forms

    0/6 complete
    1. 123
      Forms in Next.js

      Build forms with progressive enhancement using Server Actions. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 124
      FormData

      Read FormData on the server safely. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 125
      Client and Server Validation

      Use client UX validation plus mandatory server validation. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 126
      Zod Runtime Validation

      Validate with Zod (or similar) on the server. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    5. 127
      Error Handling, Pending States, and Optimistic UI

      Show field errors and pending UI during actions. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    6. 128
      Multi-Step Forms and Enterprise Form Architecture

      Design wizards with URL or server-stored drafts. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    SEO

    0/5 complete
    1. 129
      Metadata

      Set titles and descriptions with the Metadata API. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 130
      Static and Dynamic Metadata

      Use static metadata for fixed pages and generateMetadata for dynamic routes. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 131
      Open Graph and Twitter/X Cards

      Configure social previews. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 132
      Canonical URLs, Robots, and Sitemap

      Avoid duplicate URL SEO issues. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    5. 133
      Structured Data and Dynamic SEO

      Add JSON-LD for courses carefully. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Images & Assets

    0/3 complete
    1. 134
      next/image

      Use next/image for responsive optimized images. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 135
      Image Optimization, Lazy and Priority Loading

      Balance priority LCP images versus lazy below-fold. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 136
      Remote Images and Image Security

      Allowlist remote hosts; do not open arbitrary URLs. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Fonts

    0/2 complete
    1. 137
      Font Optimization

      Load fonts without layout shift. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 138
      Local Fonts, Google Fonts, and CLS

      Prefer local/self-hosted fonts for control. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Performance

    0/7 complete
    1. 139
      Core Web Vitals

      Connect UX metrics to Next.js architecture choices. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 140
      LCP, INP, and CLS

      Improve each metric with concrete Next.js techniques. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 141
      Bundle Size and JavaScript Reduction

      Keep client bundles small with Server Components. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 142
      Code Splitting and Lazy Loading

      Split heavy client widgets. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    5. 143
      Streaming Performance

      Use streaming to improve perceived performance. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    6. 144
      Caching, CDN, and Compression

      Align caches and CDN with privacy and freshness. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    7. 145
      Database and API Performance

      Fix N+1 and slow APIs before adding instances. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Error Handling

    0/4 complete
    1. 146
      error.tsx

      Recover at segment boundaries with client error UI. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 147
      not-found.tsx Deep Dive

      Customize missing resource UX. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 148
      loading.tsx Deep Dive

      Instant pending states for segments. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 149
      Global Error Handling, Logging, and Production Errors

      Log with request IDs; hide internals from users. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    State Management

    0/5 complete
    1. 150
      Local State

      Keep ephemeral UI state local. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 151
      Context

      Share limited UI state without prop drilling. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 152
      URL State

      Store shareable state in the URL. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 153
      Server State

      Treat server data as source of truth with cache/revalidate. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    5. 154
      Global State: Zustand, Redux, TanStack Query

      Choose global tools only for clear cross-tree client needs. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Testing

    0/5 complete
    1. 155
      Unit and Component Testing

      Test pure logic and components with RTL. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 156
      Integration and API Testing

      Test handlers and DB against test instances. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 157
      Server Component, Action, and Route Handler Testing

      Test server entrypoints with appropriate harnesses. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 158
      End-to-End Testing with Playwright or Cypress

      Cover critical journeys sparingly. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    5. 159
      Accessibility Testing

      Automate a11y checks and manual keyboard flows. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    TypeScript

    0/3 complete
    1. 160
      Page Props, Route Params, and Search Params

      Type App Router props and validate at runtime. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 161
      API Types, Server Action Types, and DTOs

      Separate wire DTOs from domain types. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 162
      Component Props and Generic Components

      Type reusable UI without any. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Proxy & Request Interception

    0/4 complete
    1. 163
      Proxy Overview (Next.js 16)

      Explain proxy.ts as the current request interception convention replacing middleware.ts in Next.js 16.

    2. 164
      Proxy vs Deprecated Middleware

      Document that middleware.ts is deprecated in Next.js 16; migrate to proxy.ts, note Edge differences.

    3. 165
      Redirects, Rewrites, and Headers

      Use proxy for small request-time routing decisions. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 166
      Authentication Checks in Proxy

      Gate sessions early but still enforce authz in Server Components and actions. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Internationalization

    0/3 complete
    1. 167
      Internationalization

      Plan locales, messages, and SEO for multiple languages. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 168
      Locale Routing and Language Detection

      Encode locale in the URL and detect carefully. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 169
      Translation Architecture and Multilingual SEO

      Own translation workflow and hreflang. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Real-Time Applications

    0/3 complete
    1. 170
      WebSockets and Server-Sent Events

      Choose push technologies and when a dedicated realtime backend wins. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 171
      Polling

      Use polling when infrequent updates suffice. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 172
      Real-Time Architecture, Notifications, and Chat

      Combine Next.js UI with durable event backends when needed. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Micro Frontends

    0/3 complete
    1. 173
      Micro Frontend Concepts

      Explain independent deployable frontends and when not to use them. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 174
      Next.js in Micro Frontend Architecture

      Integrate Next.js apps with clear contracts. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 175
      Module Federation, Shared Dependencies, and Ownership

      Share dependencies carefully; own deploy boundaries. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Enterprise Architecture

    0/10 complete
    1. 176
      Feature-Based Architecture

      Slice by feature verticals. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 177
      Domain-Based Architecture

      Align modules to domains. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 178
      Clean Architecture and Layered Architecture

      Keep domain free of Next.js imports. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 179
      Server/Client Boundaries

      Codify import rules and server-only packages. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    5. 180
      Shared Libraries and Design Systems

      Share UI without sharing secrets. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    6. 181
      Monorepos with Nx or Turborepo

      Share packages with a task graph. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    7. 182
      Multi-Team Development and Multi-Tenant Applications

      Isolate tenants and team ownership. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    8. 183
      API, Database, and Caching Architecture

      Draw end-to-end data flow for TechLearningPro. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    9. 184
      Observability in Enterprise Next.js

      Standardize logs, metrics, traces across apps. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    10. 185
      Deployment Architecture

      Choose Vercel, containers, or hybrid consciously. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Observability

    0/3 complete
    1. 186
      Structured Logging

      Log JSON with request IDs. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 187
      Metrics and Tracing

      Track RED metrics and traces. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 188
      Request IDs, Error Tracking, and Production Diagnostics

      Correlate errors across server and browser. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Deployment

    0/4 complete
    1. 189
      Production Build and Environment Configuration

      Build once; configure per environment. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 190
      Hosting: Vercel, Docker, and Self Hosting

      Compare managed Next hosting versus containers. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 191
      CDN, Reverse Proxy, and Load Balancing

      Put TLS and caching at the edge when appropriate. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 192
      CI/CD and Preview Deployments

      Ship via pipeline with preview apps. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Scalability

    0/4 complete
    1. 193
      Horizontal Scaling and Stateless Architecture

      Run interchangeable Next.js instances. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    2. 194
      Database Scaling and Connection Management

      Scale data with indexes, pools, replicas. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 195
      Background Jobs, Queues, and Distributed Systems

      Move slow work off the request path. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 196
      Serverless Scaling and Container Scaling

      Understand cold starts versus always-on containers. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Next.js Projects

    0/8 complete
    1. 197
      Project: TechLearningPro

      Build the learning platform shell with App Router, RSC course pages, auth, and SEO.

    2. 198
      Project: Enterprise E-Commerce

      Design catalog, cart, checkout with rendering and cache strategies. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    3. 199
      Project: SaaS Dashboard

      Ship an authenticated dashboard with streaming widgets. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    4. 200
      Project: Learning Management System

      Model cohorts, assignments, and grading workflows. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    5. 201
      Project: Authentication Platform

      Centralize login, sessions, and OAuth for apps. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    6. 202
      Project: Real-Time Collaboration Application

      Combine Next.js UI with a realtime backend. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    7. 203
      Project: AI-Powered Application

      Integrate model APIs behind server actions with budgets. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    8. 204
      Project: Enterprise Multi-Tenant SaaS

      Add tenancy, roles, audit, and isolation checks. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.

    Practice & Evaluation

    0/3 complete
    1. 205
      Next.js Interview Questions

      Practice Next.js interviews covering RSC, caching, proxy, and architecture trade-offs.

    2. 206
      Next.js Quiz

      Check App Router, RSC, caching, security, and deployment knowledge with scenarios.

    3. 207
      Next.js Exercises

      Practice katas composing RSC, actions, validation, and tests. This Next.js lesson connects the idea to server/client boundaries, production apps, and TechLearningPro.