Steps to merge NextJS with Payload
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
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-servermore closely aligned with what you're looking for. It demonstrates how to plugin your Next.js app into
Payload'sExpress server.
@Linus also you can look at the
next-payloadpackage itself, which is
howthat demo you linked was created
https://github.com/payloadcms/next-payloadThank you both for your help!
next-payloadis exactly what I was looking for, must've missed it somehow.
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?
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
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.
then you don't need to use something like S3 at all - Payload can also store files locally 👍
that's actually the default behavior
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.
the
next-payloadpackage is good for Vercel / serverless - but if you have the ability to use an Express server, then you should use our
nextjs-custom-serverwhich also combines Payload and Next, but there, local files are supported
Continue the discussion in Discord
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.