Complete in under 10 minutes

Getting Started Guide

Create your first Drupal site and connect it to Next.js. No DevOps experience required.

Create Your decoupled.io Account

Get started with our free tier - no credit card required

Head to the decoupled.io Dashboard and create your account. You'll get instant access to provision Drupal sites and manage your projects.

Open Dashboard

Provision Your Drupal Site

Launch a fully managed Drupal instance in seconds

Once logged in, click "Create New Site" in your dashboard. Choose your site name and region. decoupled.io will provision a secure Drupal instance with automatic security updates, daily backups, and GraphQL & JSON:API enabled.

Connect Your Next.js App

Set up your frontend to fetch content from Drupal

Environment Variables

Create a .env.local file in your Next.js project:

.env.local

NEXT_PUBLIC_DRUPAL_BASE_URL=https://your-site.decoupled.io
DRUPAL_GRAPHQL_URL=https://your-site.decoupled.io/graphql
DRUPAL_JSONAPI_URL=https://your-site.decoupled.io/jsonapi

Fetch Content Example

app/articles/page.tsx

async function getArticles() {
  const res = await fetch(process.env.DRUPAL_JSONAPI_URL + '/node/article', {
    next: { revalidate: 60 }
  });
  const data = await res.json();
  return data.data;
}

export default async function ArticlesPage() {
  const articles = await getArticles();
  return (
    <div>
      <h1>Articles</h1>
      {articles.map((article: any) => (
        <article key={article.id}>
          <h2>{article.attributes.title}</h2>
        </article>
      ))}
    </div>
  );
}

🎉 You're all set!

Your headless Drupal + Next.js site is ready. Content editors can manage content in Drupal, and it will automatically appear on your fast, modern frontend.