Implement live preview

src/app/(app)/preview/[[...path]]/page.tsx

@@ -0,0 +1,23 @@
+import PreviewBlocks from '@/components/PreviewBlocks'
+import { getCurrentUser } from '@/lib/payload'
+import { COLLECTION_SLUG_PAGE } from '@payload/collections/config'
+import { getDocument } from '@/utils/getDocument'
+import { unstable_noStore as noStore } from 'next/cache'
+import { notFound } from 'next/navigation'
+
+const PreviewCatchAllPage = async ({ params }: { params: { path: string[] } }) => {
+  noStore()
+  const [user, page] = await Promise.all([
+    getCurrentUser(),
+    getDocument({
+      collection: COLLECTION_SLUG_PAGE,
+      path: params.path,
+      depth: 3,
+      cache: false,
+    }),
+  ])
+  if (!user || !page) notFound()
+  return <PreviewBlocks initialData={page} locale="" url={process.env.BASE_URL || ''} />
+}
+
+export default PreviewCatchAllPage

src/app/(payload)/fields/slug.ts

@@ -36,13 +36,13 @@ const slugField: Slug = (fieldToUse = 'title', overrides = {}) => {
       index: true,
       required: false, // Need to be false so that we can use beforeValidate hook to set slug.
       admin: {
-        position: 'sidebar'
+        position: 'sidebar',
       },
       hooks: {
-        beforeValidate: [formatSlug(fieldToUse)]
-      }
+        beforeValidate: [formatSlug(fieldToUse)],
+      },
     },
-    overrides
+    overrides,
   )
 }
 

src/components/PreviewBlocks.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import Blocks from '@/components/Blocks'
+import type { Page } from 'types/payload-types'
+import { useLivePreview } from '@payloadcms/live-preview-react'
+
+export default function PreviewBlocks({
+  initialData,
+  locale,
+  url,
+}: {
+  initialData?: Page | null
+  locale: string
+  url: string
+}) {
+  const { data } = useLivePreview({
+    serverURL: url,
+    depth: 3,
+    initialData: initialData,
+  })
+
+  return <Blocks blocks={data?.blocks || []} locale={locale} />
+}