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, 
      },
    },
  }
}
MenusViews