Launching a JAMstack Website With NEXT.JS + Vercel

Agility CMS was originally built as a .NET CMS, but as the years passed, we realized that becoming platform-agnostic was necessary if we wanted to give developers and marketers the freedom to use the tools they knew best. 

With that in mind, we’ve been supplying developers with the tools to develop in JAMstack using Agility CMS. However, JAMstack is known to be way friendlier to developers than it is to marketers and editors. Our hybrid approach is designed to counter that caveat because Agility CMS enables developers and non-technical users to build sites with unparalleled ease.

Vercel, one of our partners, makes it easy for JAMstack developers to build static websites in Agility CMS. In this article, we’ll recap one of our latest webinars and explain how Vercel and Next.js give extra agility to Agility CMS. 

What is Next.js?

Next.js is a React-based framework that provides developers with all the tools they need to build static, server-side rendered websites and apps. Next.js also facilitates an enjoyable developer experience by solving some of the problems related to React such as the slow initial page load and the often poor SEO performance of React-built sites. 

Why Do Developers Like Next.js?

Next.js provides several advantages for developers. For instance, unlike React, it supports a wide variety of styling options as well as TypeScript support, and automatic code splitting. Also, developers have caching and automatic static optimization built-in, which lets them serve fully server-rendered pages and fine-tune the webpack configuration. 

For more information about Next.js, take a look at this article: ‘Create a Next.js App | Learn Next.js’

What Is Vercel?

Built on top of AWS Lambda, Vercel's technology has been under development for several years now. Vercel provides developers with a CDN out of the box and has a new preview capability that facilitates blazing-fast website previews as well as server-rendering capabilities for JAMstack development.

With Vercel, you can build fast websites and applications, which can enable three significant performance gains:

1. Better Preview Environment
2. More Efficient Page Management
3. Faster Content Publishing 

Launching a JAMstack Website in Agility CMS With NEXT.JS + Vercel 

This is a quick tutorial on how to launch a JAMstack website, but for a much more in-depth version, go to Dev Workshop: Launching a JAMstack Website with NEXT.JS + Vercel Agility CMS Starter. 

If you’re more of a visual learner, scroll to the bottom of the article and find the video embedded.

Join Agility CMS

If you haven’t joined us yet, joining Agility CMS is super simple. Just click on the purple ‘Get Started’ button and then follow the steps in the GIF below. 

In this tutorial, we will use a Next.js template to work with Vercel, but you can choose from a wide variety of website starters.

Deploy the Site Using Vercel

At this point, you only have headless content that you can’t preview, but using Agility CMS’ ‘Deploy’ button, you can get a first glimpse of what you have using Vercel’s page preview capabilities. To deploy your project, click on the ‘Getting Started’ section, then scroll down and hit on the ‘Deploy’ button. 

Import Project

Before you import, click on the ‘API Keys’ button to authenticate your Agility CMS installation and then hit ‘Deploy’.

Register Your Domain 

Now that you’ve seen a preview of your site copy the URL go back to Agility, and then go to Site Configuration > Domain Configuration. Once you’re there, select ‘Website Domain,’ name your domain, and paste the URL there. 

Set Webhooks For Faster Content Preview 

First, go to ‘Settings’ then click on ‘Webhooks.’

Content Webhooks allow external applications or websites to become aware of content changes that occur within your Agility CMS instance. That way,  each time content changes in the CMS, Agility will notify each endpoint of the change and pass-on a message representing the exact change that occurred, allowing a blazing-fast content preview. 

However, it is possible to allow for a faster content preview with Vercel by setting the ‘revalidate’ time to ‘1’.  This will allow you to deliver the latest content to your visitors right after creating a new deployment (instead of waiting for the browser cache to expire).

Publish a Change On a Page 

To see how this works, let’s publish a change and see what happens. To do that, click on ‘Website’ and for the purposes of this tutorial, let’s add a new page by clicking on the ‘+’ sign. Name it the way you want it and select the ‘Rich Text Editor’ option. Once you’re there, type your information and hit the ‘Publish’ button. 

Edit Modules 

In Agility CMS, the modules are the components that make up your page. They are the individual functional components that populate a page layout. Since the module framework is basic and allows a high degree of customization, the complexity of a module can vary from displaying a simple piece of text to a more complex form that collects and stores data somewhere.

To edit modules in Agility CMS, Click on the page you want to edit and then click on the individual module you want to change. Then click on the ‘Edit’ button in the ‘Content Module Definition’ tab.

Watch the full webinar video here:

If you’re interested in using Vercel to improve your JAMstack development in Agility CMS, contact us and let us help you make the most of the Vercel + Agility CMS partnership.