Acquia Developer Portal Logo

Connect Next.js installed on local machine to the Acquia CMS installed on Acquia Cloud IDE

  • Last updated
  • 1 minute read

Goal

In this tutorial, you’ll connect Next.js installed on local machine to the Acquia CMS installed on Acquia Cloud IDE.

Prerequisites

Overview

Acquia Cloud IDE web url is SSO protected and thus accessing the IDE web url will not work and will require some authorization. This means OOTB setup that works when both Acquia CMS and Next.js installed on local machine, will not work when Acquia CMS is installed on Acquia Cloud IDE and Next.js on local machine

This tutorial will show you how to connect Acquia CMS installed on Cloud IDE while Next.js running on local machine

  1. Create a new user and assign "Headless"

    • Create a new user in the Drupal and assign the Headless role to this user
    • Keep a note of the username and password of this user

  2. Add the created user to the scope of the "Headless" consumer

    As part of Next.JS setup, a consumer was created Headless Site 1. 

    • Visit /admin/config/services/consumer url and edit the consumer
    • In this consumer add the user created in Step-1 to the scope of this consumer

     

    If don't want to modify existing consumer, then - create a new consumer and add the user created to the scope of this consumer and update the .env.local file of Next.js app with the new client id and client secret

  3. Get the Share code of Acquia Cloud IDE

    • Run ACLI command acli ide:share on Cloud IDE to get the shareable IDE url
    • Copy the share code from the shareable IDE url

  4. Update .env.local on Next.js

    • Edit the .env.local file in Next.js code
    • Add env variable DRUPAL_AUTH_USERNAME with the value as username of the user created in Step-1
    • Add env variable DRUPAL_AUTH_PASSWORD with the value as password of the user created in Step-1
    • Add env variable DRUPAL_CLOUD_IDE_SHARE_CODE with the value of IDE share code got on Step-3

  5. Update Next.js Drupal client

    • Edit lib/drupal.ts file of the Next.js app
    • Copy and Paste the below code to the file
    import { DrupalClient } from 'next-drupal';

export const drupal = new DrupalClient(
   process.env.NEXT_PUBLIC_DRUPAL_BASE_URL,
   {
      previewSecret: process.env.DRUPAL_PREVIEW_SECRET,
      auth: {
         username: process.env.DRUPAL_AUTH_USERNAME,
         password: process.env.DRUPAL_AUTH_PASSWORD,
      },
      headers: {
         "cookie": 'share=' + process.env.DRUPAL_CLOUD_IDE_SHARE_CODE,
      },
       withAuth: true,
       // @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',
     },
);

  6. Enable the Drupal basic_auth module

    Run the below command on Drupal on Cloud IDE

    drush pm:enable basic_auth

  7. Run "npm run dev" command

    Run npm run dev command and check the site working fine with connecting to Acquia CMS on Cloud IDE.

After all the steps, images are still not showing properly.

To fix the image issue -

  • Edit lib/absolute-url.ts in Next.js app code
  • Update the function absoluteURL() to return the below value
return `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}${uri}?share=${process.env.DRUPAL_CLOUD_IDE_SHARE_CODE}`;

 

Note - Once https://github.com/chapter-three/next-drupal/issues/285 is fixed, we don't need to update the Auth from Oauth2 to Basic Oauth

Similar Tutorials