Deploying Next.js to Netlify

This guide will cover how you can deploy your website built with Next.js to Netlify.

Deploying to Netlify

Setting Up Preview

Rebuilding Your Site with Webhooks

Deploying To Netlify

Note

You will need to have a GitHub and a Netlify account to get your project deployed.

To start, head by going into Settings > Sitemaps, then click Setup Deployment.

Screen_Shot_2021-03-11_at_12.57.25_PM.png

Select the Netlify Automated Deployment.

Screen_Shot_2021-07-19_at_11.47.15_AM.png

Allow Netlify to connect with your Github account.

Screen_Shot_2021-07-19_at_11.49.20_AM.png

Configure your site, Netlify will detect that you are deploying a Next.js site and install the Essential Next.js Build Plugin for you. Save & Deploy.

Screen_Shot_2021-07-19_at_11.50.33_AM.png

Once complete, Netlify will deploy a copy of the Agility CMS & Next.js Starter Template on a unique domain.

Screen_Shot_2021-07-19_at_12.04.31_PM.png

Setting Up Production Domain

To set up your Production Domain in Agility, copy the Deployment URL Netlify generated for you upon deploying your site. Set up a deployment in Agility by going to Settings > Sitemaps and click on the Setup Deployment button. From there, select a Custom Deployment.

Enter your deployment details and click Save.

Screen_Shot_2021-07-19_at_12.15.17_PM.png

Your Production Domain will then be configured.

Screen_Shot_2021-07-19_at_12.38.40_PM.png

Setting Up Preview

Netlify Preview

It is important to note that Netlify Preview for Next.js is still experimental, and we are working on trying to make it the best experience we can. For now, we recommend setting up a separate Netlify deployment for your staging environment.

Create a new Netlify deployment and select the repository for the Agility CMS Next.js Starter that Github created for your earlier.

Screen_Shot_2021-07-19_at_5.31.05_PM.png

Update the site settings, be sure to click Show Advanced so you are able to configure your environment variables. The variables you'll need are the following:

# get these values from the API Keys page in Agility Settings => https://manager.agilitycms.com/settings/apikeys
AGILITY_GUID=xxx
AGILITY_API_FETCH_KEY=xxx
AGILITY_API_PREVIEW_KEY=xxx
AGILITY_SECURITY_KEY=xxx

# if you have multiple locales, comma separate them (e.g: en-us,fr-ca) without a space!
AGILITY_LOCALES=en-us
AGILITY_SITEMAP=website

When you've set up your site settings, click Deploy Site.

Rebuilding Your Site with Webhooks

You can rebuild your Next.js site deployed on Netlify with Webhooks. In Netlify, go to Site Settings > Build & Deploy > Build Hooks to create a new webhook. Give your webhook a name a select a branch you would like to rebuild. Click Save and copy the URL Netlify generates for you.

Screen_Shot_2021-07-19_at_5.41.46_PM.png

In Agility, go to Settings > Web Hooks to add a new webhook. Give your Webhook a name and paste in the URL.

  • For Production builds, make sure Receive Content Publish Events is checked off.
  • For Preview builds, uncheck Receive Content Publish Events, and check off Receive Content Save Events.

You can test the Webhook by sending a test payload.

Screen_Shot_2021-05-27_at_12.05.13_PM.png

 

1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.