--- title: "Manage Many Next.js Sites in Acquia CMS" date: "2022-11-10T21:34:15+00:00" summary: image: type: "article" url: "/acquia-cloud-platform/help/90156-manage-many-nextjs-sites-acquia-cms" id: "0cc59d74-586e-4eb1-a2d8-841e50938c1b" --- Table of contents will be added Goal ---- Use Next for Drupal to connect multiple Next.js sites to Acquia CMS Prerequisites ------------- * Before proceeding you should already have a working install of Acquia CMS headless. * We highly recommend using the starter content to easily be able to work with the Next.js for Acquia CMS starter kit. * No Drupal or PHP expertise are required for this tutorial * You will need Node Package Manager (npm) * You will need familiarity with Next.js and able to edit typescript files. Overview -------- With the [Next](https://www.drupal.org/project/next) module in Drupal, you can connect multiple Next.js applications, built with [next-drupal](https://next-drupal.org/), to the same Drupal instance. This allows your Drupal CMS to act as a content service to many different sites. This is also known as an omnichannel architecture and can be used to: * Distribute common or shared content across multiple experiences (e.g. Mobile, TV, Kiosk and Website). * Reuse content across brands and geographies. * Connect applications with different roles (e.g. published view vs preview or staging vs production). In this tutorial, we’ll explore how to connect multiple Next.js sites to Acquia CMS using the Next.js module. If you haven’t worked with Acquia CMS Headless before, consider reading [this blog first on using the headless and next.js starter kits in Acquia CMS](https://dev.acquia.com/blog/start-me-using-starter-kits-nextjs-and-acquia-cms). In this tutorial, we’ll connect two different Next.js for Acquia CMS starter kits to the same Acquia CMS Drupal site each with a different authentication method. Connecting Next.js as an anonymous consumer ------------------------------------------- As of v1.3.0, the Next module in Drupal doesn’t require authentication and this is a simple way to build a Next.js site that can render public, published content from Drupal. 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. ![Web dashboard showing API URL, Next.js site details, and a button to add a new site.](https://acquia.widen.net/content/me2fsptabn/web/url_9898b7d89dd81e964c5a40cfad6309a1.webp?v=4150ac6a-7d67-497a-bbb7-c556df4338d6) ![Admin interface for adding a Next.js site with fields for label, base URL, preview URL, and preview secret.](https://acquia.widen.net/content/3se5erwbrt/web/url_6d49adb2e9329fc71148330ae9663294.webp?v=c654c657-96a1-439a-b82c-886899754e5d) 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. ![Dashboard showing two Next.js sites with IDs, names, URLs, and operations. A "Click here" tooltip with a green checkmark is visible.](https://acquia.widen.net/content/ehratndaar/web/url_f0b87ed2fc13114759f2fc2faf48be04.webp?v=ea857d10-bb62-4034-83ab-9ef723c0653a) ![Popup window displaying environment variables for Drupal configuration, with a "Copy" button and a link to documentation.](https://acquia.widen.net/content/aqdo8wywvo/web/url_49596b6364628ef627d177bbb30035f5.webp?v=8bf5df17-0423-423d-a663-dbc7b071292d) 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. ![Code editor showing environment variables for a Drupal project, with a warning about empty values and a notification for a new file.](https://acquia.widen.net/content/4sy2gv68hu/web/url_34589f14046fa2203f9b2caf359b342f.webp?v=9eec1dee-8192-4d8c-b00a-6a4b278657ac) 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. ![Webpage displaying "A headless Next.js site" with Acquia CMS branding, placeholder text, and featured events list with blue icons and headings.](https://acquia.widen.net/content/na6yfkkiob/web/url_e95064dc967140a14d775a2bdaddb5ce.png?v=132ba5a2-076d-479c-a8d6-603c971b99b8) Setting up Preview ------------------ Even though Next.js is talking to Drupal as an anonymous user, its still able to preview draft content for users authorised by Drupal. Heres how you can quickly set that up. 1. Edit Next.js Entity Types ------------------------- From the Headless Dashboard, edit the entity type you want to expose site preview for content managers: ![Web interface showing a list of Next.js entity types with options to edit or perform actions on each entry.](https://acquia.widen.net/content/l0h659j5ai/web/url_62f31263961e5c461f7bd788a3d9f905.webp?v=a80adef5-edbc-43f3-9358-c152453fb69f) ![Web interface for editing a "node.person" entity. Includes dropdowns for entity type and site resolver, with options to save or delete.](https://acquia.widen.net/content/hdat626hli/web/url_2c877ce6c927d5edcb0c98550ebf5ca3.webp?v=4d271c14-5f7c-4e59-8cde-2e5bd91605a6) 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. ![Website preview interface displaying a user profile for "Benicio Monserrate Rafael" with placeholder text and navigation options in a CMS environment.](https://acquia.widen.net/content/t43lsemb8d/web/url_c9b23a75934e6baec8be4132d1e09bf8.webp?v=8c25b5af-c73a-4398-9bc9-f02605053144) Connecting Next.js as an OAuth consumer (Client Credentials) ------------------------------------------------------------ Let's say you want to allow Next.js to submit forms (e.g. webforms) without allowing public access to also submit forms using the same API endpoints. This would be a scenario where you would want to provide your Next.js site with OAuth 2.0 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. Note You can use the Next.js starter kit in Acquia CMS to handle these steps for you ![API keys table showing labels, client IDs, and secret statuses with options to edit. A "Create new consumer" button is highlighted.](https://acquia.widen.net/content/h5vxtebmwd/web/url_2d0dd1ba99fc01d2507c3d67839696ce.webp?v=dc087a0c-dd7e-495c-9883-9713f8ec61c9) 3. Add consumer ------------ ![Admin interface for adding a consumer in Drupal, featuring fields for label, logo, description, and user selection options.](https://acquia.widen.net/content/kwscsaotm8/web/url_67818f71be26b88aea1887e351990605.webp?v=39af9648-3649-4cba-bef8-6e2e6b2495f2) 4. Generate New Secret ------------------- ![API keys management interface showing client IDs, secrets, and operations like edit, generate new secret, and delete. A dropdown menu is open.](https://acquia.widen.net/content/8xadsff52b/web/url_996a7b5a649784d5cefe53fb2203a400.webp?v=683dd924-1807-4e11-b7c4-45d0a7a18b9e) ![Dialog box displaying a newly generated consumer secret for an app, with a "Copy" button and update instructions for the .env file.](https://acquia.widen.net/content/px2cjqimnu/web/url_beb1343a897eec65b0762bc13108f595.webp?v=9f713dde-0cfd-46f1-9230-7ef90cb0ade8) 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: ![A web interface showing an "Edit app2_oauth" dialog with fields for label, base URL, preview URL, and preview secret.](https://acquia.widen.net/content/rlvu5ahb5p/web/url_ba9915b95f32edc374471d892e34ea60.webp?v=ee8dd51c-e73e-4f0b-baee-d4a1fccfe373) ![Dialog box displaying environment variables for Drupal setup, including required, optional, and authentication details, with instructions for .env file usage.](https://acquia.widen.net/content/lbclvs7ekv/web/url_2111e696c1e080f86da2778d958ca8f8.webp?v=cfcac721-9f8b-479b-92de-065e78b6fcdb) 6. Paste environment variables in .env.local ----------------------------------------- ![Code editor displaying environment variables for a Drupal site, with a green checkmark labeled "Consumer creds" indicating authentication details.](https://acquia.widen.net/content/ueqr2q3y0z/web/url_f6a86ee42eae74ae012d4d0bcfef90e8.webp?v=76af1bba-d36d-42b1-b223-fbc2a430f44c) 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. ![Webpage preview showing a profile for "Benicio Monserrate Rafael," Head of Operations, in Acquia CMS interface.](https://acquia.widen.net/content/rlqtiv8lgj/web/url_56c77ea739d1bb84c26e2cce5a920b36.webp?v=8ae0f30b-bd6e-4c7c-8231-79d0c01da627) Conclusion ---------- You can host multiple Next.js sites all pointed to the same Drupal CMS. This allows you to build a single content service that distributes content to multiple channels. In this tutorial we showed how we can distribute content to different frontends using different authentication mechanisms. Additional Resources -------------------- * [next-drupal auth examples with NextAuth.js.](https://github.com/chapter-three/next-drupal/tree/main/examples/example-auth)