Skip to main content

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.

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

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 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 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/drupal/client.server.ts: A utility that handles the connection to the Drupal GraphQL.
  • utils/drupal/calculate-path.server.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.

Also it will override the app/tailwind.css file to add some default styles.

info

The front end app is now ready to connect to your Drupal CMS. To do so, follow the connect guide.