Next.js for Acquia CMS Headless Starter Kit

Goal

In this tutorial, you’ll connect your existing Acquia CMS Headless Starter Kit from the first tutorial to the Next.js for Acquia CMS Starter Kit.

Prerequisites

• A local machine where you have (or can install) node version 16.x or later

• An existing installation of Acquia CMS Headless Starter Kit. See first tutorial on settings up Acquia CMS.

• We recommend installing the Acquia CMS Starter Kit demo content so you can see content in your Next.js site.

Overview

At Acquia, we’re creating a better developer experience for headless CMS.

We’ve partnered with Chapter 3, maintainers of Next.js for Drupal, to build Next.js for Acquia CMS: a Next.js starter kit for the Acquia CMS Headless Starter Kit for Drupal.

This is the second of three tutorials on using Next.js optimized for the Acquia CMS Starter Kit. Next.js is a framework built on top of React.js, with great support, stability, performance and security features.

With next-acms you get an out-of-the-box Next application that connects easily to the Acquia CMS Starter Kit default content model. Try it out yourself! Here is a guide on how to get a local Next application quickly connected to Acquia CMS.

In this tutorial, you’ll connect your existing Acquia CMS Headless Starter Kit from the first tutorial to the Next.js Starter Kit.

Specifically, we will:

• Set up a local Next.js Starter Kit optimized for Acquia CMS Starter Kit
• Configure Next.js to use a JSON:API endpoint of your Acquia CMS Starter Kit installation

• Create the project

  We’ll start by creating our codebase:

  copy

   npx create-next-app -e https://github.com/acquia/next-acms/tree/main/starters/basic-starter

• Setup your local machine

  To use the starter kit locally, you’re going to need npm (Node Package Manager) which will give you a Node.js engine (node) and npx (node package execute). If you already have it installed, go ahead and skip to the next step.

  Option 1: Install Node directly to your local machine

  Using Homebrew on Mac:

  copy

   brew install npm

  Using Ubuntu:

  copy

   apt-get install npm

  Now skip ahead to the “Install Node Packages” section.

  Option 2: Use Docker

  If you don’t want to run Node locally and prefer to keep things in a Docker container, then this section is for you!

  With next-acms cloned on your host machine, you can now mount it to a standard node container to interact with it. Keeping the container ephemeral, the docker commands below spin containers up and down for each command:

  copy

   # Install node dependencies.docker run -it --rm -v $PWD:/usr/src/app -w /usr/src/app node:16 npm install# Run the development serverdocker run -it --rm -v $PWD:/usr/src/app -w /usr/src/app -p 3000:3000 node:16 npm run dev# Build a production artifactdocker run -it --rm -v $PWD:/usr/src/app -w /usr/src/app node:16 npm run build# Run the production serverdocker run -it --rm -v $PWD:/usr/src/app -w /usr/src/app -p 3000:3000 node:16 npm run start

Hosting Next.js

A big pain point of javascript applications is time-to-meaningful-paint. That’s the time it takes in the browser for a javascript application to show something that’s meaningful and interactive to the end user. That’s because the experience is dependent on the resources of the visitor’s device which also has to wait for all the dependencies to download.

Hosting compatible JavaScript frameworks, like Next.js, serverside, allows you to pre-render JavaScript applications meaning the client browser can focus on painting immediately. This is what makes the production build in Next.js so fast.

At Acquia we host and support Node.js applications (like Next.js) optimized for working with a content backend API built on Drupal. If you’re interested to find out more, get in touch with one of our team.

Additional Resources

• Next.js on Acquia: Setting up the Acquia CMS Headless Starter Kit
• Next.js on Acquia: Customizing content types
• Acquia CMS Starter Kits on Github
• Next.js for Acquia CMS starter kit
• Acquia CMS Headless Starter Kit Documentation