Next Js 13 Bootcamp - From Scratch To Full-Stack App 2023

Learn Next JS 13 (Latest Version) from scratch and build 2 Projects by the end of this course.

What you'll learn

Next JS vs React JS

Server Side Rendering vs Client Side Rendering

Development of Full-stack apps using Next JS

Next JS Server Components and Client Components

Understand Next JS API's

Next JS 13 App Router Features like pages , api , middleware , layout , loading etc.

Understanding how cache works in Next JS server components

Building a Task Manager application at the end of this course

Requirements

Must have good knowledge on how React Framework works behind the scenes

Basic knowledge about API's , Endpoints , Request , Response is required to understand the Next JS

Strong knowledge on HTML , CSS , Javascript

A computer / laptop of atleast 4GB Ram with good internet connection

Description

Hello! Welcome to the Next.js 13 Bootcamp - where we'll take you from scratch to building a full-stack app. As you may be aware, Next.js has emerged as one of the most popular web development frameworks in 2023. So, if you come from a web background, learning Next.js would undoubtedly be a beneficial choice for you.We will be exploring the following topics in this course.What is Next.js? How is it different from React.js? What are the advantages of Next.js over React.js?Creating a Next.js app and understanding the folder structure.Common mistakes when working with Next.js.Comparing the folder structure and execution process of React.js and Next.js.Next.js routing, including nested routing and passing parameters and query strings.Working with layouts in Next.js.Error handling in Next.js.Middleware in Next.js.In-depth discussion about the Next.js folder structure.Modifying the default folder structure of Next.js based on project requirements.Creating backed with Next JS apisImplementing JWT Authentication and AuthorizationProtected Routes and Middlewares to handle JWT TokensFinal Project (Task Manager)Next.js is a popular JavaScript framework for building server-side-rendered React applications. Next.js v13 was released by Vercel at the Next.js conference in October 2022, bringing many new features and improvements. Understanding the complexities of this latest version is essential for developers to utilize its capabilities and build efficient and scalable applications effectively. This article will cover various aspects of the new version, including its unique features, changes from previous versions, and tips for overcoming any challenges that might arise while working with it.PrerequisitesMust have good knowledge on how React Framework works behind the scenesBasic knowledge about API's , Endpoints , Request , Response is required to understand the Next JSStrong knowledge on HTML , CSS , JavascriptA computer / laptop of atleast 4GB Ram with good internet connection

Overview

Section 1: Introduction

Lecture 1 What is Next JS

Section 2: First Project

Lecture 2 Creating Next App

Lecture 3 Understanding Folder Structure

Lecture 4 Do's and Dont's

Section 3: Creating Pages

Lecture 5 Creating Static Pages

Lecture 6 Navigation between pages

Lecture 7 Creating dynamic pages

Lecture 8 Creating nested pages

Lecture 9 Reading Query Strings from URL

Section 4: App Router Advanced Featutes

Lecture 10 Default Layout

Lecture 11 Custom Layout

Lecture 12 Not Found / Error Pages

Lecture 13 Middlewares

Section 5: Server Components vs Client Components

Lecture 14 Next JS Server and Client Components

Lecture 15 Rendering in Client Components

Lecture 16 Rendering in Server Components

Lecture 17 Interactions in Client and Server Components

Lecture 18 Using Client Components in Server Components

Lecture 19 Accessing Browser Resources in Client and Server Components

Lecture 20 When to Use Server and Client Components

Section 6: Next JS Route Handlers (API's)

Lecture 21 API's Intro , Handling Get and Post Methods

Lecture 22 Accessing Query Strings

Lecture 23 Accessing Request Body

Lecture 24 Put and Delete Methods

Section 7: Next JS with Mongo DB and POSTMAN Client

Lecture 25 Connecting to Mongo DB

Lecture 26 Creating Models

Lecture 27 Add Operation

Lecture 28 Get Operation

Lecture 29 Put Operation

Lecture 30 Delete Operation

Section 8: Integrating Next API's and Pages

Lecture 31 Getting Data from API

Lecture 32 Handling Cache Issues

Section 9: Next JS with Redux Toolkit (State Management)

Lecture 33 Creating Reducers , Slice , Store

Lecture 34 Accessing and Manipulating Redux Data

Section 10: Final Project - Task Manager

Lecture 35 Project Intro and Setup

Lecture 36 Register Page

Lecture 37 Login Page

Section 11: Task Manager - Build User Auth API's

Lecture 38 User Model

Lecture 39 Mongo Connection & Register API

Lecture 40 Integrate Register API with UI

Lecture 41 Login API

Lecture 42 Integrating with Login API with UI

Section 12: Task Manager - Protecting Pages and APIs

Lecture 43 Using Middleware

Lecture 44 Protected Pages

Lecture 45 Protected API's

Lecture 46 Getting API data in Server Component

Lecture 47 Getting API data in Client Component

Section 13: Task Manager - Layout

Lecture 48 Build Layout

Lecture 49 Using Redux to Store Global Data

Lecture 50 Showing Loaders

Lecture 51 Logout Functionality

Section 14: Task Manager - Tasks CRUD

Lecture 52 Creating Required Pages

Lecture 53 Add Task

Lecture 54 Task Model and API

Lecture 55 Show Tasks

Lecture 56 Edit Task - 1

Lecture 57 Edit Task - 2

Lecture 58 Delete Task

Section 15: Task Manager - Dashboard and Filters

Lecture 59 Dashboard API

Lecture 60 Dashboard UI

Lecture 61 Tasks Filters

Lecture 62 Clear Filters

Section 16: Responsiveness and Deployment

Lecture 63 Making the Project Responsive

Lecture 64 Deployment To Vercel

Next JS Developers,Fullstack Developers,Front end developers,Students who want to build full-stack apps with single framework