Payload and NextJS - Same or separate repo / environment ?

default discord avatar
sssspray8 months ago
12

Hello! I'm interested in trying a new headless CMS, and I came across Payload. I have a quick question: When using NextJS, do you recommend integrating Payload into the same repository and deploying it on Vercel along with the frontend? Or would it be better to separate the admin/payload from the main site? I understand that this is a common question, but I couldn't find a clear answer. I believe it also depends on the application, so I would appreciate hearing your thoughts, especially from those who have faced the same question.

  • default discord avatar
    terraxel8 months ago

    I believe it depends as you said. It depends on your application, maybe, but also on your vision, for sure. My own vision of it is that it should be separated. I see headless as a content provider, that's it. I want to have a rest api and a graphql api that provides me the data to build pages, of course, but also different types of contents. I like it to be independent.



    (However, I would like to clarify that I'm no pro of payloadcms 🙂 )

  • default discord avatar
    sssspray8 months ago

    @Terraxel Yes, I also tend to think it's best to separate it, but as I've seen other including them, and as it's also explained in the doc, I was thinking that maybe there are some benefits to keeping them together. Thanks for the reply !

  • default discord avatar
    christopher.nowlan8 months ago

    @chuck I've built a few websites with PayloadCMS and Nextjs and I tend to keep the repository seperate. I host the payload CMS on one server and Nextjs part on vercel

  • default discord avatar
    clement63968 months ago

    I've personally chosen to separate the two projects again, as I think that integrating Payload into Nextjs requires a lot more maintenance during version upgrades.



    But I use a monorepo to share types

  • default discord avatar
    imcorfitz8 months ago

    On that note - if you don't mind me asking, despite not being 100% related to the question. Have you upgraded to Payload 2.0? We are running same setup using a monorepo. And whenever we trigger

    generate:types

    it automatically copies it to our Next app.


    "generate:types": "turbo run generate:types && cp apps/cms/src/payload-types.ts apps/web/payload-types.ts"

    However, since Payload 2.0 the

    generate:types

    script also adds a module declaration to the types file, and since my Next.js app doesn't have payload as a dependency, it throws an error now, and requires me to manually go in and remove that part:


    declare module 'payload' {
      export interface GeneratedTypes {
        collections: {
          // Collections
        }
        globals: {
          // Globals
        }
      }
    }

    If you have faced similar - how do you combat it? Adding payload as a dependency to Next.js? Manually removing it? Adding a quick bin script to execute the removing automatically after generating the types? I am curious. 🤔

  • default discord avatar
    clement63968 months ago

    I have no problem with type generation



    I don't copy the payload-type file but import it from Next



    image.png
  • default discord avatar
    terraxel8 months ago

    Wouldn't it be easier to use a codegen for requests instead of generating types and sharing them ?



    graphql-codegen for graphql api, and nswag for http api for example

  • default discord avatar
    imcorfitz8 months ago

    Ah see - proper use of monorepo. Clever lad you are.



    I tried using graphQL-codegen. I found it a bit - too much? I didn't feel like the hassle was worth the result. You might argue that the type-safety is better, but I still found it to overly complicate my codebase. It didn't feel as elegant. Might have done it wrong, but I didn't fancy it. Full disclaimer - this is a personal opinion.

  • default discord avatar
    clement63968 months ago

    I don't feel I need an extra layer, a simple fetch with my type as a parameter is more than enough to type my entire project.

  • default discord avatar
    abernier7 months ago

    Usecase: a project with a

    Pages

    collection. Each page is just a list of "blocks" user-contributed. Each block of data, rendered by a React component in a Next app.



    In this usecase, it made a lot of sense to me to be able to collocate my block-definition along the React component that will render it.



    a bit like collocating graphql fragment with RC pattern

  • default discord avatar
    jimpex7 months ago

    For future reference for anyone that is interested here is a blog post payload released that talks about this topic

    https://payloadcms.com/blog/the-ultimate-guide-to-using-nextjs-with-payload
  • default discord avatar
    abernier7 months ago

    awesome article

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.