Initialize a Next.js 9 project with TypeScript

Understand static and dynamic Page Routing in Next.js

Set up Chakra UI to work with Next.js

Build straightforward API with Next.js API routes

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

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

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

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

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

Implement user Authentication in a Next.js app with Auth0

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

Render the <head /> element dynamically in Next.js

Introduction to Next.js 9

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.

https://app.egghead.io/api/v1/lessons/next-js-deploy-a-project-on-vercel-formerly-zeit-from-a-github-repository/subtitles

Xiaoru Li: [0:00] We'll start with initializing git in our project and create the first commit. Now let's head over to GitHub and create a new repo called my-app. Copy the commands for existing repository and run them in the terminal. Once our code is live on GitHub, we can head over to vercel.com and sign up a new account with GitHub. Click on Authorize, and our new Vercel account will be ready.

[0:44] Now we can click on Import Project then Continue from Git Repository. Since it's our first time using Vercel with our GitHub account, we need to install the integration. From here, we can decide whether to allow Vercel access to all of our repositories or manually select repositories that we want to deploy from.

[1:13] We'll choose all repositories for now since it makes it easier to deploy more apps with the platform in the future. Now click on Install, and we'll be sent back to Vercel. Click on Import Projects from GitHub. Now we can select which project we're going to import and deploy.

[1:36] We'll rename our project to my-very-unique-app, leave the root directory to default. As you can see, Vercel has automatically detected our project to be a Next.js project. Other than Next.js, Vercel also natively supports a lot of very popular frameworks like Gatsby or Nuxt.js. We don't need to overwrite the default configurations a lot.

[2:12] Let's hit Deploy. We'll see the state of the deployment from this new project page. While the app is still building, we can go over to Build Logs and see the log output updated in real time.

[2:35] Once the build is complete, we can visit this particular version of the build. Notice the unique identifier on the URL. We can also head back to our project page and visit the latest version of our app from the main domain.

[2:59] In the domain settings, we can also add a custom domain of our own or use a new now.sh free subdomain provided by Vercel.

[3:19] As we can see, the API routes of Next.js, which are serverless functions, are also working on Vercel.

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

Share this video with your friends

Course

Introduction to Next.js 9