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.