Full Stack React with Next.js 13 NextAuth & Serverless API

Focused View

Ryan Dhungel

6:20:29

49 View

1. Getting Started with NextJS 3

1.1 NextJs 13 NextAuth Serverless API.pdf

1. Download PDF Booklet - Next.js 13, NextAuth & Serverless API.html

2.1 nextblog.zip

2. Download Source Code.html

3. Project Setup.mp4

05:56

4. Using Bootstrap Material CSS.mp4

01:51

5. Navigation Component.mp4

03:53

2. Next.js API and MongoDB

1. Next.js API Route.mp4

02:37

2. Mongo Atlas Connection String.mp4

05:07

3. Managing ENV Variables.mp4

03:14

4. Connect to MongoDB.mp4

03:01

3. User Login and Registration

1. User Model.mp4

03:21

2. Register API.mp4

10:22

3. Register Page.mp4

11:30

4. Post Request Using Fetch.mp4

13:03

5. Login Page.mp4

04:51

4. Authentication with NextAuth

1. Authentication Using NextAuth.mp4

10:03

2. Provide User Session.mp4

04:15

3. Access Logged In User Status.mp4

05:35

5. Protecting Pages

1. User Dashboard.mp4

02:12

2. Protecting Pages.mp4

02:47

3. Redirect Back to Intended Page.mp4

03:06

6. Login with Google

1. Login with Google.mp4

08:38

2. Save Social Login User in Database.mp4

08:30

7. Role Based Access

1. Adding User Role to Token and Session.mp4

08:07

2. Display User Role.mp4

03:42

3. Admin Layout.mp4

04:02

4. Role Based Page Protection for Admin.mp4

08:19

8. Creating Blogs with Rich Text Editor and Image Upload

1. Blog Model.mp4

05:48

2. Signup to Cloudinary.mp4

04:51

3. React Quill Rich Text Editor.mp4

08:18

4. Blog Create Form with Rich Text Editor.mp4

10:17

5. Upload Image to Cloudinary.mp4

09:52

6. Blog Create Post Request.mp4

04:25

7. Blog Create API.mp4

14:12

8. Saving Blog.mp4

05:29

9. Blogs with Pagination

1. Paginated Blogs List.mp4

11:08

2. Search Params in Next.js App Router.mp4

06:30

3. Fetch Blogs on Home Page.mp4

05:14

4. Pagination Links.mp4

08:21

5. Pagination Previous and Next Links.mp4

03:19

10. Displaying Blogs

1. Blog List and Blog Card Component.mp4

06:13

2. Display Blog Image.mp4

06:43

3. Display Blog Meta Content.mp4

10:38

4. Single Blog API.mp4

04:58

5. Fetch Single Blog Using Route Params.mp4

04:57

6. Single Blog View.mp4

03:13

7. Loading Page (Default).mp4

01:58

11. Blogs Like and Unlike

1. Blog Like Unlike.mp4

08:00

2. Like Unlike Component.mp4

05:19

3. Blog Like Unlike API Request.mp4

11:33

4. User Liked Blogs API.mp4

05:21

5. User Liked Blogs List.mp4

05:11

12. Blogs Update and Delete by Admin

1. Blogs List for Admin.mp4

05:52

2. Admin Blog Update and Delete API.mp4

06:11

3. Blog Update by Admin.mp4

09:52

4. Delete Blog by Admin.mp4

03:23

13. Blogs Search with React Context

1. Search Context.mp4

07:17

2. Search Provider.mp4

01:23

3. Search Form.mp4

06:13

4. Search API.mp4

06:59

5. Search Page.mp4

09:27

14. Deployment

1. Adding Cors.mp4

01:49

2. Deploy to Vercel.mp4

12:13

Description

[With PDF Booklet] Learn to Build Next Generation Full Stack React Web Apps with Next.js 13, NextAuth and Serverless API

What You'll Learn?

Master NextJs 13: Acquire a deep understanding of NextJs 13 and its revolutionary features, including server-side rendering and dynamic routing.
Implement Secure Authentication: Learn to integrate NextAuth and create a seamless, secure, and multi-provider authentication system for web applications.
Build Powerful Serverless APIs: Harness the power of Serverless architecture to create scalable and cost-effective APIs that enhance web app performance.
Develop Dynamic Blog Features: Discover how to create and manage blogs with features like pagination, search functionality, and interactive elements.

Who is this for?

Intermediate Web Developers: If you already have experience with HTML, CSS, JavaScript, and React basics, this course will take your skills to new heights. Learn advanced techniques and implement secure authentication and backend systems with ease.

React Enthusiasts: If you have a solid grasp of React fundamentals and want to explore the NextJs ecosystem, this course offers an exciting opportunity. Discover the power of server-side rendering and dynamic routing with NextJs 13.

Backend Developers Exploring Frontend: If you come from a backend development background and want to venture into frontend technologies, this course provides a smooth transition. Learn to build powerful web apps with React and NextJs.

Web Development Career Seekers: If you're aspiring to launch a career in web development, this course is a stepping stone to acquiring the latest skills demanded by the industry. Enhance your portfolio with real-world projects and cutting-edge technologies.

Passionate Learners: If you're enthusiastic about web development and have a strong drive to learn, regardless of your current expertise level, you are welcome! We offer comprehensive explanations and hands-on practice to support your learning journey.

What You Need to Know?

Solid foundation in web development fundamentals, including proficiency in HTML, CSS, JavaScript and React

Prior experience in building web applications and understanding the client-server architecture will also be beneficial.

More details

