Set Up Per-Document Preview

This guide shows you how to set up custom previews for each document in your project.

First of all, having completed the steps in Create the preview page
Add a conditional for each type: document you have created in Sanity:

defineConfig({
  document: {
    productionUrl: async (prev, context) => {
      const documentId = context?.document?._id?.replace('drafts.', '')
      const slug = (context?.document?.slug as { current?: string } | undefined)?.current ?? ''

      // Specific preview for a document called "projectsArchive"
      if (documentId === 'projectsArchive') {
        return `${previewUrl}/work/`
      }

      // Preview for "project" type documents
      if (context?.document?._type === 'project') {
        return `${previewUrl}/work/${slug}/`
      }

      // Default preview using the slug
      return slug ? `${previewUrl}/${slug}/` : `${previewUrl}`
    },
  },
})

Check the previews
- To verify the previews work correctly:
  1. Open a page or project from the Sanity manager.
  2. Click the three dots on the right.
  3. Select Open preview.
- If everything is set up correctly, the preview URL for that document will open.

Wiki LLOS&

Knowledge base — guides, notes and technical reference

Set Up Per-Document Preview