search

contentful / live-preview

Preview SDK for both the field tagging connection + live content updates
https://www.contentful.com/developers/docs/tutorials/general/live-preview/
MIT License
64 stars 14 forks source link

Live preview not working on next-app-router-ssr #848

Closed dstr89 closed 2 months ago

dstr89 commented 2 months ago

Describe the bug After integrating live preview according to the example provided in https://github.com/contentful/live-preview/tree/main/examples/next-app-router-ssr the page is not refreshing automatically.

To Reproduce Steps to reproduce the behavior:

  1. Subscribe to "save" event as show in https://github.com/contentful/live-preview/blob/main/examples/next-app-router-ssr/public/_live-preview.ts
  2. Deploy to Vercel
  3. Change the title in the Contentful live preview

Expected behavior The page should auto-refresh in live preview

Screenshots / example I see that the following check is always returning false and therefore not calling my callback method Screenshot 2024-08-21 221517

Context (please complete the following information): "dependencies": { "@contentful/live-preview": "^4.5.2", "@contentful/rich-text-react-renderer": "^15.22.9", "next": "14.2.5", "react": "^18", "react-dom": "^18" }

Additional context My code is available here: https://github.com/dstr89/cf-nextjs-demo

dstr89 commented 2 months ago

I realized now I was missing element tagging. After adding this it works:

{...ContentfulLivePreview.getProps({
          entryId: post.sys.id,
          fieldId: 'title',
          locale: 'en-US',
        })}

But please update the documentation because it does not say anywhere this should be added to every field to achieve live preview. I expected this to be only required for field editing.