feat: enable CSM powered live preview

sanity-io · Nov 16, 2023 · 6a079db · 6a079db · vercel · Nov 16, 2023
1 parent 7f7d35c
commit 6a079db
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 55 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,13 @@
+import 'tailwindcss/tailwind.css'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/app/studio/[[...index]]/Studio.tsx b/app/studio/[[...index]]/Studio.tsx
@@ -0,0 +1,8 @@
+'use client'
+
+import { NextStudio } from 'next-sanity/studio'
+import config from 'sanity.config'
+
+export default function Studio() {
+  return <NextStudio config={config} />
+}
diff --git a/app/studio/[[...index]]/page.tsx b/app/studio/[[...index]]/page.tsx
@@ -0,0 +1,19 @@
+/**
+ * This route is responsible for the built-in authoring environment using Sanity Studio v3.
+ * All routes under /studio will be handled by this file using Next.js' catch-all routes:
+ * https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes
+ *
+ * You can learn more about the next-sanity package here:
+ * https://github.com/sanity-io/next-sanity
+ */
+
+import Studio from './Studio'
+
+export const dynamic = 'force-static'
+
+export { metadata } from 'next-sanity/studio/metadata'
+export { viewport } from 'next-sanity/studio/viewport'
+
+export default function StudioPage() {
+  return <Studio />
+}
diff --git a/lib/sanity.api.ts b/lib/sanity.api.ts
@@ -28,6 +28,11 @@ export const previewSecretId: `${string}.${string}` = 'preview.secret'
 // Used to generate URLs for previewing your content
 export const DRAFT_MODE_ROUTE = '/api/draft'
 
+/**
+ * Used to configure edit intent links, for Presentation Mode, as well as to configure where the Studio is mounted in the router.
+ */
+export const studioUrl = '/studio'
+
 function assertValue<T>(v: T | undefined, errorMessage: string): T {
   if (v === undefined) {
     throw new Error(errorMessage)

diff --git a/lib/sanity.client.ts b/lib/sanity.client.ts
@@ -1,4 +1,10 @@
-import { apiVersion, dataset, projectId, useCdn } from 'lib/sanity.api'
+import {
+  apiVersion,
+  dataset,
+  projectId,
+  studioUrl,
+  useCdn,
+} from 'lib/sanity.api'
 import {
   indexQuery,
   type Post,
@@ -17,6 +23,9 @@ export function getClient(preview?: { token: string }): SanityClient {
     apiVersion,
     useCdn,
     perspective: 'published',
+    encodeSourceMap: preview?.token ? true : false,
+    studioUrl,
+    logger: console,
   })
   if (preview) {
     if (!preview.token) {

diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "date-fns": "2.30.0",
     "intl-segmenter-polyfill": "0.4.4",
     "next": "14.0.2",
-    "next-sanity": "5.5.10",
+    "next-sanity": "6.0.3",
     "next-sanity-image": "6.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/pages/studio/[[...index]].tsx b/pages/studio/[[...index]].tsx
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,7 +2,11 @@
   "compilerOptions": {
     "baseUrl": ".",
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -19,8 +23,16 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "strictNullChecks": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }