draftMode

draftMode est une fonction asynchrone qui vous permet d'activer et de désactiver le Mode Brouillon, ainsi que de vérifier si le Mode Brouillon est activé dans un Composant Serveur.

import { draftMode } from 'next/headers'

export default async function Page() {
  const { isEnabled } = await draftMode()
}

Référence

Les méthodes et propriétés suivantes sont disponibles :

Bon à savoir

• draftMode est une fonction asynchrone qui renvoie une promesse. Vous devez utiliser async/await ou la fonction use de React.
  • Dans la version 14 et antérieures, draftMode était une fonction synchrone. Pour assurer la compatibilité ascendante, vous pouvez toujours y accéder de manière synchrone dans Next.js 15, mais ce comportement sera déprécié à l'avenir.
• Une nouvelle valeur de cookie de contournement sera générée à chaque exécution de next build. Cela garantit que le cookie de contournement ne peut pas être deviné.
• Pour tester le Mode Brouillon localement via HTTP, votre navigateur devra autoriser les cookies tiers et l'accès au stockage local.

Exemples

Activation du Mode Brouillon

Pour activer le Mode Brouillon, créez un nouveau Gestionnaire de Route et appelez la méthode enable() :

import { draftMode } from 'next/headers'

export async function GET(request: Request) {
  const draft = await draftMode()
  draft.enable()
  return new Response('Le mode brouillon est activé')
}

Désactivation du Mode Brouillon

Par défaut, la session du Mode Brouillon se termine lorsque le navigateur est fermé.

Pour désactiver manuellement le Mode Brouillon, appelez la méthode disable() dans votre Gestionnaire de Route :

import { draftMode } from 'next/headers'

export async function GET(request: Request) {
  const draft = await draftMode()
  draft.disable()
  return new Response('Le mode brouillon est désactivé')
}

Envoyez ensuite une requête pour invoquer le Gestionnaire de Route. Si vous appelez la route en utilisant le composant <Link>, vous devez passer prefetch={false} pour éviter de supprimer accidentellement le cookie lors du préchargement.

Vérification de l'activation du Mode Brouillon

Vous pouvez vérifier si le Mode Brouillon est activé dans un Composant Serveur avec la propriété isEnabled :

import { draftMode } from 'next/headers'

export default async function Page() {
  const { isEnabled } = await draftMode()
  return (
    <main>
      <h1>Mon article de blog</h1>
      <p>Le Mode Brouillon est actuellement {isEnabled ? 'Activé' : 'Désactivé'}</p>
    </main>
  )
}

Historique des versions