Next JS 13 Bootcamp - From Scratch to Full-stack App 2023

Focused View

K.Sathyaprakash Reddy

9:49:53

79 View

1. Introduction

1. What is Next JS.mp4

02:41

2. First Project

1. Creating Next App.mp4

11:42

2. Understanding Folder Structure.mp4

13:42

3. Dos and Donts.mp4

06:38

3. Creating Pages

1. Creating Static Pages.mp4

09:28

2. Navigation between pages.mp4

07:02

3. Creating dynamic pages.mp4

13:23

4. Creating nested pages.mp4

05:09

5. Reading Query Strings from URL.mp4

07:09

4. App Router Advanced Featutes

1. Default Layout.mp4

16:54

2. Custom Layout.mp4

09:17

3. Not Found Error Pages.mp4

02:35

4. Middlewares.mp4

09:20

5. Server Components vs Client Components

1. Next JS Server and Client Components.mp4

03:01

2. Rendering in Client Components.mp4

09:07

3. Rendering in Server Components.mp4

07:38

4. Interactions in Client and Server Components.mp4

05:04

5. Using Client Components in Server Components.mp4

03:33

6. Accessing Browser Resources in Client and Server Components.mp4

11:42

7. When to Use Server and Client Components.mp4

05:51

6. Next JS Route Handlers (APIs)

1. APIs Intro , Handling Get and Post Methods.mp4

12:03

2. Accessing Query Strings.mp4

07:18

3. Accessing Request Body.mp4

06:48

4. Put and Delete Methods.mp4

11:00

7. Next JS with Mongo DB and POSTMAN Client

1. Connecting to Mongo DB.mp4

13:29

2. Creating Models.mp4

02:15

3. Add Operation.mp4

07:21

4. Get Operation.mp4

04:24

5. Put Operation.mp4

04:35

6. Delete Operation.mp4

04:16

8. Integrating Next APIs and Pages

1. Getting Data from API.mp4

04:06

2. Handling Cache Issues.mp4

10:14

9. Next JS with Redux Toolkit (State Management)

1. Creating Reducers , Slice , Store.mp4

10:32

2. Accessing and Manipulating Redux Data.mp4

13:23

10. Final Project - Task Manager

1. Project Intro and Setup.mp4

11:26

2. Register Page.mp4

11:43

3. Login Page.mp4

08:45

11. Task Manager - Build User Auth APIs

1. User Model.mp4

05:30

2. Mongo Connection & Register API.mp4

13:18

3. Integrate Register API with UI.mp4

13:22

4. Login API.mp4

09:52

5. Integrating with Login API with UI.mp4

07:56

12. Task Manager - Protecting Pages and APIs

1. Using Middleware.mp4

08:32

2. Protected Pages.mp4

06:50

3. Protected APIs.mp4

10:16

4. Getting API data in Server Component.mp4

08:05

5. Getting API data in Client Component.mp4

06:47

13. Task Manager - Layout

1. Build Layout.mp4

12:35

2. Using Redux to Store Global Data.mp4

15:49

3. Showing Loaders.mp4

08:31

4. Logout Functionality.mp4

06:30

14. Task Manager - Tasks CRUD

1. Creating Required Pages.mp4

08:38

2. Add Task.mp4

21:08

3. Task Model and API.mp4

09:27

4. Show Tasks.mp4

22:02

5. Edit Task - 1.mp4

16:13

6. Edit Task - 2.mp4

02:41

7. Delete Task.mp4

08:07

15. Task Manager - Dashboard and Filters

1. Dashboard API.mp4

11:57

2. Dashboard UI.mp4

16:42

3. Tasks Filters.mp4

04:35

4. Clear Filters.mp4

11:17

16. Responsiveness and Deployment

1. Making the Project Responsive.mp4

10:49

2. Deployment To Vercel.mp4

07:50

Description

Learn Next JS 13 From Scratch , Build a Full-stack Task Manager App with Next JS , Typescript , Tailwind CSS .

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

Who is this for?

Next JS Developers

Fullstack Developers

Front end developers

Students who want to build full-stack apps with single framework

What You Need to Know?

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

More details

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.

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
Who this course is for:
Next JS Developers
Fullstack Developers
Front end developers
Students who want to build full-stack apps with single framework

User Reviews

Rating

average 0

Total votes0

Focused display

Hi,I am Satyaprakash Reddy, I am a freelance developer in India.I've 5 years of experience in developing applications in Android and Web Development.I've been teaching coding lectures from the past three years in an Institute. So now I wanted to share my knowledge across the globe through Udemy.I spend most of my time researching how to make learning to code fun and make hard concepts easy to understand. I apply everything I discover into my Bootcamp courses. In my courses, you'll find lots of geeky humor but also lots of explanations and animations to make sure everything is easy to understand.Thank U.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.