The complete guide to building a full-stack app with Next.js

The complete guide to building a full-stack app with Next.js, available at $54.99, has an average rating of 4.73, with 192 lectures, based on 117 reviews, and has 1255 subscribers.

You will learn about Set up and configure authentication in a NextJS app using NextAuth v5 Use Prisma ORM in a NextJS app to query and update a database Use NextUI components to build a good looking User Interface Use TailwindCSS to style elements in a NextJS application Fetching data with NextJS server actions and the app router Learn to build a real-world complete full-stack application using NextJS! This course is ideal for individuals who are Beginner developers who wish to learn how to buld an app using NextJS It is particularly useful for Beginner developers who wish to learn how to buld an app using NextJS.

Enroll now: The complete guide to building a full-stack app with Next.js

Summary

Title: The complete guide to building a full-stack app with Next.js

Price: $54.99

Average Rating: 4.73

Number of Lectures: 192

Number of Published Lectures: 192

Number of Curriculum Items: 192

Number of Published Curriculum Objects: 192

Original Price: $199.99

Quality Status: approved

Status: Live

What You Will Learn

Set up and configure authentication in a NextJS app using NextAuth v5

Use Prisma ORM in a NextJS app to query and update a database

Use NextUI components to build a good looking User Interface

Use TailwindCSS to style elements in a NextJS application

Fetching data with NextJS server actions and the app router

Learn to build a real-world complete full-stack application using NextJS!

Who Should Attend

Beginner developers who wish to learn how to buld an app using NextJS

Target Audiences

Beginner developers who wish to learn how to buld an app using NextJS

Dive into the world of full-stack development with this comprehensive course designed with beginners in mind.   This course covers everything from the fundamentals of Next.js to deploying a full-scale application.  Whether you are new to programming or looking to expand your existing skills, this course will guide you through every step of building a robust, database driven application.

Here are some of the things that are covered in this course

Creating a Next.js app

Querying a database using Prisma ORM

Securely authenticating users using NextAuth (v5)

Creating a Messaging/Chat feature

Realtime communication using Pusher.

Email verification / Forgot password functionality

Designing the User interface using NextUI

Styling components with TailwindCSS

Utilising server actions to fetch and update the data in Next.js

Image uploading

Publishing the app to the internet with Vercel

Key features of this course

Comprehensive curriculum:  27 hours of high quality video tutorials, challenges and practical content.

Project based learning:  Build a major project to showcase your new skills

Pre-Requisites

Basic knowledge of JavaScript, HTML and CSS is recommended.

Tools you need for this course

In this course all the lessons are demonstrated using Visual Studio Code, a free (and fantastic) cross platform code editor.   You can of course use any code editor you like and any Operating system you like as long as it’s Windows, Linux or Mac. 

Is this course for you?

This course is very practical, about 90%+ of the lessons will involve you coding along with me on this project.  If you are the type of person who gets the most out of learning by doing, then this course is definitely for you.  

On this course we will build an example Dating Application.  All you will need to get started is a computer with your favourite operating system, and a passion for learning how to build a full featured full-stack app based on Next.js. 

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction to the course

Lecture 2: Setting up the developer environment

Lecture 3: Course assets and source code

Lecture 4: Getting help

Lecture 5: Where to start – 2 Options

Chapter 2: NextJS Introduction and basics

Lecture 1: Introduction to Section 2

Lecture 2: Creating the NextJS project

Lecture 3: What is in the project

Lecture 4: Installing NextUI and React icons

Lecture 5: Routing in NextJS

Lecture 6: Adding a Nav bar to the app

Lecture 7: Creating additional routes

Lecture 8: Making the links active

Lecture 9: Saving our code into source control

Lecture 10: Summary of Section 2

Chapter 3: Authentication Part One

Lecture 1: Introduction to Section 3

Lecture 2: Creating a login form

Lecture 3: React hook form introduction

Lecture 4: Validation with Zod

Lecture 5: Creating the register form

Lecture 6: What is NextAuth?

Lecture 7: What is Prisma?

Lecture 8: Setting up NextAuth and Prisma ORM

Lecture 9: Creating the Database

Lecture 10: Configuring Prisma in our app

Lecture 11: Registering a new user

Lecture 12: Handling errors in the form

Lecture 13: Handling errors in the form Part 2

Lecture 14: Signing in users

Lecture 15: Signing in users Part 2

Lecture 16: Adding notification toasts to the app

Lecture 17: Getting the session data

Lecture 18: Using NextAuth callbacks

Lecture 19: Adding a dropdown menu to the Nav bar

Lecture 20: Adding a dropdown menu to the Nav bar Part 2

Lecture 21: Protecting routes using Middleware

Lecture 22: Optional: Using Docker for Postgres

Lecture 23: Summary of Section 3

Chapter 4: Building the UI

Lecture 1: Introduction to Section 4

Lecture 2: Updating the Prisma schema

Lecture 3: Seeding data into the Database

Lecture 4: Fetching data from the Database using server actions

Lecture 5: Creating cards for the members

Lecture 6: Styling the member cards

Lecture 7: Using dynamic routes in NextJS

Lecture 8: Adding a Sidebar for the Member detailed page

Lecture 9: Using NextJS Layout pages

Lecture 10: Creating the Member detailed content

Lecture 11: Adding loading indicators

Lecture 12: Adding a custom error page

Lecture 13: Summary of Section 4

Chapter 5: Adding a new feature – likes

Lecture 1: Introduction to Section 5

Lecture 2: Updating the Primsa schema for a many to many relationship

Lecture 3: Adding the like toggle function

Lecture 4: Creating a like button

Lecture 5: Fetching the likes

Lecture 6: Addling the list actions

Lecture 7: Adding the list tabs

Lecture 8: Using the useTransition hook for subtle loading

Lecture 9: Summary of Section 5

Chapter 6: Updating resources and image upload

Lecture 1: Introduction to Section 6

Lecture 2: Adding the edit member route

Lecture 3: Adding the edit member form

Lecture 4: Adding the edit member form Part 2

Lecture 5: Adding the server action to update the member

Lecture 6: Displaying the images in the member edit component

Lecture 7: Adding the buttons for the image actions

Lecture 8: Where to store the images?

Lecture 9: Setting up Cloudinary

Lecture 10: Adding an image upload button

Lecture 11: Adding the image upload server actions

Lecture 12: Using the Cloudinary image component

Lecture 13: Setting the main image

Lecture 14: Challenge – setting the main image

Lecture 15: Challenge solution

Lecture 16: Deleting an image

Lecture 17: Tidying up the images

Lecture 18: Summary of Section 6

Chapter 7: Adding the Messages feature

Lecture 1: Introduction to Section 7

Lecture 2: Setting up Prisma for messages

Lecture 3: Creating a chat form

Lecture 4: Creating the send message action

Lecture 5: Getting the message thread

Lecture 6: Creating a message DTO

Lecture 7: Displaying the messages

Lecture 8: Displaying the messages Part 2

Lecture 9: Improving the message box

Lecture 10: Adding the message sidebar

Lecture 11: Creating the fetch messages action

Lecture 12: Creating the message table

Lecture 13: Adding the message read functionality

Lecture 14: Using custom cells in the NextUI table

Lecture 15: Adding the delete message action

Instructors

Neil Cummings
Professional freelance software developer

Rating Distribution

1 stars: 0 votes

2 stars: 2 votes

3 stars: 3 votes

4 stars: 16 votes

5 stars: 97 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!