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 document describes how to use Payload as a Headless CMS with a MongoDB database to build a high-performance website. With EdgeOne Pages' one-click deployment, you can quickly launch your Payload CMS system and obtain global CDN acceleration, achieving the best performance and user experience for your website.
Getting Started
EdgeOne Pages provides a complete Payload + MongoDB integration solution template. You can click the deploy button in the template to quickly deploy.
Payload + MongoDB integration mainly includes four key steps: MongoDB preparation, S3 Cloud Object Storage preparation, other payload environment variable configuration, and deployment to EdgeOne Pages. The following introduces each step in detail.
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 address to ensure EdgeOne Pages environments can connect to 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 finally access. If no custom domain name is available during initial deployment, you can use the default domain name provided by EdgeOne Pages or fill in http://localhost:3000 and refresh after deployment.
Deploying to EdgeOne Pages
1. Using Templates
Find the Payload + MongoDB integration solution template on the EdgeOne Pages template page, click Deploy to enter 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 functionality.
Automate deployment with EdgeOne Pages and simplify ops.
Get global CDN acceleration to enhance user experience
More Related Content
Learn more about Payload features: Payload official documentation