---
title: "Starter Kits with Next.js & Acquia CMS"
date: "2022-11-30T17:04:18+00:00"
summary:
image:
type: "article"
url: "/acquia-cloud-platform/help/91351-starter-kits-nextjs-acquia-cms"
id: "5f8da4cc-5777-4ad1-845c-86fddd64ef6f"
---

Table of contents will be added

Starter kits are a new concept introduced in Acquia CMS v2 we use for getting started quickly with Next.js. You can [learn more about starter kits and the composable architecture that powers them here](https://dev.acquia.com/blog/what-starter-template-drupal). In this post, we'll focus specifically on where the starter kits concepts are used to create a quick start with Acquia CMS and Next.js

Acquia CMS Starter Kit
----------------------

First up is the Acquia CMS starter kit project. Its a PHP composer library that provides a symfony CLI command called `acms`. It is not a Drupal module and will install into Composer's vendor directory:

    composer require acquia/acquia-cms-starterkit

Once added, you can interact with it through a console tool to initiate a Drupal starter kit.

Acquia CMS Headless Starter Kit
-------------------------------

Now lets run the `acms:install` command to execute a starter kit.

    
    ./vendor/bin/acms acms:install
    
    

This will ask you several questions about the starter kit you want to start from and any add-ons you want to add in:

    Please choose bundle from one of the above use case [acquia_cms_minimal]:
    
     > acquia_cms_headless
    
    
     Do you want to include Demo Content (yes/no) ? [no]:
    
     > yes

Then the tool will:

*   Use Composer to add the required dependencies to your project.
*   Install Drupal and the required modules

Some of the dependencies may also preconfigure the way certain modules work.

Now with your site installed, you can login and look around. The next starter kit we want to look at is in the **Acquia CMS Tour** module.

Acquia CMS Tour: Get Started
----------------------------

Now logged into CMS, checkout the Tour from the admin navigation and click on Get Started.

![Welcome page of Acquia CMS with a brief description, features list, and a "Get started" button highlighted for a guided tour.](https://acquia.widen.net/content/00ad277d-cd0c-4039-a1f1-4b25c3049425/web/url_bca22ead64e0122f986c9ad37b20a792.png)

Headless mode (optional)
------------------------

Under the headless dropdown you'll see an option to enable _**headless mode**_ - this is not a starter kit per-se but instead a way for Drupal to operate as purely a headless CMS. Since it is a mode and not a starter kit, it can be turned off and on again.

![Options for enabling Next.js starter kit and Headless mode in a Drupal interface, with checkboxes and save/ignore buttons.](https://acquia.widen.net/content/7c1573e8-a19d-4a23-843b-9dfc778609e6/web/url_d24aeb6a935da7c786b0527e72a503d7.png)

Next.js Starter Kit
-------------------

Above the headless mode option, you'll see the Next.js starter kit checkbox. This will pre-configure Drupal to be connected with a local Next.js app - perfect for getting started on a local development environment.

![CMS dashboard interface showing configuration options for enabling Next.js starter kit and Headless mode with save and ignore buttons.](https://acquia.widen.net/content/691b085b-056d-4c24-ae68-1529b0c436a6/web/url_041c6333fbe219543f3ab0a5bfcd66ed.png)

This one step does 9 different things for you:

1.  Ensures your OAuth SSL keys are present and if not, generates them for you.
2.  Creates a user for your Next.js site
3.  Creates a role for your Next.js user
4.  Creates a Consumer and assigns the Next.js user and role to the consumer
5.  Generates a Consumer secret
6.  Creates a Next.js site configuration entity
7.  Generates your Next.js preview secret
8.  Configures your content types for Preview with the Next.js site created.
9.  Displays the environment variables your Next.js app will need to connect to Drupal.

![CMS Dashboard displaying a status message with environment variables for a Next.js application setup.](https://acquia.widen.net/content/8046c496-6684-4711-b64f-dff7cae67279/web/url_ce5a8122612657c41a2b69925e7011b5.png)

Now go ahead and copy these credentials somewhere safe. The DRUPAL\_CLIENT\_SECRET cannot be retrieved from Drupal because it is stored as an encrypted value (like passwords are). So if you forget or loose this value, you'll need to head to the API Dashboard later to reset your consumer secret.

Creating a new Next.js site
---------------------------

Now that the CMS is configured, we can kick start our Next.js project with the next-acms starter kit.

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

Note

Note: We recommend Node 16 or later.

Now in your new Next.js application, copy the `.env.example` file and replace the contents with those from Acquia CMS:

    cp .env.example .env.local

Finally, run the development server, which should spin up on localhost:3000 and visit the site - you should see a Next.js application pulling content from Acquia CMS!

    npm run dev

![Webpage displaying "A headless Next.js site" with Acquia CMS logo and placeholder text. Features two event listings with images and headings.](https://acquia.widen.net/content/d4cddc1e-38f0-4c70-9872-7a0c4964fb4c/web/url_245299ca11ffe29328200cbf21d9caa4.png)

Learn more
----------

Tutorials are available and free on

*   [Next.js on Acquia: Setting up Acquia CMS](https://dev.acquia.com/tutorial/nextjs-acquia-setting-acquia-cms)
*   [Next.js on Acquia: Next.js startkit for Acquia CMS](https://dev.acquia.com/tutorial/nextjs-acquia-nextjs-startkit-acquia-cms)
*   [Next.js on Acquia: Customizing content types](https://dev.acquia.com/tutorial/nextjs-acquia-customizing-content-types)

Get the source code
-------------------

*   [Next.js starter kit for Acquia CMS on Github](https://github.com/acquia/next-acms)
*   [Acquia Drupal recommended project](https://github.com/acquia/drupal-recommended-project)

Collaborate with the community!
-------------------------------

*   [next-acms issue queue](https://github.com/acquia/next-acms/issues)
*   [Acquia CMS headless issue queue](https://github.com/acquia/acquia_cms_headless)
*   [#nextjs on Slack](https://drupal.slack.com/archives/C01E36BMU72)