[Next.js](https://nextjs.org/) is a fantastic framework that allows us to build performant server-side rendered React apps with ease.

In this series, we will learn how to utilize the powerful features of Next.js 9, like API routes and Static Site Generation (SSG), to build full-stack React apps. We will use [Auth0](https://auth0.com) to handle user authentication and authorization, and we'll also learn how to integrate the excellent [Chakra UI](https://chakra-ui.com/) component library into our Next.js project to make it a breeze to build beautiful and modularized user interfaces. Finally, we will import and deploy our project from GitHub to [Vercel](https://vercel.com), the deployment platform built by the creators of Next.js.

This collection will still be continuously updated with new and more advanced content. Subscribe to the RSS feed to get notified of the latest lessons!

In this lesson, we will learn how to initialize a Next.js 9 project with TypeScript support from scratch.

Initialize a Next.js 9 project with TypeScript

Next.js uses a file-system based router, meaning that it treats single-file components in the `/pages/` directory as pages. In this lesson, we will set up multiple pages and use `next/link` to navigate across different routes, and see how to create dynamic routes, and parse URL query strings.

We will be using TypeScript, but for this specific lesson, no changes need to be made if you are using JavaScript.

Understand static and dynamic Page Routing in Next.js

In this lesson, we will learn how to set up and use Chakra UI with Next.js.

We'll use Chakra UI to customize the way Next.js styles every page in our application by defining a `_app.tsx` file. We'll wrap our app in the `ThemeProvider` that Chakra gives us as well as use `CSSReset` to reset the default browser styling.

After this initial set up, you'll see how easy it is to start styling pages with Chakra by using components like `Heading`, `Link`, and `Flex` exposed from the core package.

Set up Chakra UI to work with Next.js

The "API routes" in Next.js are Node.js serverless functions that we can easily incorporate into our app.

In this lesson, we will learn how to write API request handlers, and how to set up dynamic API routes. After this lesson, you'll be able to create simple API endpoints with Next.js ready to be used both in our frontend code within Next.js itself or for other general purposes.

Build straightforward API with Next.js API routes

The cool thing about Next.js API routes is that we can directly consume the API endpoints from pages.

SWR is a nice tool for handling data loading state in React apps using hooks, and is a perfect companion for our Next.js application. In this lesson, we will learn how to use [SWR](https://swr.now.sh/) - a data fetching library by Zeit - to consume API endpoints on the client-side, and conditionally render an error or a loading component when the data is not available.

Consume Next.js API routes with the SWR library on the client-side

Since version 9.3, Next.js added a new life-cycle method `getStaticProps` for improved Static Site Generation (SSG) support, allowing us to fetch data and create static pages at build time. Together with the new data fetching method `getServerSideProps` used for Server-Side Rendering (SSR), Next.js allows us to clearly separate code intended for SSG or SSR. This is, in many cases, much better than the classic hybrid approach of `getInitialProps`.

In this lesson, we will import a JSON file from the file system in the `getStaticProps` life-cycle method of a Table of Contents page, so that we can render links based on the content we have, and statically generate the page at build time. At the end of this lesson, we will export our app using the `next export` command to a fully static website.

After this lesson, you will be able to optimize pages that don't need to be updated often on every request by only pre-generating them at build-time, utilizing the new SSG feature.

Static Site Generation (SSG) in Next.js with `getStaticProps`

The companion life-cycle method `getStaticPaths` of `getStaticProps` lets us use the data we have at build-time to specify which dynamic routes (like `/pages/blog/[slug]`) we want to generate statically.

In this lesson, we will learn how these two functions can be used in conjunction with each other to fetch mock blog data from the file system, then generate static HTML files for each blog post route. By the end of this lesson, you will be able to fully utilize the powerful Static Site Generation (SSG) feature of Next.js to build and optimize your next project.

Statically generate dynamic routes in Next.js with `getStaticPaths` and `getStaticProps`

The Static Site Generation (SSG) feature introduced in Next.js 9.3 is powerful, but sometimes we still need Server-Side Rendering (SSR) for dynamic contents on the fly. For this purpose, the new life-cycle method `getServerSideProps` allows us to pre-render a page whose data must be fetched at request time. This is, in many cases, much more preferable over the classic hybrid approach of `getInitialProps`, because we can separate code intended for servers or clients more clearly.

In this lesson, we will learn how to use `getServerSideProps` to dynamically fetch data and server-side render pages by consuming a "user profile" API route in our project. We will also learn how to return a 404 error page when the user profile doesn't exist.

After this lesson, you will be able to combine prior knowledge of writing API routes with what we've just learned to build a fully dynamic full-stack app with Next.js.

Fetch data from an API on the server-side with `getServerSideProps` in Next.js

Auth0 is a great service for adding an authentication layer in our Next.js project, so we don't need to worry about security ourselves. Best of all, their free plan allows us to have 7000 active users with unlimited logins, sufficient for a vast majority of projects.

In this lesson, we'll set up Auth0 so that we can secure a `/secret` page in the next video. We'll learn how to create a new Auth0 tenant for our Next.js app, and how to properly set up the environment variables with both `.env` and `next.config.js` files, to make sure our Auth0 client secret is stored safely, and how to initialize Auth0 in our project with the `@auth0/nextjs-auth0` node module.

During the setup process, we'll also learn how to conditionally set environment variables using the `PHASE` constants of Next.js so that we can have different values for `development` or `production` modes (e.g. `localhost:3000` vs. `example.org`). As a bonus, we'll see how we can generate a random password with OpenSSL locally in the terminal as well.

Set up Auth0 in a Next.js app for user Authentication

With the Auth0 set up in our Next.js project, the next step is to integrate the authentication flow into our app.

In this lesson, we'll set up the API routes Auth0 needs to handle the auth process - `/api/login`, `/api/logout` and `/api/callback`. Then, we'll use the `getServerSideProps` lifecycle method in Next.js to authenticate users on the server-side. Finally, we'll update our `/secret` page component to have different states depending on the login session status of a visitor.

After this lesson, you will understand how to implement the user authentication logic in a Next.js app with Auth0.

Implement user Authentication in a Next.js app with Auth0

Vercel (formerly ZEIT) is an awesome JAMstack deployment platform built by the creators of Next.js, which has a generous free tier for personal usage. 

In this lesson, we will start by pushing a Next.js project to a GitHub repo, then integrate it with Vercel to deploy our app to production.

Deploy a project on Vercel (formerly ZEIT) from a GitHub repository

Next.js treats single-file components in the `/pages/` directory as pages, so we need to work around this abstraction to access and modify the `<head>` element of the page. In this lesson, we will learn how to render the `<head>` element dynamically with a constantly updated title in Next.js 9, and see how this feature can be helpful for loading custom fonts.

Introduction to Next.js 9

Instructor

Course Content