---
title: "Connect Next.js and Acquia CMS"
date: "2022-09-01T00:31:03+00:00"
summary:
image:
type: "article"
url: "/acquia-cloud-platform/help/90416-connect-nextjs-and-acquia-cms"
id: "18b8cc89-d630-4b7b-b25d-d1c68c03b128"
---

Table of contents will be added

Goal
----

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

Prerequisites
-------------

*   Access to Acquia Cloud IDE
    
*   An existing installation of Acquia CMS headless on Cloud IDE and Next.js on local machine. [See tutorial on settings up ACMS and Next.js](https://dev.acquia.com/blog/start-me-using-starter-kits-nextjs-and-acquia-cms).
    

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.  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
    
    ![Terminal displaying a command execution with a URL link for IDE sharing, highlighted by a red arrow.](https://acquia.widen.net/content/6a2d8b39-946a-4c78-9204-c6337853cdab/web/url_9df6a16ab9fd31040db8e42c1f03a322.png)
    
2.  Update .env.local on Next.js
    ----------------------------
    
    *   Edit the **.env.local** file in Next.js code
    *   Add env variable **DRUPAL\_CLOUD\_IDE\_SHARE\_CODE** with the value of IDE share code
    
    ![File explorer showing ".env.local" selected, displaying obscured Drupal authentication details in the code editor.](https://acquia.widen.net/content/130f3507-e1ff-4035-acf0-34c0a1f4344f/web/devportal_QAAAAABJRU.png)
    
3.  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: { 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', }, headers: { "cookie": 'share=' + process.env.DRUPAL_CLOUD_IDE_SHARE_CODE, }, // @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', },);
    
4.  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}`;