Deployment & Previews

Beta

These docs rely on Slice Machine, which is in active development and subject to change. Content Relationships are not currently supported with Slices.

Package versions

These docs use the following package versions:

  • prismic-reactjs: v1.3
  • @prismicio/client: v5

The docs will soon be updated to use the latest versions of these packages. If you wish to use the latest versions today, you can update your project by following the migration guides for each package.

By the end of this final step you will learn how to statically deploy & rebuild your website. You will also learn how to preview Prismic content changes, saving build costs.


Deployment

We're going to deploy our Next.js application on Vercel, this process is super simple so let's get into it.

Connect to GitHub

The first step you'll need to take is to host your code on GitHub. When you create a repository on GitHub, you'll be able to do continuous deployments for your server.

Create a new repo for your project, make sure all of your local changes are committed, then push your project to GitHub.(Here's more info on what GitHub is and how to create a repo.).

Deploy with Vercel

Vercel is a deployment platform for Next.js projects made by the creator of Next.js, so it's only natural that the deployment experience feels as simple as the development experience.

1. To get started, make an account or log in If you don't already have an account.

2.Then, click Import Project. Then continue with import git repository.

3. Enter the URL of your GitHub repo. If necessary, adjust your GitHub app settings to allow Vercel access to the repo.

4. Click deploy. It will take a moment for your site to build.

That's it, your Next.js & Prismic website should now be live! You can learn more about the Vercel platform by consulting their documentation.


Rebuilding / Webhooks

Now that you have your website live, you'll want your content creators to be able to make changes; for that, you'll need your Next.js web app to rebuild when the content is updated. This again is really simple; we need to configure a webhook between Prismic and Netlify.

In your Vercel project, go to "Settings," then "Git Integration." Scroll down to "Deploy Hooks." Create a hook for your main git branch (note: your main branch could also be called master or something else). This will create a URL. Copy the URL.

Go to your Prismic repository, visit "Settings," and then click "Webhooks." Create a new webhook by choosing a name and pasting in the webhook URL you just copied from Vercel. You can leave the "Secret" empty.

Now, whenever you change your content in Prismic, the changes will be reflected on your site.

What are Webhooks?

Webhooks are how you tell external services when there are changes in your Prismic repo. Learn more in our guide to webhooks.


Preview your content changes

Now for the cherry on top. Rebuilding your website once the content changes are great, but if you want to see what these content changes might look like without publishing to your live site, which may incur building costs from your deployment service, then the solution is Prismic Previews. This feature builds your preview on top of the browser so that it's fast & free.


Congratulations!

Now that you can Preview your content changes you should have got some experience with using all the basic features of Slice Machine with Next.js.

You should also have a fully functioning website project which you can customize and build on top of. Below you'll find some suggested articles on what to learn next. I suggest starting to create some of your own unique Slices, once you've done this you can share them with us in the Prismic Community Forum or on Twitter with #PrismicSliceMachine.


Next and previous articles

Suggested Articles


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.