DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Deploying your Next.js Application
Anurag Gharat
Anurag Gharat

Posted on

Deploying your Next.js Application

There are many platforms to host your Next.js app. Out of them, I prefer Vercel. Vercel is the fastest way to host your Next.js application and it directly gets connected to your GitHub. So every time you create a new commit to your project, the build process is triggered and a new version is automatically deployed.

And along with this, there are other numerous features provided by Vercel team such as Monitoring, Build Previews, HTTPS and SSL Certificates, Env Variables and using Custom domains. All these features come free thanks to Vercel. And if you don’t know it already, Next.js is created and maintained by Vercel Team!

So now lets get into the process.

Push your project on GitHub:

Create a repository on GitHub for your project. The process is quite simple, just log in to your GitHub account and click on new repository.

Create a new repository

You can keep the repository public or private your choice. Once done, you need to push your project to GitHub. The steps will be given when you create the repository. You just need to commit all changes and push to your branch.
If you find those commands confusing, run the following commands one by one.

git commit -m "Ready for Deployment"
git remote add origin "URL for your git origin"
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

These are the same commands which your repository must be showing.

Connecting Vercel with your GitHub account:

Now head over to Vercel from the below link and create your account using GitHub.

https://vercel.com/

Once you authorize your account you will be redirected to your Dashboard.

Vercel Dashboard

The dashboard should be similar to this. I have 4 projects running so you can see them but for you, it must be blank.

Click on New Project

You would see a page showing all your projects available on GitHub. If you can’t see anything, there will be a button to connect Vercel with your GitHub. Click on that button and allow Vercel access to your GitHub.

Vercel Dashboard

Choose your project which you wish to deploy. You can put your name for the project here. Make sure you give a good name because this name appears in your deployed URL.

Leave everything else blank. ( If you have a different configuration for Build and Install command you can edit it). For basic App you can leave it blank.

Now if you use any environment variables in your project, Click on Environment Variables setting below.

Here you can set your environment variables which you set using .env file in development mode. Make sure you use the same variable name.

Vercel Dashboard

Important!

If you have any environment variable that is used on the browser side , you need to prefix the variable with NEXT_PUBLIC_ . By default env variables are only available in Node.js environment hence to access it on browser we should use this prefix.

Now since we have configured everything you can click on deploy and watch Vercel do its magic!

After a couple of minutes, if you are lucky and there are no errors your site will be deployed successfully! You will be redirected to your Site Dashboard. If you encounter any problems during deploy check the build logs. You can find those logs on deployment tab. Check the logs find the bug, resolve it and push a new commit. Vercel will automatically detect a new commit and start building the site again.

My project got deployed successfully and here it is!

https://next-js-portfolio-weld.vercel.app/

Deploy to Vercel

Thank you for reading! If you loved the blog, do like it and share it. I post many such tweets about Web Development and Programming on Twitter, you can follow me if you love such content! Thanks!

Top comments (0)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.