Next.js Complete Course

Course Level: Beginner → Intermediate → Advanced Framework: Next.js with App Router Language: TypeScript UI: React, Tailwind CSS, shadcn/ui Database/API: REST APIs, server-side data fetching, optional PostgreSQL/Django/Node.js APIs Goal: Build production-ready Next.js applications using modern App Router architecture.

Course Learning Roadmap

The course follows this progression:

textCopy
1React Fundamentals
2       ↓
3Next.js Fundamentals
4       ↓
5App Router
6       ↓
7Layouts & Pages
8       ↓
9Dynamic Routes
10       ↓
11Route Groups
12       ↓
13Server Components
14       ↓
15Client Components
16       ↓
17Data Fetching
18       ↓
19API Routes / Route Handlers
20       ↓
21Forms & Mutations
22       ↓
23Authentication
24       ↓
25Protected Routes
26       ↓
27Tailwind CSS
28       ↓
29shadcn/ui
30       ↓
31Images & Assets
32       ↓
33SEO & Metadata
34       ↓
35Sitemap & Robots
36       ↓
37Performance
38       ↓
39Caching & Revalidation
40       ↓
41Production Architecture
42       ↓
43Real-World Next.js Application

Module 1 — Introduction to Next.js

Learning Objective

Understand what Next.js is, why it is used, and how it differs from traditional React applications.

Topics

1. What is Next.js?
2. Why use Next.js?
3. Next.js vs React
4. Next.js vs traditional SPA
5. Server-side rendering
6. Static rendering
7. Dynamic rendering
8. Client-side rendering
9. App Router
10. Server Components
11. Client Components
12. Full-stack capabilities of Next.js
13. Next.js project architecture
14. Production use cases

Practical Examples

• Blog website
• Documentation website
• E-commerce website
• Dashboard
• Learning platform
• Admin panel

Project

Create the initial Tech3Space-style learning application.

Module 2 — Installing and Creating a Next.js Project

Topics

1. Node.js requirements
2. Installing Next.js
3. create-next-app
4. TypeScript setup
5. ESLint
6. App Router
7. Turbopack
8. Project startup
9. Development server
10. Production build
11. Production server

Important Commands

bashCopy
1npx create-next-app@latest my-next-app
2,[object Object], my-next-app
3npm run dev
4npm run build
5npm run start

Understand

textCopy
1package.json
2next.config.ts
3tsconfig.json
4eslint.config.mjs
5app/
6public/

Module 3 — Understanding Next.js Project Architecture

Topics

1. app/
2. public/
3. components/
4. lib/
5. types/
6. hooks/
7. services/
8. actions/
9. configuration files
10. environment variables

Recommended Production Structure

textCopy
1src/
2├── app/
3│   ├── (public)/
4│   │   ├── page.tsx
5│   │   ├── about/
6│   │   │   └── page.tsx
7│   │   └── courses/
8│   │       └── page.tsx
9│   │
10│   ├── (protected)/
11│   │   ├── dashboard/
12│   │   │   └── page.tsx
13│   │   └── profile/
14│   │       └── page.tsx
15│   │
16│   ├── api/
17│   │   └── courses/
18│   │       └── route.ts
19│   │
20│   ├── layout.tsx
21│   ├── loading.tsx
22│   ├── error.tsx
23│   ├── not-found.tsx
24│   ├── robots.ts
25│   └── sitemap.ts
26│
27├── components/
28│   ├── ui/
29│   ├── layout/
30│   ├── courses/
31│   └── forms/
32│
33├── lib/
34│   ├── api/
35│   ├── auth/
36│   ├── utils/
37│   └── validations/
38│
39├── hooks/
40├── types/
41└── services/

Learning Goal

Students should understand where application logic belongs, rather than placing everything inside page.tsx.

Module 4 — Pages and Layouts

Topics

1. page.tsx
2. layout.tsx
3. Root layout
4. Nested layouts
5. Shared navigation
6. Header
7. Footer
8. Sidebar
9. Loading UI
10. Error UI
11. Not-found pages

Example Architecture

textCopy
1app/
2├── layout.tsx
3├── page.tsx
4└── courses/
5    ├── layout.tsx
6    ├── page.tsx
7    └── [slug]/
8        └── page.tsx

Real-Life Example

