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

Introduction to Next.js

Loading...

Introduction to Next.js

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

    How Web Works

    Next.js is a React framework that simplifies application development by providing pre-built solutions for common functionalities like database integration and routing. It extends React's capabilities with ready-to-use features and additional functionalities. Next.js streamlines front-end development by eliminating the need for configuring tools, allowing more time for writing React code and focusing on business logic. The learning curve is smooth, especially for React developers, with comprehensive documentation available. By breaking down the user interface into components and managing states, React and Next.js revolutionize application design and development.

    • The Ultimate Next.js Ebook