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

0. Introduction

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

1. Creating a Next.js React Front End

05 - What is Next.js
06 - Setting up a Next.js project
07 - Creating pages
08 - Creating a product list
09 - Using Next.js Links
10 - Customizing content with route parameters
11 - Creating a shopping cart list
12 - Creating a 404 page
13 - Styling Next.js applications with Tailwind CSS
14 - Challenge - Creating a navigation bar
15 - Solution - Creating a navigation bar

2. Creating Next.js API Routes

16 - What are Next.js route handlers
17 - How do Next.js route handlers work
18 - Testing route handlers with Postman
19 - Creating a list endpoint for products
20 - Using route parameters in route handlers
21 - Creating a shopping cart endpoint
22 - Creating an add-to-cart endpoint
23 - Challenge - Creating a remove-from-cart endpoint
24 - Solution - Creating a remove-from-cart endpoint

3. Adding MongoDB to Next.js

25 - What is MongoDB
26 - Setting up hosting for MongoDB
27 - Adding MongoDB to Next.js
28 - Adding data to MongoDB
29 - Rewriting the list endpoints
30 - Rewriting the load product endpoint
31 - Rewriting the shopping cart endpoint
32 - Rewriting the add-to-cart endpoint
33 - Challenge - Rewriting the remove-from-cart endpoint
34 - Solution - Rewriting the remove-from-cart endpoint

4. Connecting the Front End and Back End

35 - Data loading basics in Next.js
36 - Loading data with Fetch
37 - Loading all products
38 - Loading individual products
39 - Loading shopping cart items
40 - Adding items to the cart
41 - Shopping cart improvements
42 - Challenge - Removing items from the cart
43 - Solution - Removing items from the cart

5. Hosting a Next.js Application

44 - Preparing an app for release
45 - Releasing a Next.js app
46 - Shutting down a Next.js app

Conclusion

47 - Next steps in your full-stack journey