NextJS Preview Feature with Sanity Setup Help

Happy Friday! 😎

I'd be happy to help with the Next.js live preview feature! That guide you linked is indeed excellent for setting up Visual Editing with the Pages Router.

What specific part of the preview setup are you having trouble with? Here are some common areas where people need help:

Common issues with Next.js draft mode and live preview:

1. Draft mode not activating - Make sure your /api/draft route is properly validating the preview URL secret and setting the draft mode cookie correctly with res.setDraftMode({ enable: true }).

2. Preview not updating in real-time - You need both:

   • The useLiveQuery hook from next-sanity/preview wrapping your queries on the client side
   • The VisualEditing component from @sanity/visual-editing/next-pages-router added to your _app.tsx
   • The LiveQueryProvider wrapping your preview components

3. Stega encoding not appearing (no clickable overlays) - Ensure your Sanity client is configured with:

   • perspective: 'previewDrafts' when in draft mode
   • stega: { enabled: true, studioUrl: '/studio' }
   • A valid viewer token passed to the client

4. CORS errors - Don't forget to add your local development URL (like http://localhost:3000) to your project's CORS origins in sanity.io/manage.

5. Presentation tool not loading your preview - Check that the presentationTool plugin in your sanity.config.ts has the correct previewUrl.draftMode.enable path pointing to your draft API route (typically /api/draft).

The key architecture is:

• Server-side: Fetch with the correct perspective and stega encoding using a dynamically configured client
• Client-side: Use useLiveQuery to subscribe to content updates
• Studio: Presentation tool activates draft mode via your API route and communicates changes in real-time

The guide walks through creating separate "preview" components (like PostsPreview.tsx) that use useLiveQuery to wrap your regular components, which is a clean pattern for managing the preview state.

If you can share what specific error message or unexpected behavior you're seeing, I can give you more targeted help! Common symptoms include:

• "No posts found" in Presentation
• Changes not appearing as you type
• 401/403 errors in the console
• Overlays not appearing on content