Redirects

Handling redirects from the Redirect module.

This guide uses translatedPathFromContext which is available in next-drupal ^1.1.0.

Next.js

To use redirects in Next.js you can configure a redirects key in next.config.js.

next.config.js

module.exports = {
  async redirects() {
    return [
      {
        source: "/about",
        destination: "/",
        permanent: true,
      },
    ]
  },
}

Redirect Module

To handle redirects coming from Drupal (redirect module), you can use translatedPathFromContext.

Here's how you can handle redirect in getStaticProps.

pages/[...slug].tsx

import { DrupalNode } from "next-drupal"


export async function getStaticProps(
  context
): Promise<GetStaticPropsResult<NodePageProps>> {
  // Get information about the path.
  const path = await drupal.translatePathFromContext(context)


  if (!path) {
    return {
      notFound: true,
    }
  }


  // Check for redirect.
  if (path.redirect?.length) {
    const [redirect] = path.redirect
    return {
      redirect: {
        destination: redirect.to,
        permanent: redirect.status === "301",
      },
    }
  }


  // No redirect. Fetch the resource for this type.
  const resource = await drupal.getResourceFromContext<DrupalNode>(
    path,
    context
  )
}

With fallback: "blocking" in getStaticPaths, this will cache and handle redirects configured in Drupal and still work with incremental static regeneration.

In multilingual setup you may need to specify pathPrefix option for translatePathFromContext for default locale. In some cases Drupal can't find a matching redirect for path without explicit locale prefix.

// Get information about the path.
const path = await drupal.translatePathFromContext(context, {
  pathPrefix: context.locale === context.defaultLocale ? context.locale : "/",
})
WebformSearch API