Payload Integration
Payload CMS is a modern, open-source Headless CMS natively integrated with Next.js. It leverages Next.js App Router and React Server Components technology, allowing developers to embed the CMS directly into Next.js applications, achieving seamless integration of backend content management and front-end display, with ultimate flexibility and developer experience.
This article describes how to build a high-performance website using Payload as a Headless CMS with a MongoDB database. Leveraging the one-click deployment capability of EdgeOne Makers, you can quickly launch your Payload CMS system, gain global CDN acceleration, and achieve optimal website performance and user experience.
Getting Started
EdgeOne Makers provides a complete Payload + MongoDB integration solution template. You can click the deployment button in the template to perform a quick deployment.
The Payload + MongoDB integration primarily consists of four key steps: MongoDB preparation, S3 object storage preparation, other Payload environment variable configuration, and deployment to Ed. The following sections detail the specific operations for each step.
MongoDB Preparation
This solution uses MongoDB as the database to store content data. The MongoDB service is recommended for use with MongoDB Atlas (which offers a free quota) or Tencent Cloud MongoDB.
1. Register and Create a Cluster
2. Creating a Database User
Create a new user on the "Database Access" page and note down the Username and Password.
3. Configuring Network Access
On the "Network Access" page, add IP addresses to ensure that the build and runtime environment of EdgeOne Makers can connect to the database.
4. Retrieving Connection String
Click the "Connect" button on the Cluster.
Select "Drivers".
Copy the provided Connection String (usually starting with mongodb+srv://).
Note: Replace <password> in the concatenated string with your newly created actual password.
Please note down this connection string, later we will fill it in the environment variable DATABASE_URI.
Preparing S3 COS
Since the file system in a Serverless environment is usually temporary (files will be lost every time after redeploy or cold startup), we need to store user-uploaded media files such as images and videos in an external storage service. Payload supports any S3-compatible storage such as Tencent Cloud COS, AWS S3, or Cloudflare R2.
Take Tencent Cloud COS as an example:
1. Creating a Bucket
Log in to the Tencent Cloud console, enter COS, create a new Bucket, and set the access permission to "public-read/private-write" (so that the frontend can access images publicly).
2. Get Key
Obtain SecretId and SecretKey in Cloud Access Management (CAM). Later, fill them into the environment variables S3_ACCESS_KEY_ID and S3_SECRET_ACCESS_KEY.
3. Record Configuration Message
Bucket Name: bucket name.
Region: region (for example, ap-shanghai).
Endpoint: Access domain.
The environment variables S3_BUCKET, S3_REGION, and S3_ENDPOINT will be auto-filled later.
Preparing Other Payload Environment Variables
1. PAYLOAD_SECRET
Payload is used to sign JWT tokens and keys.
Generation method: You can run
openssl rand -hex 32 in the terminal to generate, or manually input a sufficiently long and complex random character string.2. NEXT_PUBLIC_SERVER_URL
This is the domain name your website will ultimately access. During initial deployment, if you do not have a custom domain yet, you can use the default domain provided by EdgeOne Makers, or first enter http://localhost:3000 and update it after deployment is complete.
Deploying to EdgeOne Makers
1. Using Templates
On the EdgeOne Makers template page, locate the Payload + MongoDB integration solution template, then click Deploy to go to the deployment page.
2. Associate a Code Repository
Authorize and choose your Git account (GitHub/GitLab), EdgeOne will automatically create a new warehouse for you.
3. Configuring Environment Variables
In the "Environment Variable" section of the deployment configuration page, fill in the previously prepared information:
4. Click Deploy
Confirm that everything is correct, then click the "Create" button to start deployment.
After deployment, you will obtain an access domain. Click to access, add /admin to the URL (for example https://your-site.edgeone.app/admin), and you will see the Payload CMS initialization interface to create your first admin account.
We have completed the full deployment of the Payload solution. With this solution, you can:
Use Payload to manage content and enjoy its powerful Headless CMS features.
Automate deployment with EdgeOne Makers to simplify Ops work.
Obtain global CDN acceleration to enhance user experience.
More Related Content
Learn more about Payload features: Payload Official Documentation