Course platform:

textCopy
1/courses
2/courses/python
3/courses/python/functions
4/courses/python/classes

Module 5 — Next.js Routing

Topics

1. Static routes
2. Dynamic routes
3. Nested routes
4. Catch-all routes
5. Optional catch-all routes
6. Route groups
7. Parallel routes
8. Intercepting routes
9. Navigation
10. Link
11. redirect
12. notFound

Module 6 — Dynamic [slug] Routes

Understand how dynamic routes represent database-driven content.

Example

textCopy
1app/
2└── courses/
3    └── [slug]/
4        └── page.tsx

URL:

textCopy
1/courses/python
2/courses/javascript
3/courses/nextjs

The slug identifies the course.

Module 7 — Nested Dynamic Routes

This is especially important for a course-learning platform.

Recommended Structure

textCopy
1app/
2└── courses/
3    └── [slug]/
4        ├── page.tsx
5        └── [topicSlug]/
6            └── page.tsx

URLs:

textCopy
1/courses/nextjs
2/courses/nextjs/routing
3/courses/nextjs/server-components
4/courses/nextjs/client-components
5/courses/nextjs/data-fetching

Understand

textCopy
1[slug]
2    ↓
3Course
4
5[topicSlug]
6    ↓
7Topic inside that course

This architecture is ideal for Tech3Space learning content.

Module 8 — Route Groups (protected)

Route groups allow you to organize routes without adding the group name to the URL.

Example

textCopy
1app/
2├── (public)/
3│   ├── page.tsx
4│   └── courses/
5│
6└── (protected)/
7    ├── dashboard/
8    ├── profile/
9    └── settings/

The (protected) directory does not appear in the URL.

Therefore:

textCopy
1app/(protected)/dashboard/page.tsx

becomes:

textCopy
1/dashboard

Learn

1. Route groups
2. Public routes
3. Protected routes
4. Shared layouts
5. Authentication architecture
6. Authorization
7. Middleware/proxy concepts where applicable
8. Server-side protection
9. Redirecting unauthorized users

Module 9 — React Fundamentals Required for Next.js

Students should understand modern React before advanced Next.js.

Topics

Components

tsxCopy
1[object Object], ,[object Object],(,[object Object],) {
2  ,[object Object], ,[object Object],;
3}

Props

tsxCopy
1[object Object], ,[object Object],(,[object Object],) {
2  ,[object Object], ,[object Object],;
3}

State

tsxCopy
1[object Object], [count, setCount] = ,[object Object],(,[object Object],);

Conditional Rendering

tsxCopy
1{isLoggedIn ? ,[object Object], : ,[object Object],}

Lists

tsxCopy
1courses.,[object Object],(,[object Object], (
2  ,[object Object],
3))

Events

tsxCopy
1<button onClick={handleClick}>
2  ,[object Object],
3</button>

Module 10 — React Hooks

Important Hooks

1. useState
2. useEffect
3. useContext
4. useReducer
5. useRef
6. useMemo
7. useCallback
8. useId
9. useTransition
10. useDeferredValue
11. Custom Hooks

useState

Use for interactive client-side state.

Examples:

• Modal open/close
• Search input
• Tabs
• Dropdown
• Form state
• Counter
• Theme selection

useEffect

Understand:

• side effects
• browser APIs
• subscriptions
• fetching from client components
• dependency arrays
• cleanup

Important lesson:

Do not automatically use useEffect for every data-fetching requirement. In modern Next.js, server-side data fetching is often preferable.

useRef

Examples:

• Focus an input
• Access DOM elements
• Store mutable values

useContext

Examples:

• Theme
• User preferences
• Application settings

Module 11 — Server Components

One of the most important Next.js concepts.

Topics

1. What is a Server Component?
2. Default server components
3. Server rendering
4. Server-side data fetching
5. Server-only code
6. Database access
7. Environment variables
8. Security considerations
9. Server/client component boundaries

Example

tsxCopy
1[object Object], ,[object Object], ,[object Object], ,[object Object], ,[object Object],(,[object Object],) {
2  ,[object Object], courses = ,[object Object], ,[object Object],();
3
4  ,[object Object], (
5    ,[object Object],
6  );
7}

Module 12 — Client Components

Understand when and why to use:

tsxCopy
1[object Object],;

