← back to coursesProfessional NextJS

Welcome to Professional NextJS

NextJS allows you to take React to the next level and build full-stack applications with ease. We should know, we built BooleanArt with NextJS. This course will take you from zero to hero 💫

# nextjs
# react
# typescript
# javascript

Why NextJS

There are lots of approaches you can take to building your React.js applications. But if you want to use the latest and greatest features that React has to offer and build something truly custom, Next.js is the way to go. In fact is officially recommended by the ReactJS Core Team ⚛️

Learning Objectives

  • Get setup with NextJS
  • What makes NextJS different?
  • Working with NextJS file based App Router
  • Deploy your application to production
  • Learn core ideas behind NextJS
  • Clarify Concepts like CSR/SSR/ISR etc.
  • Effectively utilize the various features of NextJS to simplify your codebase
  • Using Dynamic Routes
  • Graceful Error Handling
  • SEO optimizations like Metadata
  • NextJS Image Optimization
  • React Server Component (RSCs)
  • Server Actions
  • ... much more!

Prerequisites

You should be familiar with React. If you are new to the ecosystem, don't worry, we have an excellent course that sets the perfect foundations for your journey into NextJS.

react

Why This Course

I've been working with React for a long time. Lead multiple teams and multiple React and NextJS Projects to successful completion. Helped a lot of people on StackOverflow.

And BooleanArt itself is built with NextJS. This means you get real world experience with this exciting technology to create whatever you imagine.

Unlike nextjs courses on other platforms that slow you down covering basics of javascript typescript or react, we have those things already covered in separate courses. So an added benefit of this course on nextjs is that we can hit the ground running and focus on nextjs and its advanced features without slowing you down. This is a great bonus for busy developers that have a project deadline. This course will get you up to speed and then move out of your way.

🚨 Subscribe for Updates 🚧

This course is currently in progress.
 Subscribe to get notified about updates.

No spam, unsubscribe at any time.

LESSONS

🚨 Work In Progress 🚧
Course Intro

Course Intro

(⏱️ 2:05)

Get Setup

Get Setup

(⏱️ 2:05)

Project Template

Project Template

(⏱️ 5:45)

Introducing FullStack React

Introducing FullStack React

(⏱️ 4:57)

App Router Reference

App Router Reference

(⏱️ 7:08)

NextJS Server vs. "use client" Rendering

NextJS Server vs. "use client" Rendering

(⏱️ 5:01)

Nesting Server and Client Components

Nesting Server and Client Components

(⏱️ 8:51)

Client Only Components

Client Only Components

(⏱️ 3:48)

Global CSS in NextJS

Global CSS in NextJS

(⏱️ 6:30)

CSS Modules and SASS

CSS Modules and SASS

(⏱️ 4:15)

Tailwind CSS

Tailwind CSS

(⏱️ 5:17)

NextJS Custom Fonts

NextJS Custom Fonts

(⏱️ 4:08)

Static vs Dynamic Rendering

Static vs Dynamic Rendering

(⏱️ 4:55)

NextJS Link Component

NextJS Link Component

(⏱️ 3:20)

NextJS Link Prefetching

NextJS Link Prefetching

(⏱️ 5:49)

Navigation Scroll with Link

Navigation Scroll with Link

(⏱️ 2:02)

Replace Navigation History

Replace Navigation History

(⏱️ 1:35)

NextJS Image Component

NextJS Image Component

(⏱️ 7:01)

Dynamic Image URLs

Dynamic Image URLs

(⏱️ 5:34)

Safe Colocation with Private Folders

Safe Colocation with Private Folders

(⏱️ 2:12)

NextJS Route Groups

NextJS Route Groups

(⏱️ 3:07)

Dynamic Routes

Dynamic Routes

(⏱️ 5:37)

NextJS API Routes

NextJS API Routes

(⏱️ 6:03)

NextRequest and NextResponse

NextRequest and NextResponse

(⏱️ 2:41)

Cookies in API Handlers

Cookies in API Handlers

(⏱️ 4:25)

React Suspense Simplified

React Suspense Simplified

(⏱️ 2:23)

Power of Suspense Boundaries

Power of Suspense Boundaries

(⏱️ 3:52)

use Promises

use Promises

(⏱️ 3:24)

Stream Promise Results from Server to Client

Stream Promise Results from Server to Client

(⏱️ 3:03)

use Requires a Cached Promise

use Requires a Cached Promise

(⏱️ 2:30)

Suspense Error Boundaries

Suspense Error Boundaries

(⏱️ 4:42)

React Server Functions

React Server Functions

(⏱️ 4:50)

Server Actions for Powerful Forms

Server Actions for Powerful Forms

(⏱️ 5:35)

useActionState to Simplify Form Actions

useActionState to Simplify Form Actions

(⏱️ 6:38)

React Serializable Types

React Serializable Types

(⏱️ 2:42)

Create Dynamic Images with NextJS ImageResponse

Create Dynamic Images with NextJS ImageResponse

(⏱️ 5:54)

Deploy NextJS Application to Production

Deploy NextJS Application to Production

(⏱️ 3:51)

NextJS Environment Variables Masterclass

NextJS Environment Variables Masterclass

(⏱️ 3:50)

Deploying and Managing Environment Variables

Deploying and Managing Environment Variables

(⏱️ 4:38)

Using Databases for Dynamic Server Side State

Using Databases for Dynamic Server Side State

(⏱️ 7:34)

Mastering NextJS Layout Files

Mastering NextJS Layout Files

(⏱️ 4:54)

Client State Management with NextJS

Client State Management with NextJS

(⏱️ 3:48)

Client State Management In Action

Client State Management In Action

(⏱️ 8:04)

Using Client State Management Libraries

Using Client State Management Libraries

(⏱️ 5:25)

Detecting Server vs Client Runtime and useEffect

Detecting Server vs Client Runtime and useEffect

(⏱️ 4:33)