decoupled.io

Deploy to Production

Get your decoupled.io-powered Next.js application live with automated deployments and global performance.

Environment Variables

Before deploying, make sure to configure these environment variables in your hosting platform:

# Required - Drupal backend URL
NEXT_PUBLIC_DRUPAL_BASE_URL=https://your-space.decoupled.website
NEXT_IMAGE_DOMAIN=your-space.decoupled.website

# OAuth credentials (from Drupal admin homepage)
DRUPAL_CLIENT_ID=your-client-id
DRUPAL_CLIENT_SECRET=your-client-secret

# On-demand revalidation secret
DRUPAL_REVALIDATE_SECRET=your-revalidate-secret

Deployment Options

Vercel

Deploy with zero configuration and automatic optimizations.

Deployment Steps:

  1. Connect your GitHub repository to Vercel
  2. Add environment variables in Vercel dashboard
  3. Deploy automatically on every push to main branch

Features: Automatic deployments, Preview deployments, Edge functions, Analytics

Netlify

JAMstack deployment with build hooks and form handling.

Deployment Steps:

  1. Connect your repository to Netlify
  2. Configure build settings and environment variables
  3. Set up webhooks for content updates

Features: Build hooks, Form handling, Split testing, Edge functions

Self-hosted

Deploy to your own infrastructure with full control.

Deployment Steps:

  1. Build your Next.js application
  2. Configure your web server (Nginx, Apache)
  3. Set up SSL certificates and security headers

Features: Full control, Custom configuration, Private infrastructure, Cost optimization

Automated Deployments with Webhooks

Set up webhooks to automatically rebuild your site when content changes in Drupal.

Vercel Deploy Hook Example

  1. Create Deploy Hook in Vercel -- Go to your Vercel project settings > Git > Deploy Hooks and create a new hook.
  2. Add Webhook in decoupled.io Dashboard -- Add the Vercel deploy hook URL to your decoupled.io site webhooks.
  3. Test the Integration -- Update content in Drupal and verify your site rebuilds automatically.

Performance Optimization

Next.js Configuration

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*.decoupled.website',
      },
    ],
  },
  async rewrites() {
    return [
      {
        source: '/sitemap.xml',
        destination: '/api/sitemap',
      },
    ]
  },
}

module.exports = nextConfig

Caching Strategy

  • Static Generation -- Use ISR for content that changes infrequently
  • CDN Caching -- Leverage edge caching for global performance
  • Image Optimization -- Use Next.js Image component with decoupled.io images

Monitoring & Analytics

Performance Monitoring:

  • Vercel Analytics
  • Google PageSpeed Insights
  • Web Vitals monitoring

Error Tracking:

  • Sentry for error monitoring
  • LogRocket for session replay
  • Custom error boundaries