logo
Course

The Ultimate Next.js 15 Course

0% completed

100%

Chapter 01

Getting Started

  • Meet Adrian, Your Instructor

    Free
  • Get the Most Out of This Course

    Free
  • Access to a Private 24/7 Community

    Free
  • Environment Setup

    Free

Chapter 02

Intro & Prerequisites

  • Intro to the course

    Free
  • Prerequisites

    Free

Chapter 03

Intro to Next.js

  • Before Next.js

    Free
  • Introduction to Next.js

    Free
  • How Web Works

    Free

Chapter 04

Practical Crash Course

  • Next.js installation

    Free
  • Next.js Project Structure

    Free
  • App Router

    Free
  • React Client and Server Components

    Free
  • Routing, Handling Errors & Loadings

    Free
  • Data Fetching (CSR, SSR, ISR, PPR)

    Free
  • API Routes

    Free
  • SEO & Metadata

    Free

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

Get the Most Out of This Course

Loading...

Get the Most Out of This Course

Loading...
Loading...
Loading...
    Video thumbnail
    Course icon

    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

    or

    Already have an account? Log in

    0 Comments

    glass-bbok

    No Comments Yet

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

    tick-guideNext Lesson

    Access to a Private 24/7 Community

    I’ve broken the course into manageable, bite-sized lessons. Each lesson is focused on a specific topic, so you can progress step by step. Here’s what you can expect in every lesson:

    1. Brief Introduction – Understand the core idea behind the topic and why it’s important.
    2. Follow-Along Demos – Practice coding as you watch. Replicate everything shown in the video to reinforce your understanding.
    3. Quizzes and Exercises – Test your knowledge and identify areas where you might need to improve.
    4. Additional Resources – Find links, references, and suggestions to deepen your understanding.

    There are a couple of things to know so you can get the most out of this course:

    1. Active Participation

    • Follow along with the videos. Don’t just watch—type out the code yourself. Repetition and hands-on practice are the fastest ways to learn.

    • Experiment with the code. Don’t stop at what’s shown in the lesson—try changing variables, tweaking functions, or applying concepts in new ways to see how things work.

    2. Engage with the Community

    • Join the private Discord Community. This is a space to ask questions, share knowledge, and collaborate with others who are learning alongside you. Helping others is also a fantastic way to solidify your own understanding.

    • Use the comments section below each lesson to clarify doubts or share insights. Don’t hesitate to ask questions—no question is too small.

    3. Stay Consistent

    • Block out dedicated time for this course in your weekly schedule. Even 30–60 minutes a day can create meaningful progress.

    • Avoid skipping lessons, even if you think you know the material. Each lesson builds on the previous one, and you might discover new perspectives or tips.

    4. Master the Basics

    • Take the time to fully grasp foundational topics, these are the building blocks for everything else.

    • If you find something confusing, revisit the lesson or use the provided resources to deepen your understanding.

    5. Embrace Mistakes

    • Mistakes are a natural part of learning. When you encounter an error, take a moment to debug and understand what went wrong. Every error you fix is a lesson learned.

    6. Quizzes Are Key

    • Complete every quiz. These are designed to reinforce your knowledge and highlight areas where you may need more practice.

    7. Stay Motivated

    • Remember, countless others have followed this path and achieved their dreams. This course is designed to help you do the same.

    Why This Course is Different

    This isn’t just another tutorial. By the end of this course, you won’t just know what you’ve been learning about—you’ll be able to use it to build impressive projects, and even ace job interviews.

    The tools within our platform and community are here to support you every step of the way.

    Let’s dive in and start building your developer career!