From 01701b2ecb7cd36e453dd643d952b9f91ff1116a Mon Sep 17 00:00:00 2001
From: Cody Olsen <stipsan@gmail.com>
Date: Tue, 15 Oct 2024 12:13:42 +0200
Subject: [PATCH] fix: regression in pages router on `next/dynamic` imports

---
 .../studio/client-component/NextStudioLazy.tsx | 18 ++++++++++++------
 .../client-component/VisualEditingLazy.tsx     | 18 ++++++++++++------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/packages/next-sanity/src/studio/client-component/NextStudioLazy.tsx b/packages/next-sanity/src/studio/client-component/NextStudioLazy.tsx
index 51db6389e8..3149d085a9 100644
--- a/packages/next-sanity/src/studio/client-component/NextStudioLazy.tsx
+++ b/packages/next-sanity/src/studio/client-component/NextStudioLazy.tsx
@@ -1,15 +1,21 @@
 /**
- * This file works around a new restriction in Next v15 where server components are not allowed
- * to use dynamic(() => import('...), {ssr: false})
- * only Client Components can set ssr: false.
+ *
+ * If pages router supported `next/dynamic` imports (it wants `next/dynamic.js`),
+ * or if turbopack in app router allowed `next/dynamic.js` (it doesn't yet)
+ * we could use `dynamic(() => import('...), {ssr: false})` here.
+ * Since we can't, we need to use a lazy import and Suspense ourself.
  */
 
-import dynamic from 'next/dynamic'
+import {lazy, Suspense} from 'react'
 
 import type {NextStudioProps} from './NextStudio'
 
-const NextStudioClientComponent = dynamic(() => import('./NextStudio'), {ssr: false})
+const NextStudioClientComponent = lazy(() => import('./NextStudio'))
 
 export function NextStudioLazyClientComponent(props: NextStudioProps): React.ReactNode {
-  return <NextStudioClientComponent {...props} />
+  return (
+    <Suspense fallback={null}>
+      <NextStudioClientComponent {...props} />
+    </Suspense>
+  )
 }
diff --git a/packages/next-sanity/src/visual-editing/client-component/VisualEditingLazy.tsx b/packages/next-sanity/src/visual-editing/client-component/VisualEditingLazy.tsx
index 2098dad8b7..b793aaea04 100644
--- a/packages/next-sanity/src/visual-editing/client-component/VisualEditingLazy.tsx
+++ b/packages/next-sanity/src/visual-editing/client-component/VisualEditingLazy.tsx
@@ -1,15 +1,21 @@
 /**
- * This file works around a new restriction in Next v15 where server components are not allowed
- * to use dynamic(() => import('...), {ssr: false})
- * only Client Components can set ssr: false.
+ *
+ * If pages router supported `next/dynamic` imports (it wants `next/dynamic.js`),
+ * or if turbopack in app router allowed `next/dynamic.js` (it doesn't yet)
+ * we could use `dynamic(() => import('...), {ssr: false})` here.
+ * Since we can't, we need to use a lazy import and Suspense ourself.
  */
 
-import dynamic from 'next/dynamic'
+import {lazy, Suspense} from 'react'
 
 import type {VisualEditingProps} from './VisualEditing'
 
-const VisualEditingClientComponent = dynamic(() => import('./VisualEditing'), {ssr: false})
+const VisualEditingClientComponent = lazy(() => import('./VisualEditing'))
 
 export function VisualEditingLazyClientComponent(props: VisualEditingProps): React.ReactNode {
-  return <VisualEditingClientComponent {...props} />
+  return (
+    <Suspense fallback={null}>
+      <VisualEditingClientComponent {...props} />
+    </Suspense>
+  )
 }