LivePreview not updating in Next.js App Router?

[tomvandenbogaart]

I'm integrating PayloadCMS for my Next.js app using app router. I have a project section on my app which addresses
Local: http://localhost:3000/projecten/[slug]
Production: https://www.softomic.nl/projecten/softomic-een-moderne-website-gebouwd-met-next-js-en-payloadcms

when I make updates in the admin panel with live preview enabled I dont see updates?

Recording.2024-12-03.091728.mp4

this is my configuration:

import { mongooseAdapter } from '@payloadcms/db-mongodb'
import { payloadCloudPlugin } from '@payloadcms/payload-cloud'
import {
  lexicalEditor
} from '@payloadcms/richtext-lexical'
import path from 'path'
import { buildConfig } from 'payload'
import { fileURLToPath } from 'url'
import sharp from 'sharp'
import { vercelBlobStorage } from '@payloadcms/storage-vercel-blob'

import { Users } from './collections/Users'
import { Media } from './collections/Media'
import { Projects } from './collections/Projects'

const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)

export default buildConfig({
  admin: {
    user: Users.slug,
    importMap: {
      baseDir: path.resolve(dirname),
    },
    livePreview: {
      url: 'http://localhost:3000/',
      collections: ['projects'],
    },
  },
  collections: [Users, Media, Projects],
  editor: lexicalEditor({}),
  secret: process.env.PAYLOAD_SECRET || '',
  typescript: {
    outputFile: path.resolve(dirname, 'payload-types.ts'),
  },
  db: mongooseAdapter({
    url: process.env.DATABASE_URI || '',
  }),
  sharp,
  plugins: [
    payloadCloudPlugin(),
    vercelBlobStorage({
      collections: {
        [Media.slug]: true,
      },
      token: process.env.BLOB_READ_WRITE_TOKEN || '',
    }),
  ],
})

Media Collection:

import { lexicalEditor } from '@payloadcms/richtext-lexical';
import type { CollectionConfig } from 'payload'

export const Projects: CollectionConfig = {
    slug: 'projects',
    access: {
        read: () => true,
    },
    admin: {
        useAsTitle: 'title',
    },
    fields: [
        {
            name: 'title',
            type: 'text',
            required: true,
            hooks: {
                afterChange: [
                    ({ data = {} }) => {
                        if (data?.title) {
                            return data.title;
                        }
                        return '';
                    }
                ]
            }
        },
        {
            name: 'content',
            type: 'richText',
            required: true,
            editor: lexicalEditor({}),
        },
        {
            name: 'featuredImage',
            type: 'upload',
            relationTo: 'media',
            required: true,
        },
        {
            name: 'gallery',
            type: 'array',
            fields: [
                {
                    name: 'image',
                    type: 'upload',
                    relationTo: 'media',
                    required: true,
                },
            ],
        },
        {
            name: 'technologies',
            type: 'array',
            fields: [
                {
                    name: 'name',
                    type: 'text',
                    required: true,
                },
            ],
        },
        {
            name: 'solutionType',
            type: 'select',
            options: [
                {
                    label: 'Websites',
                    value: 'websites',
                },
                {
                    label: 'Web Applicaties',
                    value: 'web applicaties',
                },
                {
                    label: 'API Ontwikkeling',
                    value: 'api ontwikkeling',
                },
                {
                    label: 'DevOps',
                    value: 'devops',
                },
            ],
            required: true,
        },
        {
            name: 'projectUrl',
            type: 'text',
            required: false,
        },
        {
            name: 'githubUrl',
            type: 'text',
            required: false,
        },
        {
            name: 'status',
            type: 'select',
            options: [
                {
                    label: 'Draft',
                    value: 'draft',
                },
                {
                    label: 'Published',
                    value: 'published',
                },
            ],
            defaultValue: 'draft',
            required: true,
        },
        {
            name: 'slug',
            type: 'text',
            admin: {
                position: 'sidebar',
                readOnly: true,
            },
            hooks: {
                beforeValidate: [
                    ({ value, data }) => {
                        if (!value && data?.title) {
                            return data.title
                                .toLowerCase()
                                .replace(/[^a-z0-9]+/g, '-')
                                .replace(/^-+|-+$/g, '')
                                .replace(/-+/g, '-');
                        }
                        return value;
                    },
                ],
            },
        },
    ],
}

