Setting the file. One moment.
Chapter 08 · Contentful Next.js
Subchapter 8.2
references/preview-and-draft-mode.mdMarkdown2 KBView on GitHub
Use this pattern when editors need to preview unpublished content in Next.js.
environment set to a stable alias (for example master).// app/blog/[slug]/page.tsx
import { draftMode } from "next/headers";
import { getEntryById } from "@/lib/contentful/queries";
export default async function Page({ params }: { params: { slug: string } }) {
const { isEnabled } = draftMode();
const entry = await getEntryById(params.slug, isEnabled);
return <main>{entry?.fields?.title as string}</main>;
}If using GraphQL:
preview argument in the query when Draft Mode is on,When hosted on Vercel, use the official Vercel/Next.js guidance and toolkit route handlers for draft activation.
https://www.contentful.com/developers/docs/tools/vercel/content-source-maps-with-vercel/https://www.contentful.com/developers/docs/tools/vercel/vercel-nextjs/https://www.contentful.com/developers/docs/tools/vercel/vercel-nextjs/using-draft-mode-to-fetch-unpublished-content-from-contentfuls-apis/https://www.contentful.com/developers/docs/concepts/environment-aliases/