Steps to merge NextJS with Payload

default discord avatar
Linus
7 months ago
14

I want to merge a NextJS app with Payload into one application. I am aware of

https://github.com/payloadcms/next-payload-demo

, so I do believe this is possible. I don't have an s3 bucket to store media, but that shouldn't be a problem as the app will be hosted on a server (?).



Are there any resources on how to achieve this with an already existing NextJS project instead of having to rewrite everything with the demo?



If not, I'll just continue to keep things separate for the meantime. Nevertheless, I feel like this could be yet another huge advantage of using Payload. So if anyone can confirm this is possible, I'd love to figure this out and contribute to the wiki this month with instructions on how to achieve this for everyone's benefit. I unfortunately don't have the time to do this right away.



Steps to merge NextJS with Payload

  • discord user avatar
    jacobsfletch
    Payload Team
    7 months ago

    That demo is specifically for those who wish to run Payload

    serverlessly within their Next.js application

    . This means local storage is not possible and so an s3 bucket or equivalent is required if you wish to store media. You may find

    https://github.com/payloadcms/nextjs-custom-server

    more closely aligned with what you're looking for. It demonstrates how to plugin your Next.js app into

    Payload's

    Express server.

  • discord user avatar
    jmikrut
    Payload Team
    7 months ago

    @Linus also you can look at the

    next-payload

    package itself, which is

    how

    that demo you linked was created



    https://github.com/payloadcms/next-payload
  • default discord avatar
    Linus
    7 months ago

    Thank you both for your help!



    next-payload

    is exactly what I was looking for, must've missed it somehow.

  • default discord avatar
    cor.vanoostenbrugge
    7 months ago

    So, if i understand it correctly. You can't use the next-payload plugin and store uploads locally so we're required to use something like S3?

  • discord user avatar
    jmikrut
    Payload Team
    7 months ago

    correct - there is no persistent file storage on Vercel (their infra gets created / destroyed each time you deploy, etc)



    so your files would all be destroyed frequently

  • default discord avatar
    cor.vanoostenbrugge
    7 months ago

    But what about non-Vercel hosting? We're deploying all our applications in dedicated Docker containers on our own servers, so we have persistent storage.

  • discord user avatar
    jmikrut
    Payload Team
    7 months ago

    then you don't need to use something like S3 at all - Payload can also store files locally 👍



    that's actually the default behavior

  • default discord avatar
    cor.vanoostenbrugge
    7 months ago

    Thnx, for some reason we couldn't get this to work. Mainly because it looked like images got the wrong URL e.g. localhost:3000/image.png and Next.js intercepted these and returned a 404. We stopped looking into this after we found this help topic where it looks like local media isn't supported at all with next-payload.

  • discord user avatar
    jmikrut
    Payload Team
    7 months ago

    the

    next-payload

    package is good for Vercel / serverless - but if you have the ability to use an Express server, then you should use our

    nextjs-custom-server

    which also combines Payload and Next, but there, local files are supported

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

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