How to use Drupal CMS to manage many Next.js sites

Connecting Next.js as an anonymous consumer

1. Create a Next project with the next-acms starter kit

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

    

2. Edit drupal.ts

   Once the app has been created, edit lib/drupal.ts and comment out the authentication requirements:

   import { DrupalClient } from 'next-drupal';
   
   export const drupal = new DrupalClient(
     process.env.NEXT_PUBLIC_DRUPAL_BASE_URL,
     {
       previewSecret: process.env.DRUPAL_PREVIEW_SECRET,
       // auth: {
       //   clientId: process.env.DRUPAL_CLIENT_ID,
       //   clientSecret: process.env.DRUPAL_CLIENT_SECRET,
       //   scope:
       //     'administrator developer site_builder content_administrator content_author content_editor user_administrator headless',
       // },
       // @see https://github.com/vercel/next.js/discussions/32238
       // @see https://github.com/vercel/next.js/blob/d895a50abbc8f91726daa2d7ebc22c58f58aabbb/packages/next/server/api-utils/node.ts#L504
       forceIframeSameSiteCookie: process.env.NODE_ENV === 'development',
     },
   );
   

3. Create a Next.js site

   In Acquia CMS, create a Next.js site called app1_anon and export the environment variables into your Next.js app .env.local file.

    

    

    

    

    

4. Copy environment variables

   Once the Next.js site is created inside Acquia CMS, back on the Headless Dashboard you'll be able to access pre-generated environment variables the Next.js site will need to connect to Acquia CMS.

    

    

5. Paste environment variables in .env.local

   Now in your text editor, open the .env.local file (create it if it doesn't exist) and paste in the environment variables provided from Acquia CMS.

   Here you can leave DRUPAL_CLIENT_ID and DRUPAL_CLIENT_SECRET empty as we’re not using them for the unauthenticated access.

6. Run dev server

   Run npm run dev to see the Next.js for Acquia CMS starter kit connect to your Acquia CMS Headless instance and render the publicly accessible content.

   Image

   

    

Setting up Preview

1. Edit Next.js Entity Types

   From the Headless Dashboard, edit the entity type you want to expose site preview for content managers:

2. Test content preview

   Now from that node edit page you can use the Preview tab to preview content through your chosen Next.js site.

    

Connecting Next.js as an OAuth consumer (Client Credentials)

1. Create a Next project with the next-acms starter kit

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

   The next-acms starter kit default authentication system is OAuth so unlike the anonymous example, no modifications to lib/drupal.ts are required.

2. Setup OAuth Consumer

   In Acquia CMS Headless, you’ll need to create 

   1. A role that holds the permissions you which to grant the Next.js application (e.g. submit webform)
   2. A user to represent your Next.js application
   3. A consumer which contains the user you created, the roles you create as scopes and the consumer secret which becomes the DRUPAL_CLIENT_SECRET in the Next.js application.

   You can use the Next.js starter kit in Acquia CMS to handle these steps for you

3. Add consumer

4. Generate New Secret

    

5. Create Next.js site in Acquia CMS

    In Acquia CMS, create a Next.js site called app2_oauth and export the environment variables into your Next.js app .env.local file:

    

    

6. Paste environment variables in .env.local

7. Run dev server

   Run npm run dev to see the Next.js for Acquia CMS starter kit connect to your Acquia CMS Headless instance and render accessible content and conduct actions according to the permissions configured for the role.

Conclusion