chore: setup overlays in next-pages-router and next-app-router

apps/next-app-router/app/variants/live-store/PreviewProvider.tsx

@@ -2,6 +2,7 @@
 
 import { suspend } from 'suspend-react'
 import { LiveQueryProvider } from '@sanity/preview-kit'
+import VisualEditing from './VisualEditing'
 
 // suspend-react cache is global, so we use a unique key to avoid collisions
 const UniqueKey = Symbol('./sanity.client')
@@ -16,8 +17,11 @@ export default function PreviewProvider({
   const { client } = suspend(() => import('./sanity.client'), [UniqueKey])
   if (!token) throw new TypeError('Missing token')
   return (
+<>
     <LiveQueryProvider client={client} token={token} logger={console}>
       {children}
     </LiveQueryProvider>
+    <VisualEditing />
+    </>
   )
 }

apps/next-app-router/app/variants/live-store/VisualEditing.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { enableOverlays, HistoryAdapterNavigate } from '@sanity/overlays'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { useEffect, useRef, useState } from 'react'
+
+export default function VisualEditing() {
+  const router = useRouter()
+  const routerRef = useRef(router)
+  const [navigate, setNavigate] = useState<HistoryAdapterNavigate | undefined>()
+
+  useEffect(() => {
+    routerRef.current = router
+  }, [router])
+  useEffect(() => {
+    const disable = enableOverlays({
+      allowStudioOrigin: process.env.NEXT_PUBLIC_STUDIO_URL || 'http://localhost:3333',
+      history: {
+        subscribe: (navigate) => {
+          setNavigate(() => navigate)
+          return () => setNavigate(undefined)
+        },
+        update: (update) => {
+          switch (update.type) {
+            case 'push':
+              return routerRef.current.push(update.url)
+            case 'pop':
+              return routerRef.current.back()
+            case 'replace':
+              return routerRef.current.replace(update.url)
+            default:
+              throw new Error(`Unknown update type: ${update.type}`)
+          }
+        },
+      },
+    })
+    return () => disable()
+  }, [])
+
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  useEffect(() => {
+    if (navigate) {
+      navigate({
+        type: 'push',
+        url: `${pathname}${searchParams?.size ? `?${searchParams}` : ''}`,
+      })
+    }
+  }, [navigate, pathname, searchParams])
+
+
+
+  return null
+}

apps/next-app-router/app/variants/live-store/sanity.client.ts

@@ -5,7 +5,7 @@ export const client = createClient({
   dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || 'production',
   apiVersion: process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2022-11-15',
   useCdn: false,
-  studioUrl: 'https://preview-kit-test-studio.sanity.build/',
+  studioUrl: process.env.NEXT_PUBLIC_STUDIO_URL || 'http://localhost:3333',
   logger: console,
   encodeSourceMap: true,
   perspective: 'published',

apps/next-app-router/package.json

@@ -19,6 +19,7 @@
     "groqd": "0.15.10",
     "next": "14.0.2",
     "react": "18.2.0",
+    "@sanity/overlays": "2.0.0",
     "react-dom": "18.2.0",
     "server-only": "^0.0.1",
     "suspend-react": "^0.1.3",

apps/next-pages-router/package.json

@@ -17,6 +17,7 @@
     "bulma": "0.9.4",
     "groq": "3.19.3",
     "groqd": "0.15.10",
+    "@sanity/overlays": "2.0.0",
     "next": "14.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",

apps/next-pages-router/src/variants/live-store/PreviewProvider.tsx

@@ -1,5 +1,6 @@
 import { LiveQueryProvider } from '@sanity/preview-kit'
 import { client } from './sanity.client'
+import VisualEditing from './VisualEditing'
 
 export default function PreviewProvider({
   children,
@@ -10,8 +11,11 @@ export default function PreviewProvider({
 }) {
   if (!token) throw new TypeError('Missing token')
   return (
+<>
     <LiveQueryProvider client={client} token={token} logger={console}>
       {children}
     </LiveQueryProvider>
+    <VisualEditing />
+    </>
   )
 }

apps/next-pages-router/src/variants/live-store/VisualEditing.tsx

@@ -0,0 +1,46 @@
+import { HistoryAdapterNavigate, enableOverlays } from '@sanity/overlays'
+import { useRouter } from 'next/router'
+import { useEffect, useRef, useState } from 'react'
+
+
+export default function VisualEditing() {
+  const router = useRouter()
+  const routerRef = useRef(router)
+  const [navigate, setNavigate] = useState<HistoryAdapterNavigate | undefined>()
+
+  useEffect(() => {
+    routerRef.current = router
+  }, [router])
+  useEffect(() => {
+    if (!router.isReady) return
+    const disable = enableOverlays({
+      allowStudioOrigin: process.env.NEXT_PUBLIC_STUDIO_URL || 'http://localhost:3333',
+      history: {
+        subscribe: (navigate) => {
+          setNavigate(() => navigate)
+          return () => setNavigate(undefined)
+        },
+        update: (update) => {
+          switch (update.type) {
+            case 'push':
+              return routerRef.current.push(update.url)
+            case 'pop':
+              return routerRef.current.back()
+            case 'replace':
+              return routerRef.current.replace(update.url)
+            default:
+              throw new Error(`Unknown update type: ${update.type}`)
+          }
+        },
+      },
+    })
+    return () => disable()
+  }, [router.isReady])
+  useEffect(() => {
+    if (navigate) {
+      navigate({ type: 'push', url: router.asPath })
+    }
+  }, [navigate, router.asPath])
+
+  return null
+}

apps/next-pages-router/src/variants/live-store/sanity.client.ts

@@ -4,7 +4,7 @@ const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID || 'pv8y60vp'
 const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET || 'production'
 const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2022-11-15'
 const useCdn = true
-const studioUrl = 'https://preview-kit-test-studio.sanity.build/'
+const studioUrl = process.env.NEXT_PUBLIC_STUDIO_URL || 'http://localhost:3333'
 export const client = createClient({
   projectId,
   dataset,