Use Client Components For

• useState
• useEffect
• browser APIs
• event handlers
• interactive UI
• client-side libraries
• browser storage

Example

tsxCopy
1[object Object],;
2
3,[object Object], { useState } ,[object Object], ,[object Object],;
4
5,[object Object], ,[object Object], ,[object Object],(,[object Object],) {
6  ,[object Object], [query, setQuery] = ,[object Object],(,[object Object],);
7
8  ,[object Object], (
9    ,[object Object],
10  );
11}

Module 13 — Server vs Client Components

Create a dedicated comparison module.

Important Architecture

textCopy
1Server Page
2    ↓
3Fetch Data
4    ↓
5Render Content
6    ↓
7Interactive Client Component

Module 14 — Data Fetching in Next.js

Topics

1. Fetching data on the server
2. Fetching data on the client
3. REST APIs
4. External APIs
5. Internal APIs
6. Database queries
7. Request caching
8. Revalidation
9. Dynamic data
10. Error handling
11. Loading states

Server Fetch Example

tsxCopy
1[object Object], ,[object Object], ,[object Object],(,[object Object],) {
2  ,[object Object], response = ,[object Object], ,[object Object],(
3    ,[object Object],
4  );
5
6  ,[object Object], (!response.,[object Object],) {
7    ,[object Object], ,[object Object], ,[object Object],(,[object Object],);
8  }
9
10  ,[object Object], response.,[object Object],();
11}

Client Fetch Example

tsxCopy
1[object Object],;
2
3,[object Object], { useEffect, useState } ,[object Object], ,[object Object],;
4
5,[object Object], ,[object Object], ,[object Object], ,[object Object],(,[object Object],) {
6  ,[object Object], [courses, setCourses] = ,[object Object],([]);
7
8  ,[object Object],(,[object Object], {
9    ,[object Object],(,[object Object],)
10      .,[object Object],(,[object Object], response.,[object Object],())
11      .,[object Object],(setCourses);
12  }, []);
13
14  ,[object Object], ,[object Object],;
15}

Learning Goal

Understand when server fetching is better than client fetching.

Module 15 — API Routes and Route Handlers

Topics

1. Route handlers
2. GET
3. POST
4. PUT
5. PATCH
6. DELETE
7. Request body
8. Query parameters
9. Route parameters
10. Headers
11. Cookies
12. Authentication
13. Validation
14. Error responses
15. HTTP status codes

Example

textCopy
1app/api/courses/route.ts

tsxCopy
1[object Object], ,[object Object], ,[object Object], ,[object Object],(,[object Object],) {
2  ,[object Object], courses = ,[object Object], ,[object Object],();
3
4  ,[object Object], ,[object Object],.,[object Object],(courses);
5}

Module 16 — Real API Architecture

Build:

textCopy
1Next.js Page
2      ↓
3Service Function
4      ↓
5API
6      ↓
7Backend
8      ↓
9Database

Example:

textCopy
1Course Page
2     ↓
3getCourse(slug)
4     ↓
5GET /api/courses/:slug
6     ↓
7Django / Node.js API
8     ↓
9PostgreSQL / MySQL

Module 17 — TypeScript in Next.js

Topics

1. Type aliases
2. Interfaces
3. Generics
4. Function types
5. API response types
6. Component props
7. Optional properties
8. Union types
9. Utility types
10. Async function types

Example

tsCopy
1[object Object], ,[object Object], {
2  ,[object Object],: ,[object Object],;
3  ,[object Object],: ,[object Object],;
4  ,[object Object],: ,[object Object],;
5  ,[object Object],: ,[object Object],;
6}

Function Schema

tsCopy
1[object Object], ,[object Object], ,[object Object], ,[object Object],(,[object Object],): ,[object Object],<,[object Object],> {
2  ,[object Object],
3}

Advanced Function Design

tsCopy
1[object Object], ,[object Object], ,[object Object], ,[object Object],(,[object Object],): ,[object Object],<,[object Object],[]> {
2  ,[object Object],
3}

Module 18 — API Service Functions

Do not put every API request directly inside page.tsx.

Recommended:

textCopy
1lib/
2└── api/
3    ├── courses.ts
4    ├── users.ts
5    ├── topics.ts
6    └── auth.ts

Example:

