The Ultimate Next.js 15 Course

0% completed

100%

Chapter 01

Getting Started

Meet Adrian, Your Instructor
Get the Most Out of This Course
Access to a Private 24/7 Community
Environment Setup

Chapter 02

Intro & Prerequisites

Intro to the course
Prerequisites

Chapter 03

Intro to Next.js

Before Next.js
Introduction to Next.js
How Web Works

Chapter 04

Practical Crash Course

Next.js installation
Next.js Project Structure
App Router
React Client and Server Components
Routing, Handling Errors & Loadings
Data Fetching (CSR, SSR, ISR, PPR)
API Routes
SEO & Metadata

Chapter 05

Setup of the project

Create a Next.js Application
Git & GitHub Setup
ESlint & Prettier Setup
Tailwind CSS Setup
Tailwind CSS Theming
Setup Fonts
Assets and Metadata

Chapter 06

Next.js Routing

File Based Routing

Chapter 07

Architecture

Birth of Server Components
Client vs. Server Paradigm
Different Rendering Strategies

Chapter 08

Light & Dark Theme

Set up the themes
Installing ShadCN UI
Creating the Navbar
Create a theme toggler

Chapter 09

Authentication

What is Authentication
HTTP State Management Mechanisms
Create Auth Routes
Create Auth Layout & Social Auth Form
Setup NextAuth with GitHub Provider
Implement Github SignIn
Implement Google SignIn
Creating Auth Form

Chapter 10

Application Navigation

Mobile Navigation
Active Lesson: LeftSidebar
Implement LeftSidebar
Implement RightSidebar

Chapter 11

State Management

What’s State Management
Different types of State Management
State Management in Next.js
URL State Management
Different URL Parameters in Next.js
How to do URL State Management

Chapter 12

Home Page

Home Layout
Local Search Bar
Filter in Next.js
Question Card

Chapter 13

Ask a Question Page

Question Form
Question Editor
Multiple Tags Input

Chapter 14

Develop Your Backend

Thinking in Backend
Setup MongoDB and Mongoose
Architect Database Structure
Create User Model
Action Lesson: Create Account Model
Create Account Model
Action Lesson: Create Question Model
Create Question Model
Action Lesson: Create Answer Model
Create Answer Model
Action Lesson: Create Tag Models
Create Tag Models
Action Lesson: Create Vote Model
Create Vote Model
Active Lesson: Create Collection Model
Create Collection Model
Action Lesson: Create Interaction Model
Create Interaction Model
The Mongoose Types

Chapter 15

Error & Log Handlers

The Art of Failing Gracefully
Implement Error Handling
Implement Logging

Chapter 16

API Routes (Route Handlers)

What is Serverless Backend
Introduction to Route Handlers
Common API Things to Keep in Mind
Create & Read User Routes
Dynamic User Routes
Users by Mail
Create & Read Account Routes
Dynamic Account Routes
Account by Provider
API Fetch Handler

Chapter 17

Authentication II: Social Auth Accounts

Flow of Application
The Edge Case
Accounts for oAuth
Debugging oAuth
What's Next?!

Chapter 18

Server Actions

Introduction to Server Actions
Server Action Demo
When and When Not to Use Server Actions
Security Concerns
API Routes vs Server Actions

Chapter 19

Authentication III: Email Password Auth

Flow of Application
Server Action Handler
Sign Up implementation
Sign In implementation
Auth Checks and Logout

Chapter 20

Question Submission

Create Question Action
Create and Test Question
Edit Question Action
Edit and Test Question

Chapter 21

Home Page DevOverflow

Fetch and Display Questions
Render UI States

Chapter 22

Tags Page

Create Tags Action
Display Tags
Create Tags Question Action
Display Tag Specific Questions

Chapter 23

Question Details

Create Question Details UI
Render Question Content
Fetch Question Details
Question Views (Approach #1)
Question Views (Approach #2)
Question Views (Approach #3)

Chapter 24

Answer Submission

Create Answer Form
Create Answer Action
Create Get All Answers action
Display All Answers

Chapter 25

AI Integration

AI Integration (Intro)
OpenAI Integration
AI Answer API Route
Generate AI Answer
Make Your Answer AI-Perfect

Chapter 26

Voting Actions

Develop UI
Create Vote Actions
Has Voted Action
Integrate Actions on UI
Fix Vote Issue
Answer Votes

Chapter 27

Community Pages

Get All Users Action
Display all Users

Chapter 28

Collections Page

Add to Collection Action
Implement Save Question
Show User Has Saved Question
Get All Saved Questions Action
Develop Collections Page

Chapter 29

Filters & Pagination

Create Filter Component
Integrate Filters Everywhere
Implement Pagination

Chapter 30

Show Top Results

Show Top Questions
Show Popular Tags
Optimization

Chapter 31

Profile Page

Get User Info
Develop Profile Header
Develop Stats UI
Tabs Layout
Implement User Questions Tab
Implement User Answers Tab
Implement User Tags

Chapter 32

Manage Questions and Answers

A note moving forward
Create Edit Delete Component for Questions and Answers
Implement Question Delete Functionality
Implement Answer Delete Functionality

Chapter 33

Reputation and Recommendation

Introduction to User Reputation and Recommendations
Build interactions and reputation
Call Interactions on Actions
Badge System
Build Recommendation System

Chapter 34

Loading and Error

Introduction to Loadings and Errors
Use of Loading file
Use of Error File

Chapter 35

Metadata

What is SEO?
How to SEO-optimize websites in Nextjs?
More on Metadata

Chapter 36

Optimizations

Optimization Strategies
Advanced Next.js

Chapter 37

More Features

Develop Jobs Feature
Global Search
Edit Profile

Chapter 38

Deployment

Deploy on Vercel

Course

Before Next.js

Sign up to watch this lesson (and more).

By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.

Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.

You'll also be the first to know about upcoming launches, events, and exclusive discounts.

No spam—just helpful content to level up your skills.

If that sounds fair, go ahead and log in to continue →

Enter your name and email to get instant access

Before Next.js

In this video, we explore the evolution of JavaScript from its inception in 1995 to the introduction of frameworks like React.js and Next.js. The constant evolution of technology emphasizes the need for developers to adapt and embrace new tools. While vanilla JavaScript remains a foundation, utilizing modern frameworks enhances efficiency in large-scale application development. The video showcases the "hello world" example in various frameworks, illustrating the increase in code complexity but also the improved capabilities offered by newer technologies. Embracing change and staying updated with evolving technologies are essential for success in the ever-changing IT industry landscape.

The Ultimate Next.js Ebook

0 Comments

No Comments Yet

Be the first to share your thoughts and start the conversation.