How to set up Payload with Supabase
HTML-код
- Опубликовано: 9 фев 2025
- Learn how to set up Payload with @Supabase to create a powerful backend for your Next.js app! 👇
If you're deploying Payload, you need a database. With Payload, you can choose MongoDB or Postgres. Supabase provides a Postgres database and multiple S3 storage buckets-along with a generous free plan (500 MB database, 1 GB storage).
⭐ Like what we're up to? Leave us a star ⭐
github.com/pay...
A primer on Payload ...
- The fastest growing CMS in our category.
- Next.js native, so it can seamlessly integrate it into your Next app. You can also one-click deploy on Vercel.
- Fully open-source, offering the flexibility of self-hosting or managed hosting.
- Fully TypeScript, eliminating the need to navigate through a UI - simply configure everything in code.
- Highly extensible, granting you full control over custom hooks, endpoints, and more. It's not just a CMS; you can extend it to become a comprehensive backend for any application you build.
- Use as a standalone app if you're working with other frameworks.
Get started in one line: npx create-payload-app@beta
----------------------------------------
S3 code snippet and environment variables from video:
s3Storage({
collections: {
media: {
prefix: 'media',
}
},
bucket: process.env.S3_BUCKET,
config: {
forcePathStyle: true,
credentials: {
accessKeyId: process.env.S3_ACCESS_KEY_ID,
secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
},
region: process.env.S3_REGION,
endpoint: process.env.S3_ENDPOINT,
},
}),
S3_BUCKET=
S3_ACCESS_KEY_ID=
S3_SECRET_ACCESS_KEY=
S3_REGION=
S3_ENDPOINT=
Big thanks to our friends at 10xMedia.de, a Payload preferred agency, who created this video.
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
I just wanted to point out, that this tutorial was just perfectly recorded. Learned a lot, as someone who just got across Payload :) Keep up, that amazing work!
Great tutorial!
Thanks for sharing your expertise. Keep up the fantastic work!
Awesome, very helpful for a quick project.
This is amazing,I have been looking for a way to do this then came this video.Thanks again for this 😃
that so nice man thanks
does pocket base work as well
I ran into a lot of trouble attempting to get through the storage portion of this guide as it seems that the methods have changed in the past 11 days since this video was posted.
I had to install @payloadcms/plugin-cloud-storage and I followed the guide on the readme for setting up the plugin which is considerably different than the approach outlined here.
I also had to be sure to include an "endpoint" field in my s3 adapter config.
I was a little shocked to see that this guide and the written counterpart were posted under 2 weeks ago and seem to be completely outdated and confusing for new users.
I have a mongodb connected to a payload app and whatever the images I upload to payload (under 'media' collection) gets broken after some time. Now I connected a supabase s3 bucket to the project, it gets uploaded to supabase (and mongodb both) and still the image file gets broken after a while giving a 500 error in the get request. But the image resides properly inside the bucket when checked from supabase side. Do you have any clue why? TIA
brilliant
Another masterpiece I guess!
Maybe it's possible to adapt fro selfhosted supabase because from docs seem that actually it can be and issue connecting to the supabase bucket ...
Is it recommended to use supabase cli to do the migrations? Or should we stick with payload doing migrations?
At 12:36 how do you go about disabling payload access control?
With the latest beta63. I am not able to create the first user. It always say invalid password with using the online Supabase. But if I changed the connection string to local dev, it works.
I stuck with "unhandledRejection Error [ERR_REQUIRE_ESM]: require() of ES Module ...
ode_modules\@payloadcms\storage-s3\dist\index.js from ...\src\payload\payload.config.ts not supported.
Instead change the require of index.js in...\src\payload\payload.config.ts to a dynamic import() which is available in all CommonJS modules.
My source is "npx create payloadcms" but i can't use s3Storage, please hepl me pls!
How can I use multiple buckets?
Can we use supabase Authentication with Payload?
We need users to sign in through Google and Payload currently doesn't offer that
You can determine your own auth strategy (payloadcms.com/docs/authentication/config#strategies). Otherwise, Payload does offer an SSO plugin (available on enterprise plans) that is more robust and includes Google.
Agreed. It's nice that Payload does auth, but Supabase specialises in auth, so it would be so nice to use Supabase for auth.
Could I use something like Payload + Supabase + Prisma?
what about convex database? can we use convex with payload?
Payload 3.0 cms deploy In vercel video
Is it possible to deploy the payload in local setup server/ custom server
You can deploy Payload anywhere Next.js can be deployed-which is pretty much anywhere. You can also run Payload anywhere you can run node, including on your local machine.
what about convex? can we use convex with payload?
I keep getting `ERROR: InvalidAccessKeyId: The Access Key Id you provided does not exist in our records.` despite repeated attempts to replace and copy/paste a fresh one. Any ideas?
Hello sir, did you fix this issue
What about AppWriter?
Release the stable version already!!😐
Any ETA for this already? :)
They can't release until NextJS 19 is released, as they are reworking Payload to be better compatible with the latest version of React and new NextJS features. Since both React and NextJS are not ready with the latest stable releases, Payload won't be releasing until after.
Thank you for this tutorial payload, I followed every step till I got to the storage-s3 part. After setting the legacy peer deps to true, I get the following error message. Wonder if you could help. Thank you very much in advance.
Error: Mismatching payload dependency versions found: payload@3.0.0-beta.90, @payloadcms/plugin-cloud-storage@3.0.0-beta.29. All payload and @payloadcms/* packages must have the same version. This is an error with your set-up, caused by you, not a bug in payload. Please go to your package.json and ensure all payload and @payloadcms/* packages have the same version.
Following are the dependencies:
"dependencies": {
"@payloadcms/db-postgres": "beta",
"@payloadcms/next": "beta",
"@payloadcms/plugin-cloud": "beta",
"@payloadcms/richtext-lexical": "beta",
"@payloadcms/storage-s3": "^3.0.0-beta.29",
"cross-env": "^7.0.3",
"graphql": "^16.8.1",
"next": "15.0.0-canary.104",
"payload": "beta",
"react": "19.0.0-rc-06d0b89e-20240801",
"react-dom": "19.0.0-rc-06d0b89e-20240801",
"sharp": "0.32.6"
},
You need to install the storage version that matches the payload beta version, so in your case you have "payload@3.0.0-beta.90" so install storage-s3@3.0.0-beta.90
You'll probably have a high vulnerability, if you audit fix it'll change the version so don't do that. I found this out the hard way :)
Obviously (hopefully?) when out of beta these won't be issues
Can you do an integration with Xata.db?
is anyone having this issue with conflicting beta packages?
Internal error: Error: Mismatching payload dependency versions found: @payloadcms/richtext-lexical@3.0.0-beta.77, @payloadcms/plugin-cloud-storage@3.0.0-beta.29. All payload and @payloadcms/* packages must have the same version. This is an error with your set-up, caused by you, not a bug in payload. Please go to your package.json and ensure all payload and @payloadcms/* packages have the same version.
I did create a .npmrc file settings legacy-peer-deps=true but that didnt help unfortunately
I had to manually set all the beta versions to the same to get it to work. By default some beta versions installed are very out of date.