tsCopy
1[object Object], ,[object Object], ,[object Object], ,[object Object],(,[object Object],) {
2  ,[object Object], response = ,[object Object], ,[object Object],(
3    ,[object Object],
4  );
5
6  ,[object Object], (!response.,[object Object],) {
7    ,[object Object], ,[object Object], ,[object Object],(,[object Object],);
8  }
9
10  ,[object Object], response.,[object Object],();
11}

Then:

tsxCopy
1[object Object], { getCourse } ,[object Object], ,[object Object],;
2
3,[object Object], ,[object Object], ,[object Object], ,[object Object], ,[object Object],(,[object Object],) {
4  ,[object Object], course = ,[object Object], ,[object Object],(,[object Object],);
5
6  ,[object Object], ,[object Object],;
7}

Module 19 — Forms in Next.js

Topics

1. HTML forms
2. Controlled inputs
3. Uncontrolled inputs
4. Form validation
5. Client-side validation
6. Server-side validation
7. Form submission
8. Loading states
9. Error messages
10. Success messages
11. Server Actions
12. Mutations

Real-Life Examples

• Login
• Registration
• Contact form
• Course enrollment
• Profile update
• Search
• Course creation
• Admin content editor

Module 20 — Authentication and Authorization

Topics

1. Authentication
2. Authorization
3. Login
4. Logout
5. Sessions
6. Cookies
7. Access tokens
8. Refresh tokens
9. Role-based access
10. Protected pages
11. Protected APIs

Architecture

textCopy
1User
2 ↓
3Login
4 ↓
5Authentication API
6 ↓
7Session / Token
8 ↓
9Protected Route
10 ↓
11Server validates user
12 ↓
13Dashboard

Module 21 — Protected Application Architecture

Example:

textCopy
1app/
2├── (public)/
3│   ├── page.tsx
4│   ├── courses/
5│   └── login/
6│
7└── (protected)/
8    ├── dashboard/
9    ├── profile/
10    ├── courses/
11    └── settings/

Teach the difference between:

textCopy
1Route organization

and:

textCopy
1Actual security

A (protected) folder alone does not protect a route. Authentication/authorization logic must enforce access.

Module 22 — Tailwind CSS

Topics

1. Tailwind installation
2. Configuration
3. Utility classes
4. Responsive design
5. Flexbox
6. Grid
7. Spacing
8. Typography
9. Borders
10. Shadows
11. Dark mode
12. Responsive layouts
13. Component styling
14. Custom design tokens

Build

textCopy
1Navbar
2Hero
3Course Cards
4Sidebar
5Course Content
6Footer
7Dashboard
8Login Page

Module 23 — shadcn/ui

Topics

1. What is shadcn/ui?
2. Installation
3. Component architecture
4. Button
5. Card
6. Dialog
7. Sheet
8. Dropdown
9. Tabs
10. Accordion
11. Input
12. Select
13. Table
14. Toast
15. Form components

Real-Life Application

Build a course dashboard:

textCopy
1┌──────────────────────────────────┐
2│ Navbar                           │
3├───────────┬──────────────────────┤
4│ Sidebar   │ Course Content       │
5│           │                      │
6│ Modules   │ Topic                │
7│ Topics    │ Lesson               │
8│ Progress  │                      │
9└───────────┴──────────────────────┘

Module 24 — Images in Next.js

Topics

1. next/image
2. Image optimization
3. Width and height
4. Responsive images
5. fill
6. sizes
7. Priority loading
8. Remote images
9. Image configuration
10. Accessibility
11. Alt text
12. Image performance

Example

tsxCopy
1[object Object], ,[object Object], ,[object Object], ,[object Object],;
2
3,[object Object],

Real-Life Examples

• Course thumbnails
• User avatars
• Blog images
• Hero images
• Documentation diagrams

Module 25 — Metadata and SEO

Topics

1. Metadata API
2. Static metadata
3. Dynamic metadata
4. generateMetadata
5. SEO title
6. Description
7. Open Graph
8. Twitter metadata
9. Canonical URLs
10. Robots metadata

Dynamic Example

