DCloud.dev
Menu

Deploy to Production

Get your DCloud.dev-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:

Production Environment Variables
# Required
NEXT_PUBLIC_DRUPAL_BASE_URL=https://your-site.dcloud.dev
DRUPAL_GRAPHQL_URL=https://your-site.dcloud.dev/graphql
DRUPAL_JSONAPI_URL=https://your-site.dcloud.dev/jsonapi

# Optional
DRUPAL_PREVIEW_SECRET=your-preview-secret
DRUPAL_CLIENT_ID=your-client-id
DRUPAL_CLIENT_SECRET=your-client-secret

Deployment Options

Vercel

Deploy with zero configuration and automatic optimizations

Deployment Steps:

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

Features:

Automatic deploymentsPreview deploymentsEdge functionsAnalytics

Netlify

JAMstack deployment with build hooks and form handling

Deployment Steps:

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

Features:

Build hooksForm handlingSplit testingEdge functions

Self-hosted

Deploy to your own infrastructure with full control

Deployment Steps:

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

Features:

Full controlCustom configurationPrivate infrastructureCost 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 DCloud.dev Dashboard

Add the Vercel deploy hook URL to your DCloud.dev 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: {
    domains: ['your-site.dcloud.dev'],
  },
  experimental: {
    appDir: true,
  },
  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 DCloud.dev images

Monitoring & Analytics

Recommended Tools

Performance Monitoring

  • • Vercel Analytics
  • • Google PageSpeed Insights
  • • Web Vitals monitoring

Error Tracking

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