Iframe plugin previews flickering with App Router

Flickering in iframe previews with Next.js App Router is a common issue, and you're not alone in experiencing this! The flickering typically happens because the iframe is doing full page reloads instead of smooth content updates when you edit in Studio.

Why This Happens

The iframe pane plugin wasn't specifically designed for the modern App Router architecture, which can cause the preview to refresh the entire page when content changes rather than hot-reloading just the updated content. This creates the flickering effect you're seeing.

The Modern Solution: Use the Presentation Tool

Instead of the iframe pane plugin, I'd strongly recommend switching to the Presentation Tool with Visual Editing. This is Sanity's officially supported, modern approach for live previews and it's specifically built to work seamlessly with Next.js App Router.

The Presentation Tool gives you:

• No flickering - Smooth, real-time content updates without page refreshes
• Click-to-edit - Click any content element in the preview to jump straight to editing that field
• Better performance - Purpose-built for modern frameworks like Next.js App Router
• Draft Mode integration - Proper handling of draft content with Next.js conventions

Getting Started

1. Update your Studio to v3.40.0 or later:

npm install sanity@latest

2. Follow the Visual Editing with Next.js App Router guide to set it up

3. Configure the Presentation Tool in your sanity.config.ts:

import { presentationTool } from 'sanity/presentation'

export default defineConfig({
  plugins: [
    presentationTool({
      previewUrl: {
        previewMode: {
          enable: '/api/draft-mode/enable',
        },
      },
    }),
  ],
})

The Presentation Tool appears in your Studio toolbar and embeds your app's preview directly in the interface. It handles all the complexity of live updates and draft content properly, eliminating the flickering issues you're experiencing with the iframe plugin.

If you want to learn more, there's also a full Visual Editing with Next.js course that walks through the entire setup.