Getting Started with the Next.js Blog Template

Agility CMS is a flexible headless CMS with an infinite number of ways to configure and set up your pages and content.

In order to showcase best-practices, evaluate, and help onboard new users when using Agility CMS with Next.js, we recommend signing up for our pre-configured Next.js Starter Blog. This template has a few pages along with some modules and content models already set for you to support a familiar blogging experience.

It's important to note though, that you can customize anything and everything in this template, it's just giving you a head start and serving as an example!

What we'll be covering in this guide:

• How to Sign Up
• Overview of the Blog Instance
• Next Steps

How to Sign Up

Head to https://www.agilitycms.com and click on Get Started to sign up for a new Agility CMS account.

Sign up for a new Agility CMS account using Github, Google, Microsoft, or via Email & Password.

Fill out the following information to complete your profile.

Choose Blog with Next.js as your starter template.

Select the Free developer plan.

Give your project a Name, then click Create Instance.

🎉. Welcome to the Agility CMS Dashboard!

Overview of the Next.js Starter BlogTemplate Instance

The Gatsby Starter Blog Instance consists of a collection of pre-initialized Pages, Page Templates, Modules, and Entries.

Pages

Pages represent the pages available on your website.

• /home - the root page of the site ('/') which as a few modules already on it
• /blog - the primary listing page for blog posts
• /blog/* - the dynamic page path used for blog posts
• /about - the about page of the site with a Rich Text area on it

Page Templates

Page templates define the areas that modules can be added to.

• Main Template - a basic template that has a single content zone for adding modules

Modules

Modules are the functional components that are added to a page. Typically all of your content on a page is broken down into modules.

• Hero - a simple hero section with a background image
• Rich Text Area - a WYSIWYG for displaying flexible HTML
• Post Listing - a listing of your blog posts
• Post Details - UI component representing the details of a blog post, used on the /posts/* dynamic page 

Content

• Global Header - an entry with fields that are used for rendering a header on the website
• Global Footer - an entry with fields that are used for rendering a footer on the website
• Posts - a listing of blog posts, each post has a Title, Image, and Body
• Author - an author of a blog post
• Category - the category of a blog post
• Tag - tags of a blog post