Deploy a Next.js Application to Vercel
With our Strapi app deployed to Heroku, we need to deploy our front end. In this lesson, we are going to be deploying to Vercel.
Before we start on that, we are going to make some finishing touches, styling-wise, to our front end which will all be available in github.
Now we will create a repo to push our Next.js app to. On vercel's site, we will create a new project and configure it to be a Next.js application as well as add in our environmental variables. Once that is done, our app will be live!
Thank you for watching my course on how to Build a Modern CMS Driven Web Application using Strapi and Next.js.
Instructor: [0:01] Now that we've deployed our Strapi application to production, we can do the same for our Next.js application. To do this, we'll open VS Code to make some final changes. Run code. Inside home module.css, we're going to add some styling for our back button and save. We'll restart our Strapi server also. [0:31] Now, we have some styling on our back button. I'll make this bigger. Now, in our index.js, we'll get rid of our console.log and save that. Then we'll open our terminal. We'll stop our app.
[0:50] Now that we see everything is running, we'll init a repository. Open GitHub and add everything. We'll make our commit, init and then branch, git branch -m main.
[1:26] Then add a remote. We'll paste that to add our remote, that should say Git. That should say Git not hit. We'll paste this to add our remote. Then we'll run git push -u origin main. Type in my GitHub credentials. Now I've pushed my project to GitHub.
[2:05] Then we'll go to vercel.com where I will log in with my GitHub. Then we'll add a new project called Course Next app. We'll add this to the root. We'll keep the build command's default, and we will add environment variables.
[2:33] The first one is NODE_ENV to pre-production. The second one is Strapi URL which should be our Heroku URL. Now, our app is live. We'll go to the dashboard and visit our website running on Vercel in production to click exactly what you need .
[3:28] We have our page with our image. Same thing for the second post. That's how you deploy a modern Strapi powered Next.js application to Vercel.