Separate posts & pages previews

payload.config.ts

@@ -42,8 +42,10 @@ export default buildConfig({
       prefillOnly: true,
     },
     livePreview: {
-      url: ({ data, locale }) =>
-        `${process.env.BASE_URL}/preview${data.path}${locale ? `?locale=${locale.code}` : ''}`,
+      url: ({ data, locale, collectionConfig }) =>
+        `${process.env.BASE_URL}/${collectionConfig?.slug || ''}/preview${data.path}${
+          locale ? `?locale=${locale.code}` : ''
+        }`,
       collections: [COLLECTION_SLUG_PAGE, COLLECTION_SLUG_POST],
     },
   },

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

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