Introduction to Next.js and Agility CMS

It's never been easier to build a stunning and performant website for your users. With Next.js, Agility CMS, and  Vercel, you can deliver an amazing experience not only for users but for your Editors and Developers as well.

With our agilitycms-next-starter, getting a website up and running with Next.js and Agility CMS is a breeze. Our integration with Next.js is the only one that will generate pages for you. This allows developers to focus on building UI Components (i.e. Page Modules) and empowers editors to compose and manage all of their pages on their website.

Next.js gives you an amazing Developer experience with all the features you need for a production-ready website, but we believe the Editor experience should come first. If you want a performant website, happy developers, and productive editors, then this is for you.

What is in this Article

• Build Better User Experiences
• Deploy and Preview with Ease
• Happy, Productive Editors
• Happy, Productive Developers
• Get Started Quickly

Build Better User Experiences

With Performance, SEO, and Accessibility in mind, the creators of Next.js built this framework to improve the User Experience of websites and web applications.

• Fast Rendering - your website is exported to static HTML, no need to wait for your webserver to compose/render your HTML
• Pre-fetching content - as users scroll through your website, content for the next page they are likely to click on is pre-loaded in the background, making your website more snappy
• Accessible output - your website server pre-rendered static HTML files which are easy for search engines and screen readers to parse

Deploy and Preview Content with Ease

The great thing about using a framework like Next.js is that you don't need expensive web servers to host your website. No matter how much traffic you get, your website is infinitely scaleable.

The recommended way to deploy a Next.js website to production is to use Vercel, a hosting platform from the creators of Next.js. Vercel supports previews out of the box, and allows editors to preview content in real-time as they are making edits within Agility CMS! 

How Previews work in Next.js

Happy, Productive Editors

While using Agility CMS to power the content of your Next.js site, editors can create and manage pages with ease. They'll have a toolbox of UI Components (i.e. Page Modules and Page Templates) to select from that developers have built for them, and they'll use these to compose their pages. Editors are able to preview content changes in real-time in a Preview Environment prior to publishing.

Happy, Productive Developers

Next.js is a framework built on top of React and is quickly growing in popularity. Next.js was built to provide developers with all the features they need for production, allowing for route-prefetching and the ability to create a Hybrid website or web application using both Static Generation and/or Serverside Rendering. Since it's React-based, it makes it extremely easy for developers to create reusable interactive UI Components (i.e. Page Modules & Page Templates) Editors can use to compose their pages. 

Getting Started Quickly

Our agilitycms-next-starter is a starter template designed for developers who want to start using Agility CMS with Next.js. You can save time and effort by using this template that is already integrated with Agility CMS using best practices.

• It's simple - it's a bare-bones template but has enough examples in it for you to follow
• Fast rendering - your website is exported to static HTML, so there's no more waiting for your webserver to piece together and render your HTML
• Optimized images - using the next/image component, it will only load the appropriately sized images for the device the user is using so smaller devices will load smaller images
• Fast preview and builds - deploy your site to Vercel to take advantage of lightning-fast build & previews

Getting started with Next.js and Agility CMS