Description
Learn to build Modern React Apps with NextJs 13 App Directory, NextAuth & NextAPI Routes (includes Downloadable PDF booklet)
Are you ready to take your full-stack React development skills to the next level with the latest cutting-edge tools and best practices? Welcome to "Full Stack React with Next.js 13, NextAuth & Serverless API" â€“ the ultimate course designed to empower you with the knowledge and expertise required to build next-generation web applications with unrivaled efficiency and performance.
Getting Started with Next.js
Lay the foundation for your Next.js journey as we introduce you to the world of Next.js 3. Learn the core concepts, set up your development environment, and get ready to build powerful web apps.
Next.js API and MongoDB
Dive into the backend magic of Next.js as we explore the integration of Next.js API with MongoDB. Discover how to handle data, perform CRUD operations, and create a robust backend for your applications.
User Login and Registration
Security is vital for any app! Explore user authentication and registration mechanisms and implement them effectively to create a seamless login experience for your users.
Authentication with NextAuth
Take your app security to the next level with NextAuth! Learn to integrate NextAuth 15 into your project and enable secure, multi-provider authentication options for your users.
Protecting Pages
Safeguard your app's sensitive pages with user authentication. We'll show you how to protect specific pages, ensuring only authorized users can access them.
Login with Google
Unleash the power of Google authentication and enable users to log in with their Google accounts. Learn how to integrate Google login seamlessly into your Next.js app.
Role Based Access
Tailor user access permissions with role-based authentication. Understand how to grant different levels of access based on user roles, creating a personalized and secure experience.
Creating Blogs
Step into the world of content creation by implementing a blog feature in your app. Learn how to add, edit, and manage blogs effortlessly.
Blogs with Pagination
Improve the user experience by implementing pagination for your blogs. Make it easy for users to navigate through your blog posts with smooth and efficient pagination.
Displaying Blogs
Make your blogs shine with stunning display options. Master the art of showcasing your blogs beautifully to captivate your audience.
Blogs Like and Unlike
Engage your users with interactive blog features. Implement like and unlike functionality for blogs and add a touch of interactivity to your app.
Blogs Update and Delete by Admin
Empower admins to manage the content with ease. Learn how to enable blog update and deletion functionalities for admin users.
Blogs Search with React Context
Enhance user convenience with blog search functionality. Discover how to implement a powerful blog search feature using React Context.
Deployment
Learn the deployment process and make your Next.js app accessible to the world. Deploy full stack Next.js app to vercel along with API routes.
In this dynamic and comprehensive learning journey, we will dive headfirst into Next.js 13, the revolutionary framework that supercharges your React applications with blazing-fast server-side rendering, optimal performance, and seamless dynamic routing. You'll be equipped with the tools and techniques to create web apps that score almost 100 out of 100 in Google Page Speed testing tool, ensuring a superlative user experience that keeps visitors engaged and delighted.
But that's not all â€“ we'll take your apps to the next level with NextAuth, empowering you to implement secure and frictionless user authentication. No more sluggish login processes or worries about data breaches; you'll learn how to create a streamlined and trustworthy experience for your users.
Get ready to embrace the future of backend architecture with Serverless APIs. By harnessing the power of Serverless technology, you'll build web apps that scale effortlessly, optimize resource utilization, and keep operational costs in check. Your apps will soar to new heights, delivering unrivaled performance to users worldwide.
Say goodbye to the outdated "pages" directory and embrace the new "app" directory, the recommended and forward-looking approach to organizing your code in Next.js projects. Experience enhanced code organization, greater maintainability, and more productive development workflows.
To top it all off, I'll guide you through seamless deployment using Vercel, the ultimate platform for hosting and deploying Next.js applications. Witness the magic of one-click deployment, enabling you to take your creations live with ease.
Throughout this transformative journey, our team of expert instructors will be your trusted mentors, providing personalized guidance and sharing practical insights to ensure your success.
By the end of this course, you will be equipped with the knowledge and skills to craft lightning-fast, cutting-edge web applications using Next.js 13, NextAuth, Serverless API, and the new "app" directory. Whether you're a seasoned developer seeking to elevate your expertise or a budding enthusiast aiming to make your mark, this course is your gateway to building web apps that shine in the digital realm.
Don't miss out on this opportunity to excel in full-stack React development! Enroll now and embark on an exhilarating adventure towards a future filled with high-performance web applications and endless possibilities.
Who this course is for:
Intermediate Web Developers: If you already have experience with HTML, CSS, JavaScript, and React basics, this course will take your skills to new heights. Learn advanced techniques and implement secure authentication and backend systems with ease.
React Enthusiasts: If you have a solid grasp of React fundamentals and want to explore the NextJs ecosystem, this course offers an exciting opportunity. Discover the power of server-side rendering and dynamic routing with NextJs 13.
Backend Developers Exploring Frontend: If you come from a backend development background and want to venture into frontend technologies, this course provides a smooth transition. Learn to build powerful web apps with React and NextJs.
Web Development Career Seekers: If you're aspiring to launch a career in web development, this course is a stepping stone to acquiring the latest skills demanded by the industry. Enhance your portfolio with real-world projects and cutting-edge technologies.
Passionate Learners: If you're enthusiastic about web development and have a strong drive to learn, regardless of your current expertise level, you are welcome! We offer comprehensive explanations and hands-on practice to support your learning journey.

User Reviews

Rating

average 0

Total votes0

Focused display

React

Next JS

Ryan Dhungel

Instructor's Courses

Ryan Dhungel is a Web Developer from Sydney, Australia. He builds Web apps using JavaScript, Node JS, React JS, Vue JS, Laravel and other emerging platforms.He also wants to make the entire Web Development process enjoyable and productive at the same time by producing well explained practical Tutorials and Training packages for fellow developers.

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.