Enabling Draft Mode on Localhost

When developing a Next.js application with Optimizely CMS, you'll often need to preview unpublished content during development. However, there's a common issue where Next.js's built-in draftMode().isEnabled always returns false on localhost during development, making it difficult to test preview functionality.

The Problem

In Next.js, draft mode is typically enabled through a special cookie that's set when accessing a draft API route. However, during local development:

1. The draft mode cookie may not be properly set or recognized
2. The following code will always return false on localhost:

const { isEnabled: isDraftModeEnabled } = await draftMode()

This makes it impossible to test preview functionality locally without publishing content.

The Solution: Always Enable Draft Mode in Development

To work around this issue, we can create a helper function that automatically enables draft mode when running in a development environment, while still respecting the actual draft mode status in production.

Step 1: Create a Draft Mode Helper

Create a new file at lib/utils/draft-mode.ts with the following content:

// lib/utils/draft-mode.ts
import { draftMode } from 'next/headers'
 
export async function checkDraftMode() {
  const { isEnabled: isDraftModeEnabled } = await draftMode()
  const isDevEnvironment = process.env.NODE_ENV !== 'production'
 
  // In development, allow access even if draft mode is not enabled
  // In production, enforce the draft mode check
  if (!isDraftModeEnabled && isDevEnvironment) {
    console.log('Draft mode is disabled in development, but allowing access')
    return true
  }
 
  return isDraftModeEnabled
}

This helper function:

• Checks if draft mode is enabled using Next.js's draftMode() function
• Determines if the application is running in development mode
• If in development and draft mode is not enabled, it returns true anyway
• In production, it strictly follows the actual draft mode status

Step 2: Update Your Pages to Use the Helper

Replace all instances of direct draft mode checks in your pages with the new helper:

Before:

const { isEnabled: isDraftModeEnabled } = await draftMode()

After:

import { checkDraftMode } from '@/lib/utils/draft-mode'

const isDraftModeEnabled = await checkDraftMode()

Step 3: Configure Optimizely Admin UI

To make the preview functionality work with your local development server:

1. In the Optimizely CMS Admin UI, navigate to the CMS configuration
2. Set the hostname to http://localhost:3000

Benefits

By implementing this solution:

1. You can preview unpublished content during local development
2. Your content editors can use localhost:3000 as the preview URL in Optimizely
3. You maintain proper draft mode security in production environments
4. You get a consistent development experience without having to publish content for testing

This approach makes the development workflow much smoother when working with Optimizely CMS and Next.js together.