Preview drafts in Next.js

// lib/cosmic.ts
import { createBucketClient } from '@cosmicjs/sdk';

export function getCosmic(previewToken?: string) {
  return createBucketClient({
    bucketSlug: process.env.BUCKET_SLUG,
    readKey: process.env.BUCKET_READ_KEY,
    ...(previewToken ? { previewToken } : {}),
  });
}

// app/posts/[slug]/page.tsx
import { getCosmic } from '@/lib/cosmic';

export default async function Post({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ preview_token?: string }>;
}) {
  const { slug } = await params;
  const { preview_token: previewToken } = await searchParams;
  const cosmic = getCosmic(previewToken);
  const { object } = await cosmic.objects
    .findOne({ type: 'posts', slug })
    .status('any')
    .props(['title', 'slug', 'metadata']);

  if (!object) return null;
  return <h1>{object.title}</h1>;
}