Skip to content

Latest commit

 

History

History
 
 

exercise-15--deploy-your-next-js-app-on-vercel

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
readme-assets
readme-assets
 
 
README.md
README.md
 
 

README.md

Exercise 15: Deploy your Next.js app on Vercel

Background

Next.js can be deployed anywhere, but the easiest way is to use the Vercel platform, which is created by the people who also created Next.js.

Vercel is optimized for Next.js. Out of the box, it applies the following optimizations to your app:

  • Every page can either use Static Generation or Server-Side Rendering.
  • Pages that use Static Generation and assets (JS, CSS, images, fonts, etc) will automatically be served from Vercel's Edge Network, which is blazingly fast.
  • Pages that use Server-Side Rendering and API routes will automatically become isolated Serverless Functions. This allows page rendering and API requests to scale infinitely.

To deploy your app on Vercel, first you need to push it to a Git provider, like GitHub. Then, follow these steps:

  • Sign up to Vercel (it's free, no credit card needed)
  • Then you'll see the "Import Project" page. Pick the Git provider you host your app's source at.

    Import Project

  • After you've authenticated with your Git provider, you will see a list of your repos. Find the app you want to deploy and click on the "Import" button.

    Import Repository

  • Vercel will automatically figure out that it's a Next.js project, and it will apply the defaults for you. If you use any Environment Variables, make sure you add them in the "Environments Variables" section.

    Configure Project

  • When you're ready, hit the "Deploy" button and you app will be built and deployed in a few minutes.

Congratulations! You app is live now! 🎉

🚀 Exercise

Deploy the following project on Vercel: nikolovlazar/deploy-nextjs-on-vercel.

🚩 Checkpoint

This exercise marks the fifth checkpoint at which we'll go into breakout rooms to do this exercise only. If you're stuck, do not hesitate to ask. As soon as you're done you can fill out either the Post-Breakout Feedback Form, or the feedback form for this exercise. I would appreciate your feedback a lot.

🍩 Exercise Feedback form

Writing down what you learn is key to your retention. Also, I want to make sure each exercise is effective at helping you learn the material. Please quickly fill out this form so you can elaborate on what you learned and give me feedback so I can improve it for future learners.