Next.js 13 Bootcamp – From Scratch to Full-stack App 2023

Next.js 13 Bootcamp – From Scratch to Full-stack App 2023, available at $74.99, has an average rating of 4.3, with 64 lectures, based on 24 reviews, and has 149 subscribers.

You will learn about 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 This course is ideal for individuals who are Next JS Developers or Fullstack Developers or Front end developers or Students who want to build full-stack apps with single framework It is particularly useful for Next JS Developers or Fullstack Developers or Front end developers or Students who want to build full-stack apps with single framework.

Enroll now: Next.js 13 Bootcamp – From Scratch to Full-stack App 2023

Summary

Title: Next.js 13 Bootcamp – From Scratch to Full-stack App 2023

Price: $74.99

Average Rating: 4.3

Number of Lectures: 64

Number of Published Lectures: 64

Number of Curriculum Items: 64

Number of Published Curriculum Objects: 64

Original Price: $19.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

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

Target Audiences

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

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.

These course will be having the duration of total 10 Hours . In that we will use 50% of the time to cover all the topics in Next JS and then remaining 50% of the time we will build a full stack task manager project by implementing all the concepts which we cover in first 5 Hours.

Topics we will cover in first 5 Hours

What is Next.js? How is it different from React.js? What are the advantages of Next.js over React.js?
Folder Structure of New Next JS App
Understanding next js static and dynamic pages
App Router Features like Layout , Middleware , Errors
Next JS Sever Components and Client Components
Rendering , Data Fetching , Performing interactions in both client and server components
Next JS API’s
Difference between Next JS API’s and Third party server API’s
Next JS with Mongo DB
Connecting to Mongo DB and Performing all CRUD operations
Working with POSTMAN and Mongo DB
Implementing Redux Toolkit to manage global state

Project – Task Manager

Login and Register Pages using Tailwind CSS
Authentication API’s with JWT Tokens for authorization.
Protecting Routes and API’s from unauthorized users.
Tasks CRUD operation with Mongo DB and Next JS APIS
Dashboard with Tasks Reports
Filters using Server Side Rendering
Deployment to Vercel

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.

Prerequisites

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

Course Curriculum

Chapter 1: Introduction

Lecture 1: What is Next JS

Chapter 2: First Project

Lecture 1: Creating Next App

Lecture 2: Understanding Folder Structure

Lecture 3: Do's and Dont's

Chapter 3: Creating Pages

Lecture 1: Creating Static Pages

Lecture 2: Navigation between pages

Lecture 3: Creating dynamic pages

Lecture 4: Creating nested pages

Lecture 5: Reading Query Strings from URL

Chapter 4: App Router Advanced Featutes

Lecture 1: Default Layout

Lecture 2: Custom Layout

Lecture 3: Not Found / Error Pages

Lecture 4: Middlewares

Chapter 5: Server Components vs Client Components

Lecture 1: Next JS Server and Client Components

Lecture 2: Rendering in Client Components

Lecture 3: Rendering in Server Components

Lecture 4: Interactions in Client and Server Components

Lecture 5: Using Client Components in Server Components

Lecture 6: Accessing Browser Resources in Client and Server Components

Lecture 7: When to Use Server and Client Components

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

Lecture 1: API's Intro , Handling Get and Post Methods

Lecture 2: Accessing Query Strings

Lecture 3: Accessing Request Body

Lecture 4: Put and Delete Methods

Chapter 7: Next JS with Mongo DB and POSTMAN Client

Lecture 1: Connecting to Mongo DB

Lecture 2: Creating Models

Lecture 3: Add Operation

Lecture 4: Get Operation

Lecture 5: Put Operation

Lecture 6: Delete Operation

Chapter 8: Integrating Next API's and Pages

Lecture 1: Getting Data from API

Lecture 2: Handling Cache Issues

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

Lecture 1: Creating Reducers , Slice , Store

Lecture 2: Accessing and Manipulating Redux Data

Chapter 10: Final Project – Task Manager

Lecture 1: Project Intro and Setup

Lecture 2: Register Page

Lecture 3: Login Page

Chapter 11: Task Manager – Build User Auth API's

Lecture 1: User Model

Lecture 2: Mongo Connection & Register API

Lecture 3: Integrate Register API with UI

Lecture 4: Login API

Lecture 5: Integrating with Login API with UI

Chapter 12: Task Manager – Protecting Pages and APIs

Lecture 1: Using Middleware

Lecture 2: Protected Pages

Lecture 3: Protected API's

Lecture 4: Getting API data in Server Component

Lecture 5: Getting API data in Client Component

Chapter 13: Task Manager – Layout

Lecture 1: Build Layout

Lecture 2: Using Redux to Store Global Data

Lecture 3: Showing Loaders

Lecture 4: Logout Functionality

Chapter 14: Task Manager – Tasks CRUD

Lecture 1: Creating Required Pages

Lecture 2: Add Task

Lecture 3: Task Model and API

Lecture 4: Show Tasks

Lecture 5: Edit Task – 1

Lecture 6: Edit Task – 2

Lecture 7: Delete Task

Chapter 15: Task Manager – Dashboard and Filters

Lecture 1: Dashboard API

Lecture 2: Dashboard UI

Lecture 3: Tasks Filters

Lecture 4: Clear Filters

Chapter 16: Responsiveness and Deployment

Lecture 1: Making the Project Responsive

Lecture 2: Deployment To Vercel

Instructors

K.Sathyaprakash Reddy
Full Stack Developer

Rating Distribution

1 stars: 0 votes
2 stars: 2 votes
3 stars: 1 votes
4 stars: 8 votes
5 stars: 13 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu