Practical Guide: Building a CMS‑Powered Website with Tencent Cloud Base, Next.js, and CI/CD

This article introduces a practical workflow for integrating Tencent Cloud Base (cloud development) with a modern front‑end framework (Next.js) and a CMS extension to create a dynamic, SEO‑friendly website without writing custom back‑end code.

Background : As cloud development capabilities mature, experienced engineers can deliver a product from development to launch independently. However, most cloud‑development articles focus on basic capabilities and lack end‑to‑end implementation details. This guide uses the official Cloud Base site (http://cloudbase.net/) as a reference architecture.

Problems with VuePress :

Every content update requires Git operations, which non‑technical operators find difficult.

Frequent documentation updates pollute Git history.

Content is tightly coupled with website code.

Lack of visual content editing tools.

Solution : Combine the Cloud Base CMS extension, Cloud Base core services, Next.js, and CI tools. This resolves the above issues, enables dynamic content, preserves SEO, and allows operators to manage content visually.

1. Install the CMS extension

In the Cloud Base console, follow the wizard to install the CMS system. Two types of accounts are created: an administrator (full privileges) and an operator (limited to existing collections).

npm i --save next react react-dom axios

After installation, three collections are automatically created in the cloud database: tcb-ext-cms-contents , tcb-ext-cms-users , tcb-ext-cms-webhooks . Three cloud functions are also provisioned: tcb-ext-cms-api , tcb-ext-cms-init , tcb-ext-cms-auth . The static files of the CMS are deployed to the tcb-cms/ directory.

2. Define the data schema

Each dynamic module corresponds to a collection. For example, the “Recommended Courses” module stores each course as a document with fields:

name<string>: Course name
time<number>: Course duration
cover<string>: Cover image URL
url<string>: Course link
level<0|1|2>: Difficulty level

The CMS automatically adds name , order , createTime , and updateTime fields. The order field can be used for sorting both in the CMS UI and in front‑end queries.

3. Access data from Next.js

Initialize the Cloud Base Node SDK (installed via @cloudbase/node-sdk ) in a helper file provider.js :

const cloudbase = require("@cloudbase/node-sdk");
const config = {
    secretId: "your secretId", // obtain from Cloud Console → Access Keys
    secretKey: "your secretKey",
    env: "your envid" // Cloud Base environment ID
};
const app = cloudbase.init(config);
/** Get courses from the "recommend-course" collection */
async function getCourses() {
    const db = app.database();
    const result = await db.collection("recommend-course").get();
    if (result.code) {
        throw new Error(`Failed to fetch courses, code ${result.code}: ${result.message}`);
    }
    return result.data.map(item => {
        if (item.createTime instanceof Date) item.createTime = item.createTime.toLocaleString();
        if (item.updateTime instanceof Date) item.updateTime = item.updateTime.toLocaleString();
        item.cover = getBucketUrl(item.cover); // convert cloud:// URL to http URL
        return item;
    });
}
module.exports = { getCourses };

Because the CMS stores images as cloud:// URLs, a helper converts them to public HTTP links:

function getBucketUrl(url) {
    if (!url.startsWith("cloud://")) return url;
    const re = /cloud:\/\/.*?\.(.*?)\/(.*)/;
    const result = re.exec(url);
    return `https://${result[1]}.tcb.qcloud.la/${result[2]}`;
}

In the Next.js page, use getStaticProps to fetch the data at build time, guaranteeing that the generated HTML contains the course data for SEO:

import { getCourses } from "../provider";

const HomePage = ({ courses }) => (
    // render courses here
);

export async function getStaticProps() {
    return {
        props: {
            courses: await getCourses()
        }
    };
}

export default HomePage;

4. Build and deploy

Update package.json scripts to use Next.js static export and Cloud Base CLI:

"scripts": {
    "dev": "next",
    "build": "next build && next export",
    "start": "next start",
    "deploy:hosting": "npm run build && cloudbase hosting:deploy out -e jhgjj-0ae4a1",
    "deploy:function": "echo y | cloudbase functions:deploy --force",
    "login": "echo N | cloudbase login --apiKeyId $TCB_SECRET_ID --apiKey $TCB_SECRET_KEY"
}

Two Cloud Base environments are recommended: one for static site hosting (e.g., jhgjj-0ae4a1 ) and another for the CMS (e.g., pagecounter-d27cfe ). After building, run npm run deploy:hosting to upload the out/ directory to static hosting.

5. CI/CD automation

Configure a CI service (Travis, CircleCI, etc.) to execute the following steps:

Login to Cloud Base using secret keys: npm run login .

Fetch the latest data and build the static site: npm run build .

Deploy the static files: npm run deploy:hosting (or npm run deploy:function for cloud functions).

Store TCB_SECRET_ID and TCB_SECRET_KEY as environment variables in the CI platform.

Conclusion

By leveraging Cloud Base’s CMS extension, serverless functions, and Next.js static export, developers can quickly launch a fully dynamic website with zero back‑end code, low operational cost, and excellent SEO. The same pattern can be extended to comment systems, reservation forms, blogs, and more, making cloud development an ideal choice for modern web services.