云开发应用实战：搭建 Next.js 内容型网站，CMS内容管理系统助力精彩呈现

2023-09-20 16:38:29

从零出发：搭建 Next.js 应用

首先，我们创建一个新的Next.js项目。

npx create-next-app nextjs-contentful
cd nextjs-contentful

然后安装云开发 SDK 和相关依赖。

npm install --save @cloudbase/cms-client @cloudbase/app-engine-node @cloudbase/database

构建内容管理系统（CMS）

接下来，我们需要设置云开发环境并构建CMS。

tcb login
tcb create -d nextjs-contentful

接下来，我们需要创建一个CMS集合来存储我们的内容。

tcb collection create --collection-name content --database-name nextjs-contentful

整合云开发 CMS SDK

在Next.js应用程序中，我们引入云开发 SDK 并初始化 CMS 客户端。

import { CMS } from "@cloudbase/cms-client";

const client = new CMS({
  env: "nextjs-contentful",
});

拉取并展示内容

现在，我们可以使用CMS客户端来拉取内容并将其展示在我们的网站上。

const { data } = await client.collection("content").get();
const posts = data;

最后，我们在Next.js页面中渲染这些内容。

import { Post } from "../components/Post";

const HomePage = ({ posts }) => {
  return (
    <div>
      {posts.map((post) => (
        <Post key={post._id} post={post} />
      ))}
    </div>
  );
};

export async function getStaticProps() {
  const client = new CMS({
    env: "nextjs-contentful",
  });

  const { data } = await client.collection("content").get();
  const posts = data;

  return {
    props: {
      posts,
    },
  };
}

export default HomePage;