folder structure:

src/
└── app

└── (softomic)/
    └── projecten/
        └── [slug]/
            └── page.tsx 

[fofoy]

Did you actually setup LivePreview inside projecten/[slug]/page.tsx ?
You also need to enable drafts if not done already.
Hope it helps !

[tomvandenbogaart]

Thanks for you response! I have the following parent controller and I did enabled drafts for the projects collection:

import { ProjectPage } from "@/app/components/ProjectPage"
import { getSEOTags } from "@/app/libs/seo"
import { Project } from "@/payload-types"
import { notFound } from "next/navigation"
import { getPayload } from 'payload'
import config from "@payload-config"
import { RefreshRouteOnSave } from "@/app/libs/RefreshRouterOnSave"

interface ProjectPageProps {
    params: Promise<{
        slug: string
    }>
}

export async function generateMetadata({ params }: ProjectPageProps) {
    const { slug } = await Promise.resolve(params)
    const payload = await getPayload({ config })
    const projectDocs = await payload.find({
        collection: 'projects',
        where: { slug: { equals: slug } }
    })
    const project = projectDocs.docs[0] as Project

    if (!project) {
        return getSEOTags({
            title: "Project niet gevonden | Softomic",
            description: "Het opgevraagde project kon niet worden gevonden.",
            canonicalUrlRelative: "/projecten"
        })
    }

    return getSEOTags({
        title: `${project.title} | Softomic Projecten`,
        description: (project.content.root.children[0]?.text as string) || "Bekijk dit project in ons portfolio.",
        keywords: [
            project.title,
            project.solutionType,
            "Websites",
            "Webapplicaties",
            "API-ontwikkeling",
            "DevOps",
            "Web Development",
            ...(project.technologies?.map((tech: { name: string }) => tech.name) || [])
        ],
        openGraph: {
            title: project.title,
            description: (project.content.root.children[0]?.text as string) || "Bekijk dit project in ons portfolio.",
            type: "article",
            url: `/projecten/${slug}`,
            images: project.featuredImage && typeof project.featuredImage === 'object' ? [
                {
                    url: project.featuredImage.url || "/opengraph-image.png",
                    width: 1200,
                    height: 630,
                    alt: project.title
                }
            ] : undefined
        },
        canonicalUrlRelative: `/projecten/${slug}`,
    })
}

export default async function ProjectSlugPage({ params }: ProjectPageProps) {
    const payload = await getPayload({ config })
    const pageRes = await payload.find({
        collection: 'projects',
        draft: true,
        limit: 1,
        where: {
            slug: {
                equals: (await params).slug,
            },
        },
    })

    const data = pageRes?.docs?.[0] as null | Project

    if (data === null) {
        return notFound()
    }

    return (
        <main>
            <RefreshRouteOnSave />
            <ProjectPage project={data} />
        </main>
    )
}

This is the projectpage:

'use client'
import Image from 'next/image'
import { motion } from 'framer-motion'
import type { Project } from '@/payload-types'
import { RichText } from '@payloadcms/richtext-lexical/react'
import Link from 'next/link'

interface ProjectPageProps {
    project: Project
}

