decoupled.io
Menu

Configuration

Configure your decoupled.io space for your Next.js frontend, including OAuth, environment variables, and caching.

Environment Variables

Required Variables

These environment variables connect your Next.js app to your decoupled.io Drupal backend. Copy them from your Drupal admin homepage or use the get_oauth_credentials MCP tool.

.env.local
# Drupal backend URL (your space URL)
NEXT_PUBLIC_DRUPAL_BASE_URL=https://your-space.decoupled.website

# Image domain for Next.js Image component
NEXT_IMAGE_DOMAIN=your-space.decoupled.website

# OAuth credentials for authenticated API access
DRUPAL_CLIENT_ID=your-client-id
DRUPAL_CLIENT_SECRET=your-client-secret

# Secret for on-demand revalidation webhooks
DRUPAL_REVALIDATE_SECRET=your-revalidate-secret

Where to Find Your Credentials

1

Drupal Admin Homepage

Log into your Drupal admin panel — credentials are displayed on the homepage with copy/download buttons.

2

CLI Command

npx decoupled-cli@latest spaces env SPACE_ID

3

MCP Tool

Ask your AI assistant: “Get OAuth credentials for space 42”

Pre-configured Features

Every decoupled.io space comes pre-configured with these features enabled. No manual setup required.

API Access

  • GraphQL API at /graphql
  • JSON:API at /jsonapi
  • OAuth 2.0 authentication
  • On-demand revalidation endpoint

Content Features

  • Media library with image optimization
  • Content moderation workflows
  • Revision history
  • Path aliases and redirects

API Endpoints

Available Endpoints

POST/graphql

GraphQL API for flexible, type-safe queries

GET/jsonapi/node/{type}

JSON:API for RESTful access with filtering and includes

POST/api/revalidate

On-demand revalidation for Next.js ISR

Caching

Built-in Caching

decoupled.io automatically handles caching at multiple levels. Your Next.js app controls frontend caching via ISR.

Drupal-side (Automatic)

  • Page and dynamic cache enabled
  • API response caching
  • Media/image optimization

Next.js-side (Your Control)

  • ISR with revalidate
  • On-demand revalidation via webhook
  • Edge caching via Vercel/Netlify

Recommended ISR Settings

app/articles/page.tsx
async function getArticles() {
  const res = await fetch(
    process.env.NEXT_PUBLIC_DRUPAL_BASE_URL + '/jsonapi/node/article',
    {
      next: { revalidate: 60 } // Revalidate every 60 seconds
    }
  );
  return res.json();
}

// Or use on-demand revalidation for instant updates
// Set up webhook in Drupal to call /api/revalidate on content change

Security

Platform Security

decoupled.io handles infrastructure security automatically. Focus on securing your frontend integration.

Managed by decoupled.io

  • SSL/TLS encryption
  • Security headers configured
  • Drupal security updates
  • Database encryption

Your Responsibility

  • Keep OAuth secrets secure
  • Use environment variables
  • Validate revalidation requests
  • Manage Drupal user access

Security Best Practices

  • •Never commit .env.local to version control
  • •Use DRUPAL_REVALIDATE_SECRET to verify webhook requests
  • •Rotate OAuth credentials if you suspect they've been exposed
  • •Use role-based permissions in Drupal to limit content access

Drupal Admin Settings

Configurable in Drupal Admin

These settings can be configured through the Drupal admin panel at /admin.

Content Settings

  • • Content types and fields
  • • Taxonomy vocabularies
  • • Media types and settings
  • • URL aliases and patterns

User Settings

  • • User roles and permissions
  • • Content moderation workflows
  • • Account settings
  • • OAuth consumers