Configuration

Initialization

To create a new DrupalClient, use the following initialization:

import { DrupalClient } from "next-drupal"

const drupal = new DrupalClient(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL)

Where NEXT_PUBLIC_DRUPAL_BASE_URL is the URL to your Drupal site defined as an enviroment variable.

NEXT_PUBLIC_DRUPAL_BASE_URL=http://example.com

Options

Additional options can be passed during initialization to customize the behaviors of the client.

apiPrefix

• Default value: /jsonapi
• Required: No

The JSON:API prefix to use. If you are using the JSON:API Extras module, you can customize the JSON:API prefix and set the custom value here.

new DrupalClient(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
  apiPrefix: "/api",
})

frontPage

• Default value: /home
• Required: No

Use this to set the path for your front page. This path will resolve to / on your Next.js site.

new DrupalClient(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
  frontPage: "/front",
})

auth

• Default value: null
• Required: No

Override the default auth. You can use this to implement your own custom auth.

You can find more info about using a custom auth here.

serializer

• Default value: Built-in
• Required: No

Override the default data serializer. You can use this to add your own JSON:API data deserializer.

import { Deserializer } from "jsonapi-serializer"

const customSerializer = new Deserializer({
  keyForAttribute: "camelCase",
})

new DrupalClient(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
  serializer: customSerializer,
})

You can find more info about using a custom serializer here.

fetcher

• Default value: fetch
• Required: No

Override the default fetcher.

import crossFetch from "cross-fetch"

const customFetcher = (url, options) => {
  const { withAuth, ...opts } = options

  if (withAuth) {
    // Make additional requests to fetch a bearer token
    // Or any other Authorization headers.
  }

  return crossFetch(url, {
    ...opts,
  })
}

new DrupalClient(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
  fetcher: customFetcher,
})

You can find more info about using a custom fetcher here.

cache

• Default value: null
• Required: No

Implement a custom cache for caching data during builds.

import { DataCache } from "next-drupal"
import Redis from "ioredis"

const redis = new Redis(process.env.REDIS_URL)

export const redisCache: DataCache = {
  async set(key, value) {
    return await redis.set(key, value)
  },

  async get(key) {
    return await redis.get(key)
  },
}

new DrupalClient(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
  cache: redisCache,
})

You can find more info about using a custom cache here.

logger

• Default value: console
• Required: No

Implement a custom logger. You can use this to send logs to a third-party service.

withAuth

• Default value: false
• Required: No

Set whether the client should use authenticated requests by default. If set to true, all calls to Drupal will use the configured authentication.

useDefaultResourceTypeEntry

• Default value: false
• Required: No

By default, the client will make a request to JSON:API to retrieve the index.

If your resources follow the entity_type--bundle naming convention, you can safely turn this off and use the default entry point from the resource name.

previewSecret

• Default value: null
• Required: No

The secret to use for preview mode.

headers

• Default value: { "Content-Type": "application/vnd.api+json", Accept: "application/vnd.api+json" }
• Required: No

Set custom headers for the fetcher.

new DrupalClient(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
  headers: {
    "Content-Type": "application/json",
  },
})

accessToken

• Default value: null
• Required: No

A long-lived access token you can set directly on the client.

forceIframeSameSiteCookie

• Default value: false
• Required: No

If you're running your site in development and the host address is different from the iframe preview, you might run into issues with SameSite cookies.

You can use this option to force the cookie to be set to SameSite=None,Secure in development.

export const drupal = new DrupalClient(
  process.env.NEXT_PUBLIC_DRUPAL_BASE_URL,
  {
    forceIframeSameSiteCookie: process.env.NODE_ENV === "development",
  }
)

For more info see: https://github.com/vercel/next.js/discussions/32238

debug

• Default value: false
• Required: No

Use this to turn on the built-in logger. If you would like to replace with your own logger, see #logger .