Draft preview

Draft preview lets you check a saved entry on your own site before you publish it. In the Next.js App Router, you pass the page's searchParams to View. You don't need a separate preview page or Route Handler.

It doesn't mix drafts into lists. It covers single entries of List APIs and Object APIs. Unsaved edits aren't reflected, so save in the dashboard before you open it.

1. Set up the SDK

Generate lib/schema.ts and lib/client.ts with the CLI from the Quickstart. Set the API key in your site's server environment variable GENKO_API_KEY.

2. Pass searchParams on your usual detail page

import { client } from '@/lib/client';import { View, ViewItem, Error, Null } from '@genko-me/react/next';
type Props = {  params: Promise<{ id: string }>;  searchParams: Promise<Record<string, string | string[] | undefined>>;};
export default async function Page({ params, searchParams }: Props) {  const { id } = await params;  return <View api={client.blog} id={id} searchParams={searchParams}>    <h1><ViewItem id="title" /></h1>    <ViewItem id="body" />    <Error template />    <Null>Post not found.</Null>  </View>;}

For an Object API, omit id. View fetches a draft only when the URL has a draftKey. Even if you set a cache for the published view, preview fetches every time. An invalid key isn't hidden by switching to the published version.

If your page provides metadata or share buttons

View handles fetching and rendering inside the component. Set up the page's generateMetadata and share buttons separately. Don't reuse the preview URL for share links or the canonical URL.

If you write your own metadata, you can avoid putting the draft body or title in the OGP when searchParams has a draftKey. Return a preview title, robots: { index: false, follow: false }, and referrer: "no-referrer" instead. You can also hide share buttons that build the public URL while previewing.

3. Set the URL in the dashboard

In the API's Settings (/w/your-workspace/apis/blog/settings), set the "Preview URL template".

https://your-site.example/blog/{id}?draftKey={key}

The dashboard replaces {id} and {key}. If the URL already has a query, use &draftKey={key}. For local checks, replace the host with something like http://localhost:3000.

You don't need to write this URL setting again in client.ts. If you change the port or the path of your detail page, update the setting in the dashboard.

4. Save and open the preview

Save the entry in the dashboard and select Preview. The saved draft appears on the same detail page. The SDK shows a preview notice with an exit button, and sets noindex, nofollow and no-referrer on the page.

If you used "Save as draft" on a published entry, preview also shows the saved unpublished changes. Your regular site and the delivery API keep showing the published content. Input you haven't saved yet isn't reflected in preview.

The exit button removes draftKey from the URL and returns to the published view. An unpublished entry has no published version, so after you exit you get Null (or the 404 page if you set notFound).

You can adjust the notice with previewNotice={{ position: 'bottom', className: 'preview-bar' }}. To hide it, set previewNotice={false}. The notice uses the standard design regardless of the parent's unstyled. To remove the notice's styling, set previewNotice={{ unstyled: true }}.

If nothing shows up

A preview URL contains a key that can read drafts, so do not share it. Regenerate the preview key after publishing. If you fetch without the SDK, use the X-Draft-Key header described in the REST API.

If you regenerate the preview key in the entry's Settings, earlier preview URLs stop working. Preview also needs a valid API key with access to the target API. Referenced entries follow the regular publishing conditions, so previewing a parent entry doesn't expand draft references.

Preview a language version

For a multilingual API, choose a language and save before you open the preview. You can also use {lang} in the API settings' URL template.

https://your-site.example/blog/{id}?lang={lang}&draftKey={key}

{lang} becomes the selected language, and {key} becomes the preview key for that language version only. Pass lang from your site to the delivery API or the SDK. For example, for an English draft, pass lang=en&draftKey=.... A key for another language, or the main language's key, doesn't work. If the language version hasn't been created, create it first. During preview, only the versions published in that language are expanded for references. For the delivery conditions, see Multilingual content.