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

Select the Starter Template project type.

Choose Blog with Next.js as your starter template.

Select the Free developer plan.

Give your project a Name, and select whether you want to Deploy your site now, or save deployment for later.

🎉. Welcome to the Agility CMS Dashboard!

Overview of the Next.js Starter Blog Template Instance

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

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/* - they 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 on 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 - a content item with fields that are used for rendering a header on the website
• Global Footer - a content item 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