Next.js

This guideline covers the basic integration to set up a Next.js project as the decoupled frontend framework for a Drupal CMS that uses GraphQL.

Requirements

• A Drupal set up for Decoupled connection using GraphQL, following the recipe installation guide with the drupal-decoupled-graphql-basic-recipe will give you all the necessary configuration:
  • The GraphQL Compose module installed and configured.
  • The simple OAuth module installed and configured.
  • The Article content type.
• Have Node.js installed on your machine. We recommend using the latest LTS version.

Note

This guide only works for the App Router version of Next.js.

Next, we need to set up a Next.js app. You can follow the Next.js to do so. But we encourage you to use the following command so you will have the necessary configuration for a smooth integration with Drupal.

npm

npx create-next-app@latest next-drupal --typescript --tailwind --eslint --app --import-alias "@/*"

The Drupal Decoupled scaffold package does not currently support the src/ directory. When prompted, select No.

Install dependencies

After going through the Next.js setup, move to the root of the project:

cd next-drupal

And let’s add some dependencies needed to interact with Drupal GraphQL endpoint.

npm

npm install urql graphql drupal-auth-client

• urql: A GraphQL client that will handle the connection to the Drupal GraphQL endpoint.
• graphql: The GraphQL library that will help us to write the queries.
• drupal-auth-client: A utility that will help us to authenticate with the Drupal GraphQL endpoint.

Scaffold the Next.js app

We will scaffold the Next.js app using the Drupal Decoupled scaffold package. Run the following command:

npm

npm create @octahedroid/drupal-decoupled@latest -- --frontend next

This will add the necessary files to connect to your Drupal Decoupled instance. It includes the following files:

• utils/client.ts: A utility that handles the connection to the Drupal GraphQL.
• app/utils/auth.ts: A utility that handles the authentication to the Drupal GraphQL endpoint.
• utils/calculate-path.ts: A utility that formats the path to the Drupal content to add preview tokens.
• app/[[...slug]]/page.tsx: A dynamic route that handles the rendering of the Drupal content.
• .env.example: An example of the environment variables needed to connect to the Drupal project.
• .env: Also will copy the .env.example file to .env file.

And will update the following files:

• app/global.css: Added base styles for reset some tailwind default styles.
• .gitignore: Added the .env file to the gitignore file.

Also will delete the app/page.tsx file, since we will use the [[...slug]]/page.tsx file to handle the rendering of the Drupal content.