chapter-three / next-drupal

Next.js for Drupal has everything you need to build a next-generation front-end for your Drupal site: SSG, SSR, and ISR, Multi-site, Authentication, Webforms, Search API, I18n and Preview mode (works with JSON:API and GraphQL).
https://next-drupal.org
MIT License
639 stars 178 forks source link
decoupled drupal drupal-modules graphql headless headless-cms jsonapi next-plugin nextjs
Next.js for drupal

Next.js for Drupal

Next-generation front-end for your Drupal site.

Demo

https://demo.next-drupal.org

Documentation

https://next-drupal.org

Deploy to Vercel

Deploy with Vercel

Example

A page with all "Article" nodes.

import { DrupalClient } from "next-drupal"

const drupal = new DrupalClient("https://cms.next-drupal.org")

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

export async function getStaticProps(context) {
  const articles = await drupal.getResourceCollectionFromContext(
    "node--article",
    context
  )

  return {
    props: {
      articles,
    },
  }
}

Supporting organizations

Development sponsored by Chapter Three

Contributing

If you're interested in contributing to Next.js for Drupal, please read the contributing guidelines before submitting a pull request.