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

Environment Setup

Loading...

Environment Setup

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

    Intro to the course

    Before diving into the exciting world of JavaScript, let’s set up your development environment for a seamless learning and development experience.

    1. Choose a Browser

    Since JavaScript runs in the browser, you’ll need one to test your code. If you already have a browser like Chrome, Firefox, or Edge, you’re good to go. However, if you’re looking for something fresh, I recommend trying Arc. Arc is an innovative browser with:

    • A collapsible sidebar for better focus.
    • Customizable spaces to organize work.
    • Full-screen views without the traditional top bar.

    That said, any browser will work perfectly fine for this course, so use the one you’re most comfortable with.

    All browsers offer amazing include developer tools allowing you to do range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load.

    You can open dev tools in any browser by right-clicking the site and clicking inspect. You can also use the shortcut: + + (on Mac) or on your keyboard.

    2. Install Node.js

    Although this course doesn’t cover backend development, having Node.js installed is a great idea. It allows you to run JavaScript outside the browser, and it’s a must-have if you plan to explore tools like package managers or frameworks in the future.

    • Head to Node.js and download the latest LTS (Long-Term Support) version.

    • Installation is straightforward and varies slightly based on your operating system.

    3. Install Git

    While it's not mandatory to have Git installed for this course, it's absolutely essential for your growth as a developer. It's non-negotiable.

    You can download Git from it's website.

    And if you haven’t used it before, I’ll link our complete Git and GitHub Course so you can learn how to use them quickly and effectively.

    4. Choose a Code Editor

    Your is where you’ll spend most of your time writing JavaScript.

    Here are two popular options:

    • Visual Studio Code (VS Code): Lightweight, highly customizable, andpacked with features. It’s the editor I’ll use throughout this course.

    Feel free to explore themes to personalize your editor’s appearance. I personally use the Catppuccin Mocha theme for a dark and sleek look.

    5. Keep It Simple

    You don’t need to install every tool or extension right now. Start with the basics and add as you go. The goal is to have an environment that feels intuitive and supports your learning.

    With your environment ready, you’re all set to dive into this course!

    WebStorm: A powerful IDE with features like intelligent code assistance and free access for non-commercial use.

    Arc Browser
    faviconhttps://arc.net/download
    thumbnail