next-drupal

Helpers for Next.js + Drupal.

Usage no npm install needed!

<script type="module">
  import nextDrupal from 'https://cdn.skypack.dev/next-drupal';
</script>

README

Next.js for drupal

Next.js for Drupal

Next-generation front end for your Drupal site.

Demo

Documentation

https://next-drupal.org

Example

A page with all "Article" nodes.

import { getResourceCollectionFromContext, DrupalNode } from "next-drupal"

interface BlogPageProps {
  nodes: DrupalNode[]
}

export default function BlogPage({ nodes }: BlogPageProps) {
  return (
    <div>
      {nodes?.length
        ? nodes.map((node) => (
            <div key={node.id}>
              <h1>{node.title}</h1>
            </div>
          ))
        : null}
    </div>
  )
}

export async function getStaticProps(
  context
): Promise<GetStaticPropsResult<BlogPageProps>> {
  const nodes = await getResourceCollectionFromContext<DrupalNode[]>(
    "node--article",
    context
  )

  return {
    props: {
      nodes,
      revalidate: 60,
    },
  }
}

Supporting organizations

Development sponsored by Chapter Three