tsxCopy
1[object Object], ,[object Object], ,[object Object], ,[object Object],(,[object Object],) {
2  ,[object Object], { slug } = ,[object Object], params;
3
4  ,[object Object], course = ,[object Object], ,[object Object],(slug);
5
6  ,[object Object], {
7    ,[object Object],: course.,[object Object], ?? course.,[object Object],,
8    ,[object Object],:
9      course.,[object Object], ??
10      course.,[object Object],,
11  };
12}

Module 26 — Sitemap and Robots

Topics

1. Why sitemap matters
2. sitemap.ts
3. Dynamic sitemap generation
4. Course URLs
5. Topic URLs
6. robots.ts
7. Search engine crawling
8. Indexing
9. Canonical URLs

Example

textCopy
1app/
2├── sitemap.ts
3└── robots.ts

Dynamic Sitemap Architecture

textCopy
1Database
2   ↓
3Courses
4   ↓
5Topics
6   ↓
7Generate URLs
8   ↓
9sitemap.xml

Module 27 — Loading, Error and Not Found UI

Topics

1. loading.tsx
2. error.tsx
3. not-found.tsx
4. Suspense
5. Skeleton UI
6. Error boundaries
7. API errors
8. 404 handling

Real-Life Example

textCopy
1Course Page
2    ↓
3Loading
4    ↓
5Fetch Course
6    ↓
7 ┌───────────────┐
8 │               │
9Success       Failure
10 │               │
11Course        Error UI
12 │
13Not found
14 │
15404

Module 28 — Search and Filtering

Topics

1. Search input
2. URL search parameters
3. searchParams
4. Filtering
5. Pagination
6. Sorting
7. Debouncing
8. Server-side search
9. Client-side search

Real-Life Example

textCopy
1/courses?search=nextjs
2/courses?category=frontend
3/courses?page=2
4/courses?level=advanced

Module 29 — Pagination

Build production-style pagination.

textCopy
1Courses
2
31  2  3  4  5  Next

Understand:

• URL-based pagination
• API pagination
• database pagination
• server rendering
• loading states

Module 30 — Caching and Revalidation

Topics

1. Next.js caching concepts
2. Request caching
3. Revalidation
4. Time-based revalidation
5. On-demand revalidation
6. Dynamic rendering
7. Static rendering
8. Cache invalidation

Real-Life Example

Course content may be relatively stable:

textCopy
1Course API
2   ↓
3Cache
4   ↓
5Next.js

When course content changes:

textCopy
1Admin updates course
2       ↓
3Revalidate
4       ↓
5Updated page

Module 31 — Performance Optimization

Topics

1. Core Web Vitals
2. LCP
3. INP
4. CLS
5. Image optimization
6. Font optimization
7. Code splitting
8. Lazy loading
9. Dynamic imports
10. Streaming
11. Suspense
12. Server Components
13. Bundle optimization
14. API optimization

Module 32 — Accessibility

Topics

1. Semantic HTML
2. Accessible navigation
3. Keyboard navigation
4. Form labels
5. ARIA
6. Image alt text
7. Focus management
8. Color contrast
9. Screen readers

Module 33 — Environment Configuration

Topics

1. .env
2. .env.local
3. Server environment variables
4. Public environment variables
5. API URLs
6. Database configuration
7. Production secrets
8. Security considerations

Important Concept

Never expose secrets through:

textCopy
1NEXT_PUBLIC_*

unless the value is intentionally public.

Module 34 — Next.js Configuration

Understand:

textCopy
1next.config.ts

Topics:

1. Images
2. Remote image patterns
3. Redirects
4. Rewrites
5. Headers
6. Environment configuration
7. Experimental configuration
8. Build configuration

Module 35 — Middleware / Request-Level Routing Concepts

Topics

1. Request interception
2. Authentication checks
3. Redirects
4. Locale routing
5. Request headers
6. Cookies
7. Security considerations

Explain the current Next.js request-handling architecture used by the version being taught, rather than teaching older middleware patterns blindly.

Module 36 — Database Integration

Topics

1. Why database access should remain server-side
2. PostgreSQL
3. MySQL
4. ORM concepts
5. Prisma
6. Drizzle
7. Direct database access
8. Database queries
9. Connection management
10. Security

Architecture

textCopy
1Next.js Server Component
2        ↓
3Service Function
4        ↓
5Database Layer
6        ↓
7PostgreSQL

Module 37 — Next.js + External Backend

This is an important real-world architecture.