export function ProjectPage({ project }: ProjectPageProps) {
    return (
        <section className="py-8 md:py-12 lg:py-16 relative overflow-hidden z-10">
            {/* Header */}
            <div className="relative min-h-[20vh] sm:min-h-[25vh] flex items-center">
                <div className="container mx-auto p-4 relative max-w-4xl">
                    <div className="absolute p-2 sm:p-3 -top-0 -left-0 w-6 sm:w-8 h-6 sm:h-8 border-t-4 border-l-4 border-secondary/30"></div>
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ duration: 0.3 }}
                        className="text-center p-2 sm:p-4"
                    >
                        <div className="inline-flex items-center gap-3 justify-center mb-3">
                            <div className="h-px w-6 bg-secondary/70"></div>
                            <span className="text-secondary/80 text-sm tracking-wider uppercase font-medium">
                                {project.solutionType}
                            </span>
                            <div className="h-px w-6 bg-secondary/70"></div>
                        </div>
                        <h1 className={`text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-4 font-roboto tracking-tight`}>
                            <span className="relative inline-block">
                                {project.title}
                            </span>
                        </h1>
                    </motion.div>
                    <div className="absolute -bottom-0 -right-0 w-6 sm:w-8 h-6 sm:h-8 border-b-4 border-r-4 border-secondary/30"></div>
                </div>
            </div>

            {/* Main Content */}
            <div className="container mx-auto px-4 sm:px-6 py-12 max-w-4xl">
                {/* Featured Image */}
                {project.featuredImage && typeof project.featuredImage === 'object' && project.featuredImage.url && (
                    <motion.div
                        initial={{ opacity: 0, scale: 0.95 }}
                        whileInView={{ opacity: 1, scale: 1 }}
                        viewport={{ once: true }}
                        transition={{ duration: 0.5 }}
                        className="mb-12"
                    >
                        <div className="relative w-full h-[300px] sm:h-[400px] rounded-lg overflow-hidden shadow-lg">
                            <Image
                                src={project.featuredImage.url}
                                alt={project.title}
                                fill
                                className="object-cover"
                                sizes="(max-width: 768px) 100vw, 800px"
                                priority
                                quality={85}
                            />
                        </div>
                    </motion.div>
                )}

                {/* Technologies */}
                {project.technologies && (
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        transition={{ duration: 0.5 }}
                        className="mb-12"
                    >
                        <div className="flex flex-wrap gap-2 justify-center">
                            {project.technologies.map((tech) => (
                                <div
                                    key={tech.id || tech.name}
                                    className="px-4 py-2 bg-secondary rounded-lg
                                        text-black text-sm border border-black/10
                                        hover:border-black/30 transition-all duration-300 cursor-default"
                                >
                                    {tech.name}
                                </div>
                            ))}
                        </div>
                    </motion.div>
                )}

                {/* Project Content */}
                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.5 }}
                >
                    <article className="prose prose-base md:prose-lg prose-invert max-w-none">
                        <RichText
                            data={project.content}
                            className="prose-headings:text-white/90 prose-p:text-white/80 leading-relaxed
                                prose-strong:text-white prose-em:text-white/80 prose-li:text-white/80
                                prose-a:text-secondary hover:prose-a:text-secondary/80"
                        />
                    </article>
                </motion.div>

                {/* CTA Section */}
                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.5 }}
                    className="mt-16 text-center"
                >
                    <h3 className={`text-2xl sm:text-3xl font-bold text-white mb-4 font-roboto`}>
                        Klaar om uw eigen project te starten?
                    </h3>
                    <p className="text-white/80 mb-8 max-w-2xl mx-auto">
                        Laat ons u helpen uw ideeën tot leven te brengen met innovatieve oplossingen op maat.
                    </p>
                    <Link href="/contact" passHref>
                        <motion.span
                            whileHover={{ scale: 1.05 }}
                            whileTap={{ scale: 0.95 }}
                            className="inline-block py-3 px-8 rounded-lg bg-secondary text-black font-semibold 
                                hover:bg-secondary/90 transition-all text-base relative overflow-hidden group cursor-pointer"
                        >
                            <span className="relative z-10">Neem contact op</span>
                            <div className="absolute inset-0 bg-gradient-to-r from-secondary/0 via-white/20 to-secondary/0 
                                transform translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000">
                            </div>
                        </motion.span>
                    </Link>
                </motion.div>
            </div>
        </section>
    )
}

[tomvandenbogaart]

Nevermind! I works now!