Deployment & Rebuilding

On this page, you'll learn how to deploy your Next.js app and rebuild your site when you update your content.


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.

Create a Vercel Account

To deploy your Next.js app with a Vercel for Git, make sure it has been pushed to a Git repository.

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

New Vercel Site

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.

Now your site is online!

Now every time you push changes or create a new branch, a new deployment will be made for you and your URL will be updated accordingly. You can learn more about the Vercel platform by consulting their documentation.

However, if you included any statically generated pages in your project, you need to set up webhooks to update those pages when there are changes in your Prismic repo.

Add Webhooks

However, if you included any statically generated pages in your project, you need to set up webhooks to update those pages when there are changes in your Prismic repo.

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 tell Netlify to rebuild your site when there are changes. Learn more in our guide to webhooks.


Deploy with Netlify

Netlify is a static page provider with Git deploy integration opportunity (GitHub, GitLab, Bitbucket).

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

Create a Netlify Account

2. Then click New site from Git.

New Netlify Site

3. Under "Continuous Deployment," click GitHub. If you haven't done so already, give Netlify access to your GitHub repos. Then find your project repo and select it.

4. The third screen "Build options, and deploy!" asks for details about where to create the site and how to build it.

Build Command

next build

Publish Directory

dist

5. Then click Deploy Site. It will take a moment for your site to build.

Now your site is online!

Add Webhooks

However, right now your website is completely static. To make the content update when you make changes in Prismic, we need to set up webhooks.

In your Netlify dashboard, go to the "Settings" for your new site, then to "Build & Deploy." Scroll down to "Build Hooks." Create a hook for your master git branch (unless you are using a different branch). This will create a URL. Copy the URL.

Go to your Prismic repository, visit Settings -> webhooks

Create a new webhook by choosing a name and pasting in the webhook URL you just copied from Netlify. You can leave the "Secret" empty.

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


Related 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.