Next and next sanity fetching and preview updates

app/(site)/[locale]/[...slug]/page.tsx

@@ -5,7 +5,6 @@ import ProductPagePreview from '@/components/pages/product-page-preview';
 import SearchPage from '@/components/pages/search-page';
 import SearchPagePreview from '@/components/pages/search-page-preview';
 import SinglePage from '@/components/pages/single-page';
-// import PreviewProvider from '@/components/preview-provider';
 import SinglePagePreview from '@/components/pages/single-page-preview';
 import getQueryFromSlug from '@/helpers/get-query-from-slug';
 import { categoryQuery, pageQuery, productQuery, searchPageQuery } from '@/lib/sanity/queries';

app/(site)/[locale]/page.tsx

@@ -7,6 +7,8 @@ import { LiveQuery } from 'next-sanity/preview/live-query';
 import { draftMode } from 'next/headers';
 import { notFound } from 'next/navigation';
 
+export const runtime = 'edge';
+
 export async function generateMetadata({
   params
 }: {

app/api/preview/route.ts

@@ -1,5 +1,10 @@
+import { previewSecretId } from '@/lib/sanity/sanity.api'
+import { client } from '@/lib/sanity/sanity.client'
 import { token } from '@/lib/sanity/sanity.fetch'
 import { draftMode } from 'next/headers'
+import { isValidSecret } from 'sanity-plugin-iframe-pane/is-valid-secret'
+
+export const runtime = 'edge'
 
 export async function GET(request: Request) {
   const { searchParams } = new URL(request.url)
@@ -14,8 +19,20 @@ export async function GET(request: Request) {
     )
   }
 
-  if (secret !== process.env.SANITY_API_READ_TOKEN) {
-    return new Response('Invalid token', { status: 401 })
+  if (!secret) {
+    return new Response('Invalid secret', { status: 401 })
+  }
+
+  const authenticatedClient = client.withConfig({ token })
+
+  const validSecret = await isValidSecret(
+    authenticatedClient,
+    previewSecretId,
+    secret,
+  )
+
+  if (!validSecret) {
+    return new Response('Invalid secret', { status: 401 })
   }
 
   draftMode().enable()

app/globals.css

@@ -36,39 +36,12 @@
   :root {
     --background: 0 0% 100%;
     --foreground: 0 0% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
     --border: 0 0% 89.8%;
     --input: 0 0% 89.8%;
     --ring: 0 0% 3.9%;
-
     --radius: 0.5rem;
   }
 
-  * {
-    @apply border-border;
-  }
-
   ::-moz-selection {
     /* Code for Firefox */
     color: #ffffff;
@@ -82,7 +55,7 @@
 
   html,
   body {
-    @apply h-full bg-white font-sans text-high-contrast;
+    @apply h-full bg-background text-foreground;
 
     box-sizing: border-box;
     touch-action: manipulation;
@@ -91,9 +64,6 @@
     -moz-osx-font-smoothing: grayscale;
     overscroll-behavior-x: none;
   }
-  body {
-    @apply bg-background text-foreground;
-  }
 }
 
 @layer components {