feat: use defineEnableDraftMode (#523)

README.md

@@ -49,9 +49,9 @@ The Studio connects to Sanity Content Lake, which gives you hosted content APIs
 | ------------------------------------------- | -------------------------------------------------------- |
 | `sanity.config.ts`                          |  Config file for Sanity Studio                           |
 | `sanity.cli.ts`                             |  Config file for Sanity CLI                              |
-| `/pages/studio/[[...index]].tsx`            |  Where Sanity Studio is mounted                          |
+| `/app/api/draft-mode/enable/route.ts`       |  Serverless route for triggering Draft mode              |
+| `/app/studio/[[...index]]/page.tsx`         |  Where Sanity Studio is mounted                          |
 | `/pages/api/revalidate.ts`                  |  Serverless route for triggering ISR                     |
-| `/pages/api/draft.ts`                       |  Serverless route for triggering Draft mode              |
 | `/schemas`                                  |  Where Sanity Studio gets its content types from         |
 | `/plugins`                                  |  Where the advanced Sanity Studio customization is setup |
 | `/lib/sanity.api.ts`,`/lib/sanity.image.ts` | Configuration for the Sanity Content Lake client         |

app/api/draft-mode/disable/route.ts

@@ -0,0 +1,8 @@
+import { draftMode } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+export async function GET() {
+  ;(await draftMode()).disable()
+
+  redirect('/')
+}

app/api/draft-mode/enable/route.ts

@@ -0,0 +1,19 @@
+import { apiVersion, dataset, projectId } from 'lib/sanity.api'
+import { createClient } from 'next-sanity'
+import { defineEnableDraftMode } from 'next-sanity/draft-mode'
+
+const token = process.env.SANITY_API_READ_TOKEN
+if (!token) {
+  throw new Error(
+    'A secret is provided but there is no `SANITY_API_READ_TOKEN` environment variable setup.',
+  )
+}
+const client = createClient({
+  projectId,
+  dataset,
+  apiVersion,
+  useCdn: false,
+  token,
+})
+
+export const { GET } = defineEnableDraftMode({ client })

components/AlertBanner.tsx

@@ -29,7 +29,7 @@ export default function Alert({
         <div className="py-2 text-center text-sm">
           {'Previewing drafts. '}
           <a
-            href="/api/disable-draft"
+            href="/api/draft-mode/disable"
             className="underline transition-colors duration-200 hover:text-cyan"
           >
             Back to published

lib/sanity.api.ts

@@ -22,7 +22,7 @@ export const apiVersion =
   process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2023-06-21'
 
 // Used to generate URLs for previewing your content
-export const DRAFT_MODE_ROUTE = '/api/draft'
+export const DRAFT_MODE_ROUTE = '/api/draft-mode/enable'
 
 /**
  * Used to configure edit intent links, for Presentation Mode, as well as to configure where the Studio is mounted in the router.

package.json

@@ -18,7 +18,6 @@
     "@sanity/client": "6.22.2",
     "@sanity/icons": "3.4.0",
     "@sanity/image-url": "1.0.2",
-    "@sanity/preview-url-secret": "2.0.0",
     "@sanity/vision": "3.61.0",
     "@sanity/visual-editing": "2.2.2",
     "@sanity/webhook": "4.0.4",

sanity.config.ts

@@ -3,7 +3,6 @@
  * This config is used to set up Sanity Studio that's mounted on the `/pages/studio/[[...index]].tsx` route
  */
 
-import { debugSecrets } from '@sanity/preview-url-secret/sanity-plugin-debug-secrets'
 import { visionTool } from '@sanity/vision'
 import {
   apiVersion,
@@ -52,8 +51,6 @@ export default defineConfig({
     settingsPlugin({ type: settingsType.name }),
     // Add an image asset source for Unsplash
     unsplashImageAsset(),
-    // The remaining plugins are only loaded in dev mode
-    process.env.NODE_ENV !== 'production' && debugSecrets(),
     // Vision lets you query your content with GROQ in the studio
     // https://www.sanity.io/docs/the-vision-plugin
     process.env.NODE_ENV !== 'production' &&