Example of Next.js app accessing 3.0 "headless" CMS?

[iamsenseiken]

I am aiming to develop a Next.js website that interacts with Payload CMS in headless mode. However, I haven't found a solid 3.0 example for this purpose. Consider the basic scenario of a Next.js application that displays pages from the CMS, accurately rendering the HTML content and image blocks.

Does anyone have a pointer to an example?

[tyteen4a03]

Have you checked the website template?

[iamsenseiken]

Hi there! Yes 🙂 I could be wrong, but that template still seems to be a hybrid affair. It has an admin folder, requires MongoDB connection strings, and includes an API. I was looking for something that represents the minimal amount of code needed to reasonably retrieve and display posts and pages from PayloadCMS in a 'headless' mode. If this hybrid model turns out to be the recommended SOP for PayloadCMS, I will see if I can justify the change in our thinking. I have no interest in constantly having to swim upstream! I will need to consider alternative mechanisms to ensure outsiders can never even hit the login page of the backend unless they pass some other access mechanism. Thanks, Ken!

…

________________________________ From: Timothy Choi ***@***.***> Sent: Wednesday, November 20, 2024 5:26 PM To: payloadcms/payload ***@***.***> Cc: Sensei Ken ***@***.***>; Author ***@***.***> Subject: Re: [payloadcms/payload] Example of Next.js app accessing 3.0 "headless" CMS? (Discussion #9380) Have you checked the website template<https://github.com/payloadcms/payload/tree/main/templates/website>? — Reply to this email directly, view it on GitHub<#9380 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAAZZ2A643BDLGMZ7RFYJZ32BULBRAVCNFSM6AAAAABSFINUHKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMZSHE2TKNI>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[tyteen4a03]

I think I misunderstood you when you say headless. You will get the best experience if you put your application code in the same app as Payload (especially if your frontend is also in Next already). But to use Payload as a "headless" CMS you'll want to use either the REST API or the GraphQL API.

I'm not aware of any official examples of doing things this way but this should get you started.

[iamsenseiken]

Got it. The confusion likely arises because PayloadCMS is frequently mentioned alongside alternatives like Contentful or Prismatic. These platforms typically separate the codebase for the front end from the CMS backend much more completely. This separation is what I associate with the term "headless," though perhaps "disconnected" is a more precise description. While obviously, Payload can operate this way, it looks like that is not the focus. I’ll make some definitive choices here—that’s on me. My strong preference is for the API and Admin to be hosted on a different domain, or ideally a separate attack surface, from the public-facing website. To achieve this, I’m considering either: 1. Building a Next.js app from scratch, interfacing directly with the GraphQL API. 2. Maintaining a separate installation of the PayloadCMS website template for the front end, while disabling the admin and API functionality to take advantage of the rest.

…

________________________________ From: Timothy Choi ***@***.***> Sent: Wednesday, November 20, 2024 6:03 PM To: payloadcms/payload ***@***.***> Cc: Sensei Ken ***@***.***>; Author ***@***.***> Subject: Re: [payloadcms/payload] Example of Next.js app accessing 3.0 "headless" CMS? (Discussion #9380) I think I misunderstood you when you say headless. You will get the best experience if you put your application code in the same app as Payload (especially if your frontend is also in Next already). But to use Payload as a "headless" CMS you'll want to use either the REST API<https://payloadcms.com/docs/rest-api/overview> or the GraphQL API<https://payloadcms.com/docs/graphql/overview>. I'm not aware of any official examples of doing things this way but this should get you started. — Reply to this email directly, view it on GitHub<#9380 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAAZZ2GZOQBFGVT26GOFSED2BUPONAVCNFSM6AAAAABSFINUHKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMZSHE3TINY>. You are receiving this because you authored the thread.Message ID: ***@***.***>