Next.js: Creating and Hosting a Full-Stack Site

Course details

Many web developers focus solely on one part of an application: the front end, the back end, the database, or the hosting platform. However, JavaScript has become such a pervasive language that it can be used for all of these parts. This means that a single JavaScript developer can now create an entire web application, a task that used to require an entire team. In this course, full-stack development instructor Shaun Wassell shows developers how to do exactly that by using Next.js to build a full-stack application. Find out how to build basic React interfaces in Next.js, add back-end functionality to Next.js applications, make network requests, and finally host a full-stack Next.js application so that anyone can use it.

Concepts

Introduction

Create a full-stack site with Next.js
What you should know
Basic setup and exercise files
Project introduction

Creating a Next.js React Front End

What is Next.js
Setting up a Next.js project
Creating pages
Creating a product list
Using Next.js Links
Customizing content with route parameters
Creating a shopping cart list
Creating a 404 page
Styling Next.js applications with Tailwind CSS
Challenge - Creating a navigation bar
Solution - Creating a navigation bar

Creating Next.js API Routes

What are Next.js route handlers
How do Next.js route handlers work
Testing route handlers with Postman
Creating a list endpoint for products
Using route parameters in route handlers
Creating a shopping cart endpoint
Creating an add-to-cart endpoint
Challenge - Creating a remove-from-cart endpoint
Solution - Creating a remove-from-cart endpoint

Adding MongoDB to Next.js

What is MongoDB
Setting up hosting for MongoDB
Adding MongoDB to Next.js
Adding data to MongoDB
Rewriting the list endpoints
Rewriting the load product endpoint
Rewriting the shopping cart endpoint
Rewriting the add-to-cart endpoint
Challenge - Rewriting the remove-from-cart endpoint
Solution - Rewriting the remove-from-cart endpoint

Connecting the Front End and Back End

Data loading basics in Next.js
Loading data with Fetch
Loading all products
Loading individual products
Loading shopping cart items
Adding items to the cart
Shopping cart improvements
Challenge - Removing items from the cart
Solution - Removing items from the cart

Hosting a Next.js Application

Preparing an app for release
Releasing a Next.js app
Shutting down a Next.js app

Conclusion

Next steps in your full-stack journey