Getting Started with Next.js and Agility CMS

Follow

  Note

This guide is meant for developers. Want to learn why Agility CMS and Next.js work so well together?

Next.js paired with Agility CMS is a stack that delivers remarkable Developer Experience (DX), enables lightning-fast User Experiences (UX), and allows for best-in-class Editor Experience (EX). This tutorial is aimed to help you get started with Next.js and Agility CMS using a starter site.

Here is what we'll cover:

  1. Develop Components, not Websites
  2. Create a Free Agility CMS Account
  3. Get The Code and Set Up your Environment
  4. Deploy and Set Up Preview Environment
  5. How the Starter Works

Develop Components, not Websites

When building a site with Next.js and Agility, we always recommend developers start by taking a look at our agilitycms-next-starter, rather than starting from a blank slate. It showcases features such as our native Page Management and shows how you should structure your Next.js website. Our Next.js and Agility starter serves an example based on our recommended best-practices.

Editors have fine-grain control with the ability to manage all aspects of their page. They're able to control what pages are on their website, and what is on each page. This means you can focus on building UI Components (i.e. Modules and Page Templates) that editors will use/reuse to compose their pages.

What's in a Page?

Page in Agility CMS has the following structure:

  • SEO Fields - title, url slug, description, keywords
  • Page Template - the layout of the page, which defines Content Zones
    • Content Zones {} - the areas where editors can add/manage Modules
      • Modules []- self-contained functional UI components representing what is on a page

All of your pages will be dynamically composed at build time, and incrementally updated as content changes.

Your entire website's look and feel will be dictated by the Page Templates and Modules you have available to your editors.

Page Templates and Modules

These will correspond to React components in your source code and will automatically be rendered for you.

Sign up for a Free Agility CMS Account

In order to get started with Agility CMS and Next.js, Sign Up for a Free Agility CMS account to gain access to an instance. When working with Agility CMS and Next.js, we recommend using our Next.js Starter Blog, a fully-featured blog template with example content and modules to get you up and running quickly.

How to sign up for the Next.js Starter Blog

Screen_Shot_2020-10-27_at_2.40.03_PM.png

Get The Code and Set Up your Environment

Once your Next.js Starter Blog template instance is up and running, you'll want to get the Next.js code for it and configure it to connect to your Agility CMS Instance.

Setting up your Development Environment

How the Starter Works

Your Next.js site is configured and structured in a specific way to help take advantage of both Agility CMS and Next.js development.

How Pages work in Next.js

How Modules work in Next.js

How Page Templates work in Next.js

How Preview works in Next.js

Deploy and Set Up Preview Environment

Deploying your Next.js site is as easy as clicking on the Deploy to Vercel button integrated into your Agility CMS Manager. Vercel is a hosting platform from the creators of Next.js and is the recommended platform to use when building websites with Next.js.

Setting up your Preview Environment is a breeze. Vercel supports previews out of the box, and allows editors to preview content in real-time as they are making edits within Agility CMS! 

Deploying your Next.js site to Vercel

2 out of 2 found this helpful

Comments

0 comments

Please sign in to leave a comment.