Implemented preview functionality with next js 13 app dir

app/[locale]/[[...slug]]/category-page-preview.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import PreviewBanner from 'components/ui/preview-banner'
+import { usePreview } from 'lib/sanity/sanity.preview'
+import CategoryPage from './category-page'
+
+export default function CategoryPagePreview({
+  query,
+  queryParams,
+}: {
+  query: string
+  queryParams: {
+    [key: string]: any
+  }
+}) {
+  const data = usePreview(null, query, queryParams)
+
+  const { title, _type } = data
+
+  return (
+    <>
+      <CategoryPage data={data} />
+      <PreviewBanner title={`${title} (${_type})`} />
+    </>
+  )
+}

app/[locale]/[[...slug]]/home-page-preview.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import PreviewBanner from 'components/ui/preview-banner'
+import { usePreview } from 'lib/sanity/sanity.preview'
+import HomePage from './home-page'
+
+export default function HomePagePreview({
+  query,
+  queryParams,
+}: {
+  query: string
+  queryParams: {
+    [key: string]: any
+  }
+}) {
+  const data = usePreview(null, query, queryParams)
+
+  const { title, _type } = data
+
+  return (
+    <>
+      <HomePage data={data} />
+      <PreviewBanner title={`${title} (${_type})`} />
+    </>
+  )
+}

app/[locale]/[[...slug]]/page.tsx

@@ -1,19 +1,73 @@
+import PreviewSuspense from 'components/preview-suspense';
 import getQueryFromSlug from 'helpers/getQueryFromSlug';
 import { docQuery } from 'lib/sanity/queries';
 import { client } from 'lib/sanity/sanity.client';
 import type { Metadata } from 'next';
+import { draftMode } from 'next/headers';
 import CategoryPage from './category-page';
+import CategoryPagePreview from './category-page-preview';
 import HomePage from './home-page';
+import HomePagePreview from './home-page-preview';
 import ProductPage from './product-page';
+import ProductPagePreview from './product-page-preview';
 import SinglePage from './single-page';
+import SinglePagePreview from './single-page-preview';
+
+/**
+ * Render pages depending on type.
+ */
+export default async function Page({
+  params,
+}: {
+  params: { slug: string[], locale: string };
+}) {
+  const { isEnabled } = draftMode();
+
+  const { slug, locale } = params;
+  
+  const { query = '', queryParams, docType } = getQueryFromSlug(slug, locale)
+
+  const pageData = await client.fetch(query, queryParams)
+
+  const data = filterDataToSingleItem(pageData, isEnabled)
+
+  if (isEnabled) {
+    return (
+      <PreviewSuspense fallback="Loading...">
+        {docType === 'home' && (
+          <HomePagePreview query={query} queryParams={queryParams} />
+        )}
+        {docType === 'page' && (
+          <SinglePagePreview query={query} queryParams={queryParams} />
+        )}
+        {docType === 'product' && (
+          <ProductPagePreview query={query} queryParams={queryParams} />
+        )}
+        {docType === 'category' && (
+          <CategoryPagePreview query={query} queryParams={queryParams} />
+        )}
+      </PreviewSuspense>
+    )
+  }
+  
+  return (
+    <>
+      {docType === 'home' && <HomePage data={data} />}
+      {docType === 'product' && <ProductPage data={data} />}
+      {docType === 'category' && <CategoryPage data={data} />}
+      {docType === 'page' && <SinglePage data={data} />}
+    </>
+  )
+}
+
+// Background revalidate once every day.
+export const revalidate = 86400;
 
 /**
  * Get paths for each page.
  */
 export async function generateStaticParams() {
-  const paths = await client.fetch(docQuery, {
-    next: { revalidate: 10 },
-  })
+  const paths = await client.fetch(docQuery)
 
   return paths.map((path: { 
     slug: string,
@@ -79,30 +133,4 @@ export async function generateMetadata({ params }: {params: { slug: string[], lo
       ],
     },
   }
-}
-
-/**
- * Render pages depending on type.
- */
-export default async function Page({
-  params,
-}: {
-  params: { slug: string[], locale: string };
-}) {
-  const { slug, locale } = params;
-  
-  const { query = '', queryParams, docType } = getQueryFromSlug(slug, locale)
-
-  const pageData = await client.fetch(query, queryParams)
-
-  const data = filterDataToSingleItem(pageData, false)
-  
-  return (
-    <>
-      {docType === 'home' && <HomePage data={data} />}
-      {docType === 'product' && <ProductPage data={data} />}
-      {docType === 'category' && <CategoryPage data={data} />}
-      {docType === 'page' && <SinglePage data={data} />}
-    </>
-  )
 }

app/[locale]/[[...slug]]/product-page-preview.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import PreviewBanner from 'components/ui/preview-banner'
+import { usePreview } from 'lib/sanity/sanity.preview'
+import ProductPage from './product-page'
+
+export default function ProductPagePreview({
+  query,
+  queryParams,
+}: {
+  query: string
+  queryParams: {
+    [key: string]: any
+  }
+}) {
+  const data = usePreview(null, query, queryParams)
+
+  const { title, _type } = data
+
+  return (
+    <>
+      <ProductPage data={data} />
+      <PreviewBanner title={`${title} (${_type})`} />
+    </>
+  )
+}

app/[locale]/[[...slug]]/single-page-preview.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import PreviewBanner from 'components/ui/preview-banner'
+import { usePreview } from 'lib/sanity/sanity.preview'
+import SinglePage from './single-page'
+
+export default function SinglePagePreview({
+  query,
+  queryParams,
+}: {
+  query: string
+  queryParams: {
+    [key: string]: any
+  }
+}) {
+  const data = usePreview(null, query, queryParams)
+
+  const { title, _type } = data
+
+  return (
+    <>
+      <SinglePage data={data} />
+      <PreviewBanner title={`${title} (${_type})`} />
+    </>
+  )
+}