Preview URL aka Draft Mode

Docs

This page is static 12:59:04 PM

Enable | Disable

const Page = () => {
  const { isEnabled } = draftMode();

  return (
    <div className={'content-container'}>
      <h1>Preview URL aka Draft Mode</h1>
      <p>
        This page is {isEnabled ? 'dynamic' : 'static'}{' '}
        {new Date().toLocaleTimeString()}
      </p>

      <div>
        <NavLink href={'/api/enable-draft'}>Enable</NavLink> |{' '}
        <NavLink href={'/api/disable-draft'}>Disable</NavLink>
      </div>
    </div>
  );
};

app/api/enable-draft/route.ts

import { draftMode } from 'next/headers';

export async function GET(request: Request) {
  draftMode().enable();
  return new Response('Draft mode is enabled');
}

app/api/disable-draft/route.ts

import { draftMode } from 'next/headers';

export async function GET(request: Request) {
  draftMode().disable();
  return new Response('Draft mode is disabled');
}