Deploying a Sitecore JSS-Next.js App with SSG & ISR to Vercel (from zero to live)

In this post, I'll share the steps to get our Next.js Sitecore App deployed into Vercel on some simple steps. Vercel is the creator of Next.js and now also a Sitecore partner. To avoid a huge and extensive post, I won't be writing about Next.js, Vercel, JSS, etc. instead, please find some useful links with references to all those at the end of the blog post.

Getting the JSS app locally

The first step is to have the Sitecore JSS-Next.js app running locally. For simplifying things, we'll be creating it with the help of JSS CLI. Before starting, make sure you've Node.js installed locally.

We just get started by running the following command to install the JSS CLI (more info here):

1npm install -g @sitecore-jss/sitecore-jss-cli

Click to expand

Now, we can start to play with the CLI, so let's create the app:

1jss create sitecoreverceldemo nextjs

We give it a name (sitecoreverceldemo) and a framework (nextjs).

Click to expand

Connected Mode

The first thing we need to do is to create our API key so our JSS app can communicate to our Sitecore instance. In this demo, I'm running a local Sitecore instance, but it could be also a containerized one.

So, for doing that, we login into Sitecore and go to /sitecore/system/Settings/Services/API Keys and we create a new item, give it a name, and copy the ID somewhere, this gonna be our API key moving forward.

Now, we run the following command to start setting up it:

1jss setup

We just follow the wizard and set the proper values for our Sitecore instance, API Key, import service URL, etc. If all went well, then you should see something like this:

Click to expand

Note that you've to add the recently created hostname to the hosts file in windows and ISS (sitecore.vercel.demo).

We're now ready to deploy the configs, and right after that, the items, for doing that we simply run the following commands:

1jss deploy config
2jss deploy items --includeContent --includeDictionary

Click to expand

This will run the import to Sitecore and create the sample items. We can now build the app by running:

1jss build

Click to expand

That's it! We can now start our JSS App in connected mode:

1jss start:connected

Click to expand

Code Repository

We now run some Git commands to push our code to GitHub. You can find the one I'm using for this demo here.

Vercel

Now, that we are done with our JSS Next.js app, we can have fun deploying it to Vercel. The first good news here, you can go and create your free account for testing purposes :)

Another good thing about Vercel is that it connects to GitHub, GitLab, and Bitbucket, so it makes things really easy. So, let's go and import our GitHub repo there:

Click to expand

Let's click on import and then configure our project. (Note: skip the Teams creation step to avoid having to get a trial account).

BUT as we have our Sitecore instance locally (or running on a container) we've to somehow expose our localhost to the internet. For that, we can use this amazing tool: Ngrok.

Click to expand

Click to expand

As I'm using the free version, it generates random URLs, but this is enough for our demo. Don't forget to add those to the IIS binding and hostfile (if you're running Sitecore locally).

Back to Vercel, we have to setup some environment variables:

Click to expand

SITECORE_API_KEY: The Sitecore API key we created in the previous step.SITECORE_API_HOST: The URL generated by NGRock.JSS_EDITING_SECRET: Your secret token. The JSS_EDITING_SECRET is optional for deployments but necessary if you want to use the Experience Editor with your Next.js Vercel deployment.

In next.config.js, replace:

const publicUrl = process.env.PUBLIC_URL;

with the following:

const publicUrl = process.env.VERCEL_URL ? https://${process.env.VERCEL_URL} : process.env.PUBLIC_URL;

So, it takes the URL we defined as an environment variable in Vercel.

Now everything is set and ready to be deployed. Let's get back to Vercel, and deploy!

You'll need to also update the hostname in sitecore/config/sitecoreverceldemo.config.

Click to expand

If everything was well configured, you should be able to see the requests to the headless services while Next.js is generating the static site during the building, something like this:

Click to expand

Click to expand

Et voila! The site is now live!

Click to expand

The publishing webhook

We need now to trigger the deployment if the content gets changed in the CMS. For that, we create a deploy hook in Vercel:

Click to expand

In the settings/Git section, we choose to create a deploy hook, we give it a name and a branch (develop in this case).

Click to expand

Create the hook and copy the URL. Let's create now a config patch in Sitecore that will trigger it on publush:end

1<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:role="http://www.sitecore.net/xmlconfig/role/" xmlns:search="http://www.sitecore.net/xmlconfig/search/">
2  <sitecore>
3    <javaScriptServices>
4      <publishWebHooks type="Sitecore.JavaScriptServices.AppServices.WebHooks.WebHooks, Sitecore.JavaScriptServices.AppServices">
5        <hooks hint="list:AddWebHook">
6          <hook type="Sitecore.JavaScriptServices.AppServices.WebHooks.WebHookDefinition, Sitecore.JavaScriptServices.AppServices">
7            <name>Vercel - Publish Hook</name>
8            <url>https://api.vercel.com/v1/integrations/deploy/prj_f4NcDuveH3zCP9a6pObWlaApER14/T7ATu61aej</url>
9            <method>POST</method>
10            <site>sitecoreverceldemo</site>
11            <body></body>
12          </hook>
13        </hooks>
14      </publishWebHooks>
15    </javaScriptServices>
16  </sitecore>
17</configuration>

• url: Required. The URL of the hook to be invoked.
• method: Optional. The HTTP method for invoking webhook. Possible values are POST or GET. The default method is POST.
• 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.

Let's test it, make a quick change in Sitecore and publish the item (heading field):

Click to expand

After publishing, we can see that the deploy hook got triggered in Vercel:

Click to expand

Click to expand

Refresh the site, and we can see our changes there:

Click to expand

In my next post I'll explain a bit how the ISR works as it deserves specific writing about it.

That's it! As you can see the steps to setup your CI/CD with Vercel is quite straightforward. I hope you find this post useful and helps you with the first steps of getting into Next.js and Vercel. Stay tuned for more Sitecore stuff!

References:

• Sitecore JSS-Next.js: https://jss.sitecore.com/docs/nextjs/getting-started-nextjs/why-nextjs
• Creating a Next.js app with JSS CLI: https://jss.sitecore.com/docs/nextjs/getting-started-nextjs/walkthrough-jsscreate
• Vercel: https://vercel.com/docs/concepts
• NGrok: https://ngrok.com/