Web Studio is here! An enhanced experience to make it easier to create, preview, and collaborate on your website contentLearn More
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.
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.
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!
Happy Editors and Developers
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.
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
We have a few Starter Templates which are designed for developers who want to start using Agility CMS with Next.js. Save time and effort by using our templates that are already integrated with Agility CMS using best practices.
Blog Starter
The Blog Starter template is a simple template that connects to a sample Agility CMS instance. This instance comes pre-configured with sample pages and content for a blog-styled website.
Commerce Starter
The Commerce Starter template is an all-in-one starter kit for building high-performance e-commerce sites with Next.js. The Commerce Starter integrates out-of-the-box with many major ecommerce backends such as BigCommerce, Shopify, Swell, Saleor and Vendure, and uses Agility CMS for Pages and Content Management.