Blocks

How to fetch and render blocks.


You can use the `getResource` helper to fetch and render global blocks.

Example

pages/[...slug].tsx

import Link from "next/link"
import { getResource } from "next-drupal"
// node and blocks will be populated at build time by getStaticProps
export default function Page({ node, blocks }) {
return (
<>
<ExampleBlockComponent block={blocks.example} />
<article>
<h1>{node.title}</h1>
</article>
<FooterBlockComponent block={blocks.footer} />
</>
)
}
export async function getStaticPaths(context) {
return {
paths: await getPathsFromContext("node--page", context),
fallback: false,
}
}
export async function getStaticProps() {
const node = await getResourceFromContext("node--page", context)
// Fetch blocks.
const footerBlock = await getResource(
"block_content--basic",
"97ee0b84-309f-4b5e-b321-042018552428"
)
const exampleBlock = await getResource(
"block_content--basic",
"cf71d82d-42c8-4f5e-9952-da313a731a7f"
)
return {
props: {
node,
blocks: {
example: exampleBlock,
footer: footerBlock,
},
},
}
}