Walkthrough: Deploying to Vercel
Vercel is an all-in-one platform with Global CDNs supporting deployment and delivery of static & Jamstack apps. Vercel has first-class support for Next.js.
This guide will demonstrate deploying the Next.js sample app that's generated by the
jss create command to Vercel. Assuming you already have the sample app set up and connected to a Sitecore instance, complete the following steps to deploy the sample app to production:
- Execute the steps provided in the Next.js guide for Getting Started with deployment.
- Add environment variables to Vercel or modify
.envfile. We recommend to use environment variables in Vercel:
PUBLIC_URL- your Vercel deployment URL.
SITECORE_API_KEY- your Sitecore API key is needed to build the app.
SITECORE_API_HOST- your Sitecore API hostname.
JSS_EDITING_SECRET- your secret token. The
JSS_EDITING_SECRETis optional for deployments but necessary if you want to use the Experience Editor with your Next.js Vercel deployment. Read about connecting your Next.js application to the Experience Editor.
- Push the changes to your Git provider.
publish:end webhook invocation
publish:end webhook, you can automatically trigger static site generation, cache clearing, and other automated activities with webhook support.
To enable the
Publish:end hook, you must:
- Create a deploy hook in Vercel.
- Create webhook config based on example
url- Required. The URL of the hook to be invoked.
method- Optional. The HTTP method for invoking webhook. Possible values are
GET. The default method is
site- Optional. The sites which should trigger the webhook when published. By default, Sitecore will trigger the webhook for every published item. If you provide the site parameter, the webhook will be invoked if the published item root is an ancestor, descendant, or equal to the configured site's root item.
- Deploy webhook config to your Sitecore instance.
- Publish items.
- On Vercel, check that the end of the publishing process triggered a new deployment.