<> Step Code

The code for this specific step can be found on the following branch:

GitHub - szymonuryga/optimizely-masterclass-step-by-step at 17_enabling_draft_mode_on_localhost

Contribute to szymonuryga/optimizely-masterclass-step-by-step development by creating an account on GitHub.

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:

The draft mode cookie may not be properly set or recognized
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:

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

Benefits

By implementing this solution:

You can preview unpublished content during local development
Your content editors can use localhost:3000 as the preview URL in Optimizely
You maintain proper draft mode security in production environments
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.

Draft Mode on Localhost

Outline