Setting up live preview for sanity on next 13.4 using drafts mode

// resolveProductionUrl.ts
import type { SanityDocument } from 'sanity';

// Store secrets in environment variables, never in source code
const previewSecret = process.env.SANITY_PREVIEW_SECRET!;
const remoteUrl = process.env.NEXT_PUBLIC_SITE_URL!;
const localUrl = process.env.NEXT_PUBLIC_LOCAL_URL || 'http://localhost:3000';

function getSlug(slug: any) {
  if (!slug) return '/';
  if (slug.current) return slug.current;
  return '/';
}

export default function resolveProductionUrl(doc: SanityDocument) {
  const baseUrl =
    window.location.hostname === 'localhost' ? localUrl : remoteUrl;
  const previewUrl = new URL(baseUrl);
  const slug = doc.slug;
  previewUrl.pathname = `/api/draft`;
  previewUrl.searchParams.append(`secret`, previewSecret);
  previewUrl.searchParams.append(`slug`, getSlug(slug));
  return previewUrl.toString().replaceAll('%2F', '/');
}

// structure.ts
import { FaHome, FaFile, FaFileWord, FaQuestionCircle } from 'react-icons/fa';
import { StructureBuilder } from 'sanity/desk';
import { PreviewIFrame } from './component/preview';


export const structure = (S: StructureBuilder) =>
  S.list()
    .title('Content')
    .items([
      S.listItem()
        .title('Main Page')
        .icon(FaHome)
        .child(
          S.document()
            .views([
              S.view.form(),
              S.view
                .component(PreviewIFrame)
                .options({ test: 'ss' })
                .title('Preview'),
            ])
            .schemaType('mainPage')
            .documentId('mainPage'),
        ),
      S.divider(),
      S.documentTypeListItem('page').title('Page').icon(FaFile),
      S.documentTypeListItem('blog').title('Blog').icon(FaFileWord),
      S.documentTypeListItem('faq').title('FAQs').icon(FaQuestionCircle),
    ]);

export const defaultDocumentNode = (S: StructureBuilder) =>
  S.document().views([
    S.view.form(),
    S.view.component(PreviewIFrame).options({}).title('Preview'),
  ]);

// studio/component/preview.tsx
import {
  Box,
  Button,
  Card,
  Flex,
  Spinner,
  Text,
  ThemeProvider,
} from '@sanity/ui';
import { AiOutlineReload } from 'react-icons/ai';
import { BiLinkExternal } from 'react-icons/bi';
import { useEffect, useState, useRef } from 'react';
import resolveProductionUrl from '../resolveProductionUrl';

export function PreviewIFrame(props: any) {
  const { options, document } = props;
  const [id, setId] = useState(1);
  const { displayed } = document;
  const [displayUrl, setDisplayUrl] = useState('');
  const iframe = useRef<HTMLIFrameElement>(null);

  function handleReload() {
    if (!iframe?.current) return;
    setId(id + 1);
  }
  useEffect(() => {
    function getUrl() {
      const productionUrl = resolveProductionUrl(displayed) ?? '';
      setDisplayUrl(productionUrl);
    }
    getUrl();
  }, [displayed]);

  if (displayUrl === '')
    return (
      <ThemeProvider>
        <Flex padding={5} align="center" justify="center">
          <Spinner />
        </Flex>
      </ThemeProvider>
    );

  return (
    <ThemeProvider>
      <Flex direction="column" style={{ height: `100%` }}>
        <Card padding={2} borderBottom>
          <Flex align="center" gap={2}>
            <Box flex={1}>
              <Text size={0} textOverflow="ellipsis">
                {displayUrl}
              </Text>
            </Box>
            <Flex align="center" gap={1}>
              <Button
                fontSize={[1]}
                padding={2}
                icon={AiOutlineReload}
                title="Reload"
                text="Reload"
                aria-label="Reload"
                onClick={() => handleReload()}
              />

              <Button
                fontSize={[1]}
                icon={BiLinkExternal}
                padding={[2]}
                text="Open"
                tone="primary"
                onClick={() => window.open(displayUrl)}
              />
            </Flex>
          </Flex>
        </Card>
        <Card tone="transparent" padding={0} style={{ height: `100%` }}>
          <Flex align="center" justify="center" style={{ height: `100%` }}>
            <iframe
              key={id}
              ref={iframe}
              title="preview"
              style={{ width: '100%', height: `100%`, maxHeight: `100%` }}
              src={displayUrl}
              referrerPolicy="origin-when-cross-origin"
              frameBorder={0}
            />
          </Flex>
        </Card>
      </Flex>
    </ThemeProvider>
  );
}

// src/app/api/draft/route.ts
import { draftMode } from 'next/headers';

import { SANITY_PREVIEW_SECRET } from '~/config';
import { nativeRedirect } from '~/lib/utils';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const secret = searchParams.get('secret');
  const slug = searchParams.get('slug');

  // SANITY_PREVIEW_SECRET is the same secret from above resolve preview url.
  if (secret !== SANITY_PREVIEW_SECRET || !slug) {
    return new Response('Invalid token', { status: 401 });
  }

  // Validate slug to prevent open redirects - must be a relative path
  if (!slug.startsWith('/') || slug.startsWith('//') || slug.includes('://')) {
    return new Response('Invalid slug', { status: 400 });
  }

  const draft = await draftMode();

  draft.enable();

  return nativeRedirect(slug);
}

// src/app/api/disable-draft/route.ts
import { draftMode } from 'next/headers';

import { nativeRedirect } from '~/lib/utils';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);

  const draft = draftMode();

  draft.disable();

  return nativeRedirect('/');
  // there was a bug using redirect on this next version 
  // but now its patched up you can simply use 
  // redirect from "next/navigation";
}

// lib/utils

export const nativeRedirect = (path: string) =>
  new Response(null, {
    status: 307,
    headers: {
      Location: path,
    },
  });

import { Metadata } from 'next';
import { draftMode } from 'next/headers';
import { notFound } from 'next/navigation';
import { getMetaData } from '~/helper';
import { getClient } from '~/lib/sanity';
import { mainPageQuery } from '~/lib/sanity.query';
import { MainPage } from '~/schema';
import { MainPageBlock } from './component';
import { PreviewWrapper } from './preview';

const getMainPageData = (preview?: boolean) =>
  getClient(preview).fetch<MainPage>(mainPageQuery);

export const generateMetadata = async (): Promise<Metadata> => {
  const data = await getMainPageData();
  if (!data) return {};
  return getMetaData(data);
};

export default async function HomePageWrapper() {
  const { isEnabled } = draftMode();

  const mainPage = await getMainPageData(isEnabled);

  if (!mainPage) notFound();

  if (!isEnabled) return <MainPageBlock data={mainPage} />;

  return (
    <PreviewWrapper
      initialData={mainPage}
      query={mainPageQuery}
      queryParams={{}}
    />
  );
}