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 DashboardProvision 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 decoupled.io will provision a fully configured Drupal instance with GraphQL, JSON:API, OAuth, and on-demand revalidation enabled out of the box.
Your credentials are ready automatically
When your site is provisioned, the Drupal admin homepage displays your pre-generated OAuth credentials and .env.local configuration with copy and download buttons — no manual setup needed.
Connect Your Next.js App
Set up your frontend to fetch content from Drupal
Option A: Copy from Drupal (Recommended)
Log into your Drupal admin panel — the homepage has your complete .env.local ready to copy or download with one click. You can also use the MCP get_oauth_credentials tool to retrieve your credentials programmatically.
Option B: Manual Configuration
Create a .env.local file in your Next.js project root:
# Required - Drupal backend URL NEXT_PUBLIC_DRUPAL_BASE_URL=https://your-site.decoupled.website NEXT_IMAGE_DOMAIN=your-site.decoupled.website # Authentication - OAuth credentials (from Drupal admin homepage) DRUPAL_CLIENT_ID=your_client_id DRUPAL_CLIENT_SECRET=your_client_secret # Required for On-demand Revalidation DRUPAL_REVALIDATE_SECRET=your_revalidate_secret
Set Up Your Frontend
Use our starter template to scaffold a Next.js project pre-configured for decoupled.io:
# Create a new project from the starter template npx degit nextagencyio/decoupled-starter my-app cd my-app # Install dependencies npm install # Add your .env.local (copy from Drupal admin or create manually) # Import the starter content types and sample content npm run setup-content # Start the development server npm run dev
Or deploy directly to Vercel: Deploy with Vercel
💡 Tip: The npm run setup-content command automatically detects your OAuth credentials from .env.local and imports the starter content types (Homepage, Article, Page) plus sample content directly to your Drupal site.
Fetch Content Example
async function getArticles() {
const res = await fetch(
process.env.NEXT_PUBLIC_DRUPAL_BASE_URL + '/jsonapi/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>
);
}💡 Pro Tip: Use the CLI
Prefer working from the terminal? Use our CLI to create and manage spaces instantly:
# Authenticate npx decoupled-cli@latest auth login # Create a space with AI-generated content npx decoupled-cli@latest spaces quick-start "blog about coffee"
🎉 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.