fix: properly handles nested routes for live preview (#3586)

test/live-preview/config.ts

@@ -25,8 +25,8 @@ export default buildConfigWithDefaults({
       // The Live Preview config is inherited from the top down
       url: ({ data, documentInfo }) =>
         `http://localhost:3001${
-          documentInfo.slug !== 'pages' ? `/${documentInfo.slug}` : ''
-        }/${data?.slug}`,
+          documentInfo?.slug && documentInfo.slug !== 'pages' ? `/${documentInfo.slug}` : ''
+        }${data?.slug && data.slug !== 'home' ? `/${data.slug}` : ''}`,
       breakpoints: [
         {
           label: 'Mobile',

test/live-preview/next-app/app/(pages)/posts/[slug]/page.client.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { Post as PostType } from '@/payload-types'
+import { useLivePreview } from '../../../../../../../packages/live-preview-react'
+import React from 'react'
+import { PAYLOAD_SERVER_URL } from '@/app/_api/serverURL'
+import { Blocks } from '@/app/_components/Blocks'
+import { PostHero } from '@/app/_heros/PostHero'
+
+export const PostClient: React.FC<{
+  post: PostType
+}> = ({ post: initialPost }) => {
+  const { data } = useLivePreview<PostType>({
+    initialData: initialPost,
+    serverURL: PAYLOAD_SERVER_URL,
+    depth: 2,
+  })
+
+  return (
+    <React.Fragment>
+      <PostHero post={data} />
+      <Blocks blocks={data?.layout} />
+      <Blocks
+        disableTopPadding
+        blocks={[
+          {
+            blockType: 'relatedPosts',
+            blockName: 'Related Posts',
+            relationTo: 'posts',
+            introContent: [
+              {
+                type: 'h4',
+                children: [
+                  {
+                    text: 'Related posts',
+                  },
+                ],
+              },
+              {
+                type: 'p',
+                children: [
+                  {
+                    text: 'The posts displayed here are individually selected for this page. Admins can select any number of related posts to display here and the layout will adjust accordingly. Alternatively, you could swap this out for the "Archive" block to automatically populate posts by category complete with pagination. To manage related posts, ',
+                  },
+                  {
+                    type: 'link',
+                    url: `/admin/collections/posts/${data?.id}`,
+                    children: [
+                      {
+                        text: 'navigate to the admin dashboard',
+                      },
+                    ],
+                  },
+                  {
+                    text: '.',
+                  },
+                ],
+              },
+            ],
+            docs: data?.relatedPosts,
+          },
+        ]}
+      />
+    </React.Fragment>
+  )
+}

test/live-preview/next-app/app/(pages)/posts/[slug]/page.tsx

@@ -4,18 +4,9 @@ import { notFound } from 'next/navigation'
 import { Post } from '../../../../payload-types'
 import { fetchDoc } from '../../../_api/fetchDoc'
 import { fetchDocs } from '../../../_api/fetchDocs'
-import { Blocks } from '../../../_components/Blocks'
-import { PostHero } from '../../../_heros/PostHero'
-
-export default async function Post(args: {
-  params: {
-    slug: string
-  }
-}) {
-  const {
-    params: { slug = 'home' },
-  } = args
+import { PostClient } from './page.client'
 
+export default async function Post({ params: { slug = '' } }) {
   let post: Post | null = null
 
   try {
@@ -31,55 +22,7 @@ export default async function Post(args: {
     notFound()
   }
 
-  const { layout, relatedPosts } = post
-
-  return (
-    <React.Fragment>
-      <PostHero post={post} />
-      <Blocks blocks={layout} />
-      <Blocks
-        disableTopPadding
-        blocks={[
-          {
-            blockType: 'relatedPosts',
-            blockName: 'Related Posts',
-            relationTo: 'posts',
-            introContent: [
-              {
-                type: 'h4',
-                children: [
-                  {
-                    text: 'Related posts',
-                  },
-                ],
-              },
-              {
-                type: 'p',
-                children: [
-                  {
-                    text: 'The posts displayed here are individually selected for this page. Admins can select any number of related posts to display here and the layout will adjust accordingly. Alternatively, you could swap this out for the "Archive" block to automatically populate posts by category complete with pagination. To manage related posts, ',
-                  },
-                  {
-                    type: 'link',
-                    url: `/admin/collections/posts/${post.id}`,
-                    children: [
-                      {
-                        text: 'navigate to the admin dashboard',
-                      },
-                    ],
-                  },
-                  {
-                    text: '.',
-                  },
-                ],
-              },
-            ],
-            docs: relatedPosts,
-          },
-        ]}
-      />
-    </React.Fragment>
-  )
+  return <PostClient post={post} />
 }
 
 export async function generateStaticParams() {

test/live-preview/next-app/app/_heros/PostHero/index.module.scss

@@ -24,10 +24,6 @@
   }
 }
 
-.title {
-  margin: 0;
-}
-
 .warning {
   margin-bottom: calc(var(--base) * 1.5);
 }

test/live-preview/next-app/app/_heros/PostHero/index.tsx

@@ -13,13 +13,13 @@ import { PAYLOAD_SERVER_URL } from '@/app/_api/serverURL'
 export const PostHero: React.FC<{
   post: Post
 }> = ({ post }) => {
-  const { id, title, meta: { image: metaImage, description } = {}, createdAt } = post
+  const { id, meta: { image: metaImage, description } = {}, createdAt } = post
 
   return (
     <Fragment>
       <Gutter className={classes.postHero}>
         <div className={classes.content}>
-          <h1 className={classes.title}>{title}</h1>
+          <RichText content={post?.hero?.richText} className={classes.richText} />
           <p className={classes.meta}>
             {createdAt && (
               <Fragment>