Skip to main content
Tech SkillsNext.js Basic
web-developmentBeginner

Next.js Basic

Learn the Core Features of Next.js

25 hours
54 lessons
6 modules
0 enrolled

Learn the core features and structure of Next.js to start building full-stack applications. Master routing, data fetching, server-side rendering, and modern React patterns.

Start Learning

What you'll learn

  • Hands-on coding challenges
  • Real-world project examples
  • Interview preparation tips
  • Best practices & patterns
Certificate on completion
Interactive code challenges

Course Syllabus

🚀
Module 1

Next.js Basics

Introduction to Next.js fundamentals and project setup

14 lessons

~120 min

1

Introduction to Next.js

2 steps · 15 min

2

Create Next App

1 steps · 15 min

3

Next.js Folder Structure

1 steps · 15 min

4

src Directory

1 steps · 10 min

5

Tailwind CSS Setup

1 steps · 10 min

6

Next.js vs React

1 steps · 10 min

7

Import Images

1 steps · 10 min

8

Import Stylesheets

1 steps · 10 min

9

Starting Development Server

1 steps · 10 min

10

Dynamic Import

1 steps · 10 min

11

Material-UI Integration

1 steps · 10 min

12

Routing Introduction

1 steps · 10 min

13

MongoDB Integration

1 steps · 10 min

14

Module 1 Quiz

1 steps · 10 min

🛤️
Module 2

Next.js Routing

Master the file-based routing system

6 lessons

~60 min

1

Getting Current Route

1 steps · 10 min

2

Catch-All Routes

1 steps · 10 min

3

Optional Catch-All Routes

1 steps · 10 min

4

Nested Routes

1 steps · 10 min

5

Dynamic API Routes

1 steps · 10 min

6

Module 2 Quiz

1 steps · 10 min

⚙️
Module 3

Next.js Functions

Learn essential Next.js data fetching and utility functions

10 lessons

~90 min

1

getServerSideProps

1 steps · 10 min

2

getStaticPaths

1 steps · 10 min

3

generateMetadata

1 steps · 10 min

4

generateImageMetadata

1 steps · 10 min

5

Fetch API in Next.js

1 steps · 10 min

6

generateStaticParams

1 steps · 10 min

7

NextResponse

1 steps · 10 min

8

NextRequest

1 steps · 10 min

9

Data Fetching Methods

1 steps · 10 min

10

Module 3 Quiz

1 steps · 10 min

✨
Module 4

Next.js Features

Explore built-in Next.js features

6 lessons

~60 min

1

Global CSS Support

1 steps · 10 min

2

Pages in Next.js

1 steps · 10 min

3

Static File Serving

1 steps · 10 min

4

Pre-Rendering

1 steps · 10 min

5

Environment Variables

1 steps · 10 min

6

CSS Support

1 steps · 10 min

💻
Module 5

Practice Code Examples

Build real-world components and features

11 lessons

~120 min

1

Custom Local Fonts

1 steps · 10 min

2

Image Carousel

1 steps · 10 min

3

Video Player

1 steps · 10 min

4

Form Validation

1 steps · 10 min

5

Custom Error Page

1 steps · 10 min

6

Skeleton Loading

1 steps · 10 min

7

Popup Modal

1 steps · 10 min

8

Spinner Loader

1 steps · 10 min

9

DatePicker

1 steps · 10 min

10

YouTube Videos

1 steps · 10 min

11

Slider Component

1 steps · 10 min

🎓
Module 6

Advanced Topics

Advanced Next.js concepts and techniques

7 lessons

~70 min

1

Migrate from Create React App

1 steps · 10 min

2

ESLint Ignore

1 steps · 10 min

3

Advanced Nested Routes

1 steps · 10 min

4

Custom Server

1 steps · 10 min

5

Server-Side Rendering

1 steps · 10 min

6

Advanced Optional Catch-All

1 steps · 10 min

7

Reset Development Cache

1 steps · 10 min