Deploying Your Sitecore NextJs App To Vercel

Setting Up A Vercel Deployment

There are a lot of app builds you can deploy to Vercel, but today I'm focusing on the NextJs variety. After all, that's what we're building for use with Sitecore JSS implementations. Deploying to Vercel couldn't be easier, but there are a few things you will want to be doing ahead of time to make it even easier.


One such recommendation is to use ESLint. Using this as part of your build pipeline, or even just to clean up some of your JavaScript or TypeScript lowers the chances your build will fail within Vercel during an automated deployment.

Another is to ensuring you run next build prior to committing your code. It might seem obvious, but that build process can expose things that aren't immediately obvious.

Creating a Deployment

After creating an account with Vercel, and integrating with an appropriate Git provider (i.e. GitHub, GitLab, and Bitbucket. DevOps is not available as an OOTB location at the moment, but wouldn't surprise me to see it get added in the future.

For this example we've setup a GitHub repo and are using it as our project source.

Screenshot for deploying your Sitecore NextJs app to Vercel

Once you click Import you'll be brought to the Configure Project page. You can always come back to these so don't think you have to get it right out of the box.

Screenshot for deploying your Sitecore NextJs app to Vercel

If you've accurately selected your Framework Preset, it will provide you the Build and Install commands that are relevant for it. For our project, we used the override feature to use npm ci for our install command. Reason being is npm ci is for installing all exact version dependencies or devDependencies from a package-lock file.

One key piece of information you'll need to do, certainly when setting up a deployment for a Sitecore JSS implementation are the Environment Variables. You will absolutely need to have JSS_EDITING_SECRET, SITECORE_API_HOST, and SITECORE_API_KEY for your environment to run. The PUBLIC_KEY value we add after the first build and is the URL for the Vercel site itself which you don't get until you've had a first successful deployment.

Screenshot for deploying your Sitecore NextJs app to Vercel

Once ready you'll be able to monitor the build process and if needed, debug any errors that show up. Logging in Vercel is based on the deployment so you can always come back to view previous deployments without having to hunt down the log files for each.

Screenshot for deploying your Sitecore NextJs app to Vercel

If all goes well, you'll be met with a Congratulations and a small screenshot of your app.

Screenshot for deploying your Sitecore NextJs app to Vercel

Regardless if you are going to planning on using Vercel for QA or Production, have a look at all that it has to offer. Explore their Marketplace as you'll be able to integrate and improve notifications for deployments, or trigger deployments themselves.

👋 Hey Sitecore Enthusiasts!

Sign up to our bi-weekly newsletter for a bite-sized curation of valuable insight from the Sitecore community.

What’s in it for you?

  • Stay up-to-date with the latest Sitecore news
  • New to Sitecore? Learn tips and tricks to help you navigate this powerful tool
  • Sitecore pro? Expand your skill set and discover troubleshooting tips
  • Browse open careers and opportunities
  • Get a chance to be featured in upcoming editions
  • Learn our secret handshake
  • And more!
Sitecore Snack a newsletter by Fishtank Consulting

Meet David Austin

Development Team Lead | Sitecore Technology MVP x 3


David is a decorated Development Team Lead with Sitecore Technology MVP and Coveo MVP awards, as well as Sitecore CDP & Personalize Certified. He's worked in IT for 25 years; everything ranging from Developer to Business Analyst to Group Lead helping manage everything from Intranet and Internet sites to facility management and application support. David is a dedicated family man who loves to spend time with his girls. He's also an avid photographer and loves to explore new places.

Connect with David