Example

textCopy
1Browser
2   ↓
3Next.js
4   ↓
5Django REST API
6   ↓
7PostgreSQL

or:

textCopy
1Browser
2   ↓
3Next.js
4   ↓
5Node.js API
6   ↓
7MongoDB/PostgreSQL

Teach:

• API authentication
• CORS
• server-to-server requests
• environment variables
• API error handling
• serialization
• TypeScript types

Module 38 — Real-Life Project 1: Learning Platform

Build a complete course platform.

Features

textCopy
1Home
2Courses
3Course Details
4Topics
5Lessons
6Search
7Categories
8Authentication
9Dashboard
10Progress
11Profile

URL Architecture

textCopy
1/
2 
3/courses
4
5/courses/[slug]
6
7/courses/[slug]/[topicSlug]
8
9/dashboard
10
11/dashboard/courses
12
13/dashboard/progress

Module 39 — Real-Life Project 2: Blog Platform

Build:

textCopy
1/blog
2/blog/[slug]
3/categories/[slug]
4/authors/[slug]

Features:

• Markdown content
• Dynamic metadata
• SEO
• sitemap
• search
• categories
• related posts
• optimized images

Module 40 — Real-Life Project 3: E-Commerce Application

Build:

textCopy
1/products
2/products/[slug]
3/categories/[slug]
4/cart
5/checkout
6/account

Features:

• Product listing
• Search
• Filtering
• Cart
• Authentication
• Checkout
• Orders
• User dashboard

Module 41 — Real-Life Project 4: Admin Dashboard

Build:

textCopy
1/dashboard
2/dashboard/users
3/dashboard/courses
4/dashboard/topics
5/dashboard/orders
6/dashboard/settings

Features:

• Authentication
• Authorization
• Tables
• Forms
• CRUD
• Search
• Pagination
• Charts
• shadcn/ui

Module 42 — Complete CRUD Application

Students build:

textCopy
1Create
2Read
3Update
4Delete

Example:

textCopy
1Course Management
2
3Create Course
4      ↓
5Read Courses
6      ↓
7Update Course
8      ↓
9Delete Course

Teach both:

textCopy
1UI
2↓
3Server Action / API
4↓
5Backend
6↓
7Database

Module 43 — Testing

Topics

1. Unit testing
2. Component testing
3. Integration testing
4. API testing
5. End-to-end testing
6. Playwright
7. Testing forms
8. Testing authentication

Module 44 — Security

Topics

1. XSS
2. CSRF
3. Authentication security
4. Authorization
5. Input validation
6. API security
7. Secret management
8. Secure cookies
9. Rate limiting
10. Security headers
11. Dependency security

Module 45 — Production Deployment

Topics

1. npm run build
2. Production server
3. Deployment architecture
4. Environment variables
5. Reverse proxy
6. Nginx
7. HTTPS
8. Docker
9. VPS deployment
10. Logs
11. Monitoring
12. Health checks

Production Architecture

textCopy
1Internet
2   ↓
3Nginx
4   ↓
5Next.js
6   ↓
7Backend API
8   ↓
9Database

Module 46 — Dockerizing Next.js

Topics

1. Docker basics
2. Dockerfile
3. Multi-stage builds
4. Production image
5. Docker Compose
6. Environment variables
7. Networking
8. Health checks
9. Container logs

Architecture

textCopy
1nginx
2  ↓
3nextjs
4  ↓
5backend
6  ↓
7postgres

Module 47 — Final Production Architecture

Students should understand this complete architecture:

textCopy
1                         INTERNET
2                            │
3                            ▼
4                         NGINX
5                            │
6                 ┌──────────┴──────────┐
7                 │                     │
8                 ▼                     ▼
9              Next.js                Static
10              Frontend               Assets
11                 │
12        ┌────────┴────────┐
13        │                 │
14        ▼                 ▼
15   Server Components   Client Components
16        │                 │
17        ▼                 │
18   Service Functions      │
19        │                 │
20        ▼                 ▼
21    Backend API ←────── Browser
22        │
23        ▼
24    Database

Module 48 — Complete Tech3Space-Style Architecture

For a learning platform, use:

