beveloper

Fullstack CMS with NextJS and AgilityCMS

Blessing Krofegha's photo
Blessing Krofegha
·

8 min read

In the dispensation of frameworks and stacks, a ton of awesome stacks such as MERN, LAMP, MEAN and MEVN stack have been released over the years to simplify the work of a developer in the quest to create scalable and efficient applications. However, quite a lot of them (MEAN, LAMP) impose a very strict learning curve and often times demands more costs to scale and maintain, while this is great it might quickly get tiresome for a startup or a low-level budget project. This is the reason why a combination of NextJs and headless cms like AgilityCMS is considered to be a good choice for building 21st -century web application.

With NextJs, a client-side and server-side based framework, it ensures all your code is bundled and minimized using a bundler like webpack, it makes implementing optimizations like code splitting to improve page performance. For frontend developers that love typescript, all you would need to get them started is a few lines of config in tsconfig.js. Interestingly, Nextjs pre-renders pages by default. This means every page will use static site generation by default, one of the two rendering options that make up the hybrid architecture of Next.js.

Agility CMS on the other note is a JAMStack focused Headless CMS with Page Management built-in. Agility CMS is a Content-First Headless CMS, allowing you to choose any programming language while also getting the flexibility, speed, and power that comes from lightweight APIs. It comes with a Page Management feature, that allows you to manage your website pages. Agility CMS will come in very handy if you’re working on an eCommerce, Online Ticketing oriented projects, and even more. The editor experience on AgilityCMS is so amazing, such that’s lacking in other headless cms. Agility CMS is a complete Digital Experience Platform–saving time, removing limitations, and allowing for seamless experiences across all digital channels.

In this tutorial, you’ll learn how and what it takes to build a full-stack project maximizing NextJs and AgilityCMS, with a little learning curve and minimal cost. In the end, you would be comfortable building your next full-stack project without having to worry about what full-stack framework you would be needing.

Why Agility CMS?

Maybe you are not quite ready to get started with Agility CMS yet, or you have not convinced to embrace the goodies that come with Agility CMS. Allow me to give you a few reasons why you may want to consider Agility CMS.

  • Limitless Headless CMS

Use Agility flexible, extensible, API-first platform to create next-level digital experiences using any coding language or front-end framework.

  • Use Any Programming Language
  • Page Management
    • One of the main benefits of the Agility CMS Content API and the accompanying SDKs is Page Management. This does not refer to HTML pages on a website, but rather the JSON objects that represent all of the information on a page. Agility CMS allows your content editors to assemble the page object based on a template and set of modules, and then you can render that content using components in code. These components are reusable, allowing your developers to spend more time coding new functionality instead of re-creating existing features on new pages.
  • Restful API
    • The Javascript is essentially an ease-of-use layer on top of the raw REST API. If you are building a mobile app, or if you need to use a language other than Javascript, you can call the REST API directly. You can learn how to do this on our help site using our reference guide.
  • Multiple Front-End Integrations
    • Agility CMS provides a Javascript SDK and a zero-config starter kit for Nextjs, Gatsby, Vuejs, Nuxt, and Eleventy, to help you get up and running. The SDK provides async method calls for all of the various areas where you need to pull data: shared content, content items, pages, sitemaps, and galleries.
  • Each method call requires you to provide a GUID and API Key as authentications. You can also specify which language code you need content in, making multi-lingual sites easy to build.
  • Content Sync SDK
    • The Javascript SDK also includes methods to synchronize the content items and pages in your Agility CMS Instance. These calls allow you to pull everything you need down to your web server and to persist it locally. Syncing content and pages can greatly speed up your build time and will reduce the number of API calls you need to make.
  • WebHooks
    • Agility CMS has content webhooks that allow external applications or websites to become aware of content changes that occur within your Agility CMS instance. This works by providing a list or URL endpoints to Agility CMS. Each time content changes in the CMS, Agility will notify each endpoint of the change and pass-on a message representing the exact change that occurred. To get started check here.

Building with Nextjs and Agility CMS

I guess you’ve come to the phase you’ve been waiting for. Olga, in this post, explains extensively how easy is it to build a full-stack project using Nextjs and AgilityCMS. The post is a walkthrough of a shopping list built using Nextjs, snipcart, and AgilityCMS. At the end of the post, you’d have a full grasp of how to practically build a full-stack app in minutes maximizing AgilityCMS and Next.

Eslam wrote a concise article on Prefetching and dynamic routing with Next.js and Agility CMS. In this article, he built a full-stack blog using the prefetching and dynamic routing in Next and the content creation and retrieval feature in Agility CMS. This article portrays the dynamic relationship between Agility CMS and Nextjs.

Deploying to Vercel

I suppose you’ve gone through the articles in the previous section, if you haven’t I urge you to go through them. Now that you’ve well understood how Agility CMS and Nextjs work seamlessly together, and easy deployment is something you want. The good news is Agility CMS has a straightforward built-in-integration with vertical.

Vercel is a cloud platform for static sites and Serverless Functions that fits perfectly with your workflow. It enables developers to host websites and web services with a few clicks. The most interesting thing is that vercels free tier is a perfect choice for a starter project and even a larger project Vercel is the company responsible for creating Nextjs.

The Agility CMS Manager facilitates the process of deployment, here’s how it works.

“You will need to have a GitHub and a Vercel account to get your project deployed”.

To start, in your agilitycms dashboard, head by going into Settings > Domain Configuration, and add a new Domain”.

Domain Config

Click on Setup to connect to Vercel and deploy your Next.js website.

Choose Vercel

Give your project a name. It will be cloned from agilitycms-nextjs-starter repository.

Give your project a name

Copy the agilitycms-nextjs-starter into a new Git repository. This will ensure you can make updates to your project after deployment. Every push to the Git repository will automatically be deployed.

Screen_Shot_2020-10-29_at_9.49.40_AM.png

When your deployment is done, authorize access between Vercel and your Agility CMS content so that we can automatically configure your Production and Preview domains.

Screen_Shot_2020-10-29_at_9.55.37_AM.png

Once authorized, you will be taken back into your Agility CMS Manager, and you will see that your Production and Preview domains have been set. You can click on the link to view your live site.

Screen_Shot_2020-10-29_at_10.01.13_AM.png

🎉 Congratulations! You've successfully deployed your Next.js and Agility CMS website to Vercel!

Sites built with Agility CMS

Conclusion

I hope you enjoyed this article. We looked at the uniqueness of Agility CMS and how we could use both Nextjs and AgilityCMS to build a full-stack project, deploy the project for free to vercel with a few clicks. You would agree with me, that process of building a full-stack application with from development to deployment is much easier than the conventional process of adopting a LAMP or MERN stack. Let your creativity flow, and please do share your projects in the comments section below — I’d love to see what you come up with!

Resources

JavaScriptNext.jsWeb Developmentheadless cms