diff --git a/examples/cms-drupal/.env.local.example b/examples/cms-drupal/.env.local.example
new file mode 100644
index 0000000000000..6f3c4a77a734b
--- /dev/null
+++ b/examples/cms-drupal/.env.local.example
@@ -0,0 +1,6 @@
+NEXT_PUBLIC_DRUPAL_BASE_URL=http://localhost:8080
+NEXT_IMAGE_DOMAIN=localhost
+DRUPAL_SITE_ID=
+DRUPAL_CLIENT_ID=
+DRUPAL_CLIENT_SECRET=
+DRUPAL_PREVIEW_SECRET=
\ No newline at end of file
diff --git a/examples/cms-drupal/.gitignore b/examples/cms-drupal/.gitignore
new file mode 100644
index 0000000000000..1437c53f70bc2
--- /dev/null
+++ b/examples/cms-drupal/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/examples/cms-drupal/README.md b/examples/cms-drupal/README.md
new file mode 100644
index 0000000000000..7b27e17e005d3
--- /dev/null
+++ b/examples/cms-drupal/README.md
@@ -0,0 +1,51 @@
+# A statically generated blog example using Next.js and Drupal
+
+This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [Drupal](https://drupal.org/project/next) as the data source.
+
+## Demo
+
+### [https://cms-drupal.vercel.app](https://cms-drupal.vercel.app)
+
+## Deploy your own
+
+Once you have [configured the Next.js module for Drupal](https://next-drupal.org/guides/decoupled-drupal-nextjs) and have access to the environment variables you'll need, deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/cms-drupal&env=NEXT_PUBLIC_DRUPAL_BASE_URL,NEXT_IMAGE_DOMAIN,DRUPAL_SITE_ID,DRUPAL_FRONT_PAGE,DRUPAL_PREVIEW_SECRET,DRUPAL_NEXT_CLIENT_ID,DRUPAL_NEXT_CLIENT_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20ghost&envLink=https://vercel.link/cms-drupal-env)
+
+### Related examples
+
+- [WordPress](/examples/cms-wordpress)
+- [DatoCMS](/examples/cms-datocms)
+- [Sanity](/examples/cms-sanity)
+- [TakeShape](/examples/cms-takeshape)
+- [Prismic](/examples/cms-prismic)
+- [Contentful](/examples/cms-contentful)
+- [Strapi](/examples/cms-strapi)
+- [Agility CMS](/examples/cms-agilitycms)
+- [Cosmic](/examples/cms-cosmic)
+- [ButterCMS](/examples/cms-buttercms)
+- [Storyblok](/examples/cms-storyblok)
+- [Kontent](/examples/cms-kontent)
+- [Ghost](/examples/cms-ghost)
+- [GraphCMS](/examples/cms-graphcms)
+- [Blog Starter](/examples/blog-starter)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example cms-drupal cms-drupal-app
+# or
+yarn create next-app --example cms-drupal cms-drupal-app
+```
+
+## Setup Drupal
+
+See the Get Started guide [here](https://next-drupal.org/guides/decoupled-drupal-nextjs).
+
+#### Deploy from Our Template
+
+Alternatively, you can deploy using our template by clicking on the Deploy button below.
+
+[](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/cms-drupal&env=NEXT_PUBLIC_DRUPAL_BASE_URL,NEXT_IMAGE_DOMAIN,DRUPAL_SITE_ID,DRUPAL_FRONT_PAGE,DRUPAL_PREVIEW_SECRET,DRUPAL_NEXT_CLIENT_ID,DRUPAL_NEXT_CLIENT_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20ghost&envLink=https://vercel.link/cms-drupal-env)
diff --git a/examples/cms-drupal/components/alert.js b/examples/cms-drupal/components/alert.js
new file mode 100644
index 0000000000000..b924cb097f169
--- /dev/null
+++ b/examples/cms-drupal/components/alert.js
@@ -0,0 +1,42 @@
+import Container from './container'
+import cn from 'classnames'
+import { EXAMPLE_PATH } from '../lib/constants'
+
+export default function Alert({ preview }) {
+ return (
+
+
+
+ {preview ? (
+ <>
+ This page is a preview.{' '}
+
+ Click here
+ {' '}
+ to exit preview mode.
+
+ ) : (
+ <>
+ The source code for this blog is{' '}
+
+ available on GitHub
+
+ .
+
+ )}
+
+
+ under
+ {categories.edges.length > 0 ? (
+ categories.edges.map((category, index) => (
+
+ {category.node.name}
+
+ ))
+ ) : (
+ {categories.edges.node.name}
+ )}
+
+ )
+}
diff --git a/examples/cms-drupal/components/container.js b/examples/cms-drupal/components/container.js
new file mode 100644
index 0000000000000..fc1c29dfb0747
--- /dev/null
+++ b/examples/cms-drupal/components/container.js
@@ -0,0 +1,3 @@
+export default function Container({ children }) {
+ return {children}
+}
diff --git a/examples/cms-drupal/components/cover-image.js b/examples/cms-drupal/components/cover-image.js
new file mode 100644
index 0000000000000..176a870f81f80
--- /dev/null
+++ b/examples/cms-drupal/components/cover-image.js
@@ -0,0 +1,28 @@
+import cn from 'classnames'
+import Image from 'next/image'
+import Link from 'next/link'
+
+export default function CoverImage({ title, coverImage, slug }) {
+ const image = (
+
+ {slug ? (
+
+
{image}
+
+ ) : (
+ image
+ )}
+
{format(date, 'LLLL d, yyyy')}
+}
diff --git a/examples/cms-drupal/components/footer.js b/examples/cms-drupal/components/footer.js
new file mode 100644
index 0000000000000..da9eed88ec263
--- /dev/null
+++ b/examples/cms-drupal/components/footer.js
@@ -0,0 +1,30 @@
+import Container from './container'
+import { EXAMPLE_PATH } from '../lib/constants'
+
+export default function Footer() {
+ return (
+
+
+
+
+ Statically Generated with Next.js.
+
+
+
+
+ )
+}
diff --git a/examples/cms-drupal/components/header.js b/examples/cms-drupal/components/header.js
new file mode 100644
index 0000000000000..562e7e3eebb6a
--- /dev/null
+++ b/examples/cms-drupal/components/header.js
@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function Header() {
+ return (
+
+ Blog
+
+ .
+
+ )
+}
diff --git a/examples/cms-drupal/components/hero-post.js b/examples/cms-drupal/components/hero-post.js
new file mode 100644
index 0000000000000..c5aa6d0a76609
--- /dev/null
+++ b/examples/cms-drupal/components/hero-post.js
@@ -0,0 +1,45 @@
+import Avatar from '../components/avatar'
+import Date from '../components/date'
+import CoverImage from '../components/cover-image'
+import Link from 'next/link'
+
+export default function HeroPost({
+ title,
+ coverImage,
+ date,
+ excerpt,
+ author,
+ slug,
+}) {
+ return (
+
+
+ {coverImage && (
+
+
+
+ )
+}
diff --git a/examples/cms-drupal/components/intro.js b/examples/cms-drupal/components/intro.js
new file mode 100644
index 0000000000000..5931b3c5961bd
--- /dev/null
+++ b/examples/cms-drupal/components/intro.js
@@ -0,0 +1,28 @@
+import { CMS_NAME, CMS_URL } from '../lib/constants'
+
+export default function Intro() {
+ return (
+
+ )
+}
diff --git a/examples/cms-drupal/components/layout.js b/examples/cms-drupal/components/layout.js
new file mode 100644
index 0000000000000..99d95353131e0
--- /dev/null
+++ b/examples/cms-drupal/components/layout.js
@@ -0,0 +1,16 @@
+import Alert from '../components/alert'
+import Footer from '../components/footer'
+import Meta from '../components/meta'
+
+export default function Layout({ preview, children }) {
+ return (
+ <>
+
+
+ More Stories
+
+
+ {posts.map((node) => (
+
+ ))}
+
+ )
+}
diff --git a/examples/cms-drupal/components/post-body.js b/examples/cms-drupal/components/post-body.js
new file mode 100644
index 0000000000000..cc3a92b881e24
--- /dev/null
+++ b/examples/cms-drupal/components/post-body.js
@@ -0,0 +1,12 @@
+import styles from './post-body.module.css'
+
+export default function PostBody({ content }) {
+ return (
+
+ )
+}
diff --git a/examples/cms-drupal/components/post-body.module.css b/examples/cms-drupal/components/post-body.module.css
new file mode 100644
index 0000000000000..a6adbe02267c0
--- /dev/null
+++ b/examples/cms-drupal/components/post-body.module.css
@@ -0,0 +1,76 @@
+.content {
+ @apply text-lg leading-relaxed;
+}
+
+.content p,
+.content ul,
+.content ol,
+.content blockquote {
+ @apply my-6;
+}
+
+.content a {
+ @apply underline;
+}
+
+.content ul,
+.content ol {
+ @apply pl-4;
+}
+
+.content ul {
+ @apply list-disc;
+}
+
+.content ol {
+ @apply list-decimal;
+}
+
+.content ul > li > ul,
+.content ol > li > ol {
+ @apply my-0 ml-4;
+}
+
+.content ul > li > ul {
+ list-style: circle;
+}
+
+.content h2 {
+ @apply text-3xl mt-12 mb-4 leading-snug;
+}
+
+.content h3 {
+ @apply text-2xl mt-8 mb-4 leading-snug;
+}
+
+.content h4 {
+ @apply text-xl mt-6 mb-4 leading-snug;
+}
+
+.content pre {
+ @apply whitespace-pre overflow-x-auto p-4 text-sm leading-tight border border-gray-400 bg-gray-100;
+}
+
+.content code {
+ @apply text-sm;
+}
+
+.content figcaption {
+ @apply text-center text-sm;
+}
+
+.content blockquote {
+ @apply border-l-4 border-gray-500 bg-gray-200 italic ml-0 py-4 px-6;
+}
+
+.content blockquote p {
+ @apply mt-0;
+}
+
+.content blockquote cite {
+ @apply not-italic;
+}
+
+.content audio {
+ @apply w-full;
+}
diff --git a/examples/cms-drupal/components/post-header.js b/examples/cms-drupal/components/post-header.js
new file mode 100644
index 0000000000000..df099adb374ba
--- /dev/null
+++ b/examples/cms-drupal/components/post-header.js
@@ -0,0 +1,34 @@
+import Avatar from '../components/avatar'
+import Date from '../components/date'
+import CoverImage from '../components/cover-image'
+import PostTitle from '../components/post-title'
+import Categories from '../components/categories'
+
+export default function PostHeader({
+ title,
+ coverImage,
+ date,
+ author,
+ categories,
+}) {
+ return (
+ <>
+ {title}
+
+
+
+
+
+
+ Posted
+
+
+
+
+
+
+
+
+
+
+
+ Tagged
+ {tags.edges.map((tag, index) => (
+
+ {tag.node.name}
+
+ ))}
+
+
+
+
+ {router.isFallback ? (
+ Loading…
+ ) : (
+ <>
+
+
+
+ {post.title} | Next.js Blog Example with {CMS_NAME}
+
+
+
+
+ )
+}
+
+export async function getStaticProps(context) {
+ const post = await getResourceFromContext('node--article', context, {
+ params: {
+ include: 'field_image,uid,uid.user_picture',
+ },
+ })
+
+ let morePosts = []
+ if (post) {
+ morePosts = await getResourceCollectionFromContext(
+ 'node--article',
+ context,
+ {
+ params: {
+ include: 'field_image,uid,uid.user_picture',
+ sort: '-created',
+ 'filter[id][condition][path]': 'id',
+ 'filter[id][condition][operator]': '<>',
+ 'filter[id][condition][value]': post.id,
+ },
+ }
+ )
+ }
+
+ return {
+ props: {
+ preview: context.preview || false,
+ post,
+ morePosts,
+ },
+ }
+}
+
+export async function getStaticPaths(context) {
+ return {
+ paths: await getPathsFromContext('node--article', context),
+ fallback: true,
+ }
+}
diff --git a/examples/cms-drupal/pages/_app.js b/examples/cms-drupal/pages/_app.js
new file mode 100644
index 0000000000000..d56d9bf601a90
--- /dev/null
+++ b/examples/cms-drupal/pages/_app.js
@@ -0,0 +1,7 @@
+import '../styles/index.css'
+
+function MyApp({ Component, pageProps }) {
+ return
+