textCopy
1src/
2├── app/
3│
4│   ├── (public)/
5│   │   ├── page.tsx
6│   │   ├── courses/
7│   │   │   ├── page.tsx
8│   │   │   └── [slug]/
9│   │   │       ├── page.tsx
10│   │   │       └── [topicSlug]/
11│   │   │           └── page.tsx
12│   │   │
13│   │   └── blog/
14│   │
15│   ├── (protected)/
16│   │   ├── dashboard/
17│   │   ├── profile/
18│   │   └── settings/
19│   │
20│   ├── api/
21│   │   ├── courses/
22│   │   ├── topics/
23│   │   └── users/
24│   │
25│   ├── layout.tsx
26│   ├── loading.tsx
27│   ├── error.tsx
28│   ├── not-found.tsx
29│   ├── robots.ts
30│   └── sitemap.ts
31│
32├── components/
33│   ├── ui/
34│   ├── courses/
35│   ├── topics/
36│   ├── navigation/
37│   └── forms/
38│
39├── lib/
40│   ├── api/
41│   │   ├── courses.ts
42│   │   ├── topics.ts
43│   │   └── users.ts
44│   │
45│   ├── auth/
46│   ├── utils/
47│   └── validations/
48│
49├── hooks/
50├── services/
51└── types/

Module 49 — How a Course Page Works

A student should understand this complete request flow:

textCopy
1User opens:
2
3/courses/nextjs/server-components
4
5        ↓
6
7Next.js Router
8
9        ↓
10
11[slug] = nextjs
12
13        ↓
14
15[topicSlug] = server-components
16
17        ↓
18
19Server Page
20
21        ↓
22
23getCourse("nextjs")
24
25        ↓
26
27getTopic("server-components")
28
29        ↓
30
31API / Database
32
33        ↓
34
35Validate response
36
37        ↓
38
39Render Server Component
40
41        ↓
42
43Interactive Client Components
44
45        ↓
46
47Browser

This should be one of the most important architecture lessons in the course.

Module 50 — Final Capstone Project

Build a Production-Ready Learning Platform

Students build a complete application containing:

Public

textCopy
1Home
2Courses
3Course Details
4Topics
5Lessons
6Blog
7Search
8About
9Contact

Authentication

textCopy
1Login
2Register
3Forgot Password
4Profile

Protected

textCopy
1Dashboard
2Learning Progress
3Bookmarks
4User Settings

Admin

textCopy
1Course Management
2Topic Management
3Lesson Management
4User Management

Technical Features

textCopy
1Next.js App Router
2TypeScript
3Server Components
4Client Components
5React Hooks
6API Fetching
7Route Handlers
8Server Actions
9Authentication
10Authorization
11Tailwind CSS
12shadcn/ui
13next/image
14Metadata
15Dynamic SEO
16sitemap.ts
17robots.ts
18Loading UI
19Error UI
20Pagination
21Search
22Filtering
23Caching
24Revalidation
25Database/API integration
26Docker
27Nginx
28Production deployment

Recommended Learning Order

The complete course should be presented to learners in these stages:

Stage 1 — Foundation

textCopy
1Module 1  → Introduction
2Module 2  → Installation
3Module 3  → Architecture
4Module 4  → Pages & Layouts
5Module 5  → Routing
6Module 6  → Dynamic Routes
7Module 7  → Nested Routes

Stage 2 — React + Next.js

textCopy
1Module 8  → Route Groups
2Module 9  → React Fundamentals
3Module 10 → React Hooks
4Module 11 → Server Components
5Module 12 → Client Components
6Module 13 → Server vs Client

Stage 3 — Data and APIs

textCopy
1Module 14 → Data Fetching
2Module 15 → Route Handlers
3Module 16 → API Architecture
4Module 17 → TypeScript
5Module 18 → Service Functions
6Module 19 → Forms

Stage 4 — Application Development

textCopy
1Module 20 → Authentication
2Module 21 → Protected Routes
3Module 22 → Tailwind
4Module 23 → shadcn/ui
5Module 24 → Images

Stage 5 — SEO + Performance

textCopy
1Module 25 → Metadata
2Module 26 → Sitemap & Robots
3Module 27 → Loading/Error UI
4Module 28 → Search
5Module 29 → Pagination
6Module 30 → Caching
7Module 31 → Performance
8Module 32 → Accessibility

Stage 6 — Backend + Production

textCopy
1Module 33 → Environment Configuration
2Module 34 → Next Configuration
3Module 35 → Request-Level Routing
4Module 36 → Database
5Module 37 → External APIs
6Module 38 → Learning Platform
7Module 39 → Blog
8Module 40 → E-Commerce
9Module 41 → Admin Dashboard
10Module 42 → CRUD
11Module 43 → Testing
12Module 44 → Security
13Module 45 → Deployment
14Module 46 → Docker

Stage 7 — Advanced Architecture

textCopy
1Module 47 → Production Architecture
2Module 48 → Tech3Space Architecture
3Module 49 → Complete Request Flow
4Module 50 → Final Capstone

Suggested Course Topic Slugs

For your [slug]/[topicSlug] architecture:

textCopy
1nextjs/
2├── introduction
3├── installation
4├── project-structure
5├── app-router
6├── pages-and-layouts
7├── dynamic-routes
8├── nested-dynamic-routes
9├── route-groups
10├── react-fundamentals
11├── react-hooks
12├── use-state
13├── use-effect
14├── use-context
15├── use-ref
16├── use-memo
17├── use-callback
18├── server-components
19├── client-components
20├── server-vs-client-components
21├── data-fetching
22├── api-route-handlers
23├── api-service-functions
24├── typescript
25├── forms
26├── server-actions
27├── authentication
28├── protected-routes
29├── tailwind-css
30├── shadcn-ui
31├── next-image
32├── metadata
33├── dynamic-metadata
34├── sitemap
35├── robots
36├── loading-ui
37├── error-handling
38├── search
39├── pagination
40├── caching
41├── revalidation
42├── performance
43├── accessibility
44├── environment-variables
45├── next-config
46├── database
47├── external-api
48├── crud
49├── testing
50├── security
51├── deployment
52├── docker
53├── nginx
54└── capstone-project

SEO Configuration

Course SEO

Meta Title

Next.js Complete Course: App Router, TypeScript & Projects

Meta Description

Learn Next.js from beginner to advanced with App Router, React, TypeScript, Server Components, APIs, Tailwind, SEO and real-world projects.

SEO Keywords

textCopy
1Next.js course,
2Next.js tutorial,
3learn Next.js,
4Next.js App Router,
5Next.js TypeScript,
6Next.js Server Components,
7Next.js Client Components,
8Next.js API,
9Next.js routing,
10Next.js project,
11Next.js full course,
12React Next.js tutorial,
13Next.js authentication,
14Next.js Tailwind CSS,
15Next.js shadcn UI,
16Next.js SEO,
17Next.js sitemap,
18Next.js deployment

Individual Topic SEO Pattern

For:

textCopy
1/courses/nextjs/server-components

Meta Title

Next.js Server Components: Complete Guide & Examples

Meta Description

Learn Next.js Server Components with practical examples covering data fetching, API calls, database access and Server vs Client Components.

SEO Keywords

textCopy
1Next.js Server Components,
2React Server Components,
3Next.js server component tutorial,
4Next.js data fetching,
5Next.js API fetching,
6Next.js App Router,
7Server Components Next.js

Course Design Principle

Every topic should follow the same learning structure:

textCopy
11. What is it?
2        ↓
32. Why is it needed?
4        ↓
53. Basic syntax
6        ↓
74. Simple example
8        ↓
95. Next.js example
10        ↓
116. Real-world example
12        ↓
137. Common mistakes
14        ↓
158. Best practices
16        ↓
179. Architecture explanation
18        ↓
1910. Practice task
20        ↓
2111. Mini project

This makes the course much easier to understand than simply listing Next.js APIs.

Final Learning Outcome

After completing the course, a learner should be able to independently build a production-style Next.js application and understand:

textCopy
1React
2  +
3Next.js
4  +
5TypeScript
6  +
7App Router
8  +
9Server Components
10  +
11Client Components
12  +
13APIs
14  +
15Database
16  +
17Authentication
18  +
19Tailwind
20  +
21shadcn/ui
22  +
23SEO
24  +
25Performance
26  +
27Docker
28  +
29Nginx
30  +
31Production Deployment

The final goal is not merely to teach Next.js syntax, but to teach learners how a real Next.js application is architected from URL → page → component → service function → API → database → response → SEO → production deployment.