如何用一行代码在 Next.js 中实现无头 CMS

多年来，开发人员已经意识到 Headless CMS 的强大功能。

如果您要管理大量内容，那么使用带有 Next.js 等框架的可靠 CMS 会产生很大的不同。

虽然该领域仍有许多巨头，但今天我们将探索 BCMS 以及如何将其与 Next.js 结合使用。此外，我们还提供一些入门模板，助您快速上手。

让我们开始吧。

涵盖哪些内容？

简而言之，我们正在详细介绍这些主题。

什么是 BCMS 以及为什么要使用它？
有关如何开始使用 BCMS 和 Next.js 的分步指南。
您可以使用的入门模板。

如果您想自己探索，请阅读文档。

1. 什么是 BCMS 以及为什么要使用它？

BCMS 是构建 Next.js 项目的无头 CMS 中被低估的选项之一。它甚至为其他技术栈（包括、和）提供了灵活Astro的Gatsby.js内容建模Nuxt.js。Svelte

您还将获得：

✅ 全球 CDN 选项。

✅ 基于组件的内容建模。

✅ 适用于多语言网站的灵活内容。

✅ 10+ 个输入选项，具有详细权限。

您可以通过 BCMS 使用和来完成各种工作webhooks，例如处理表格、人力资源工具、发送电子邮件、自定义报告。functionscron jobs

🎯 在我们继续之前，让我们先了解一下 Headless CMS 的含义。

无头 CMS 只允许您在一个地方管理内容并将其部署到任何数字渠道上。

简而言之，它就是任何基于 API 构建的后端应用程序。无头意味着没有前端主体，可以附加到任何……frontend或…… Head。

如果您想了解更多信息，可以查看StoryBlok 的文章和Builder.io 团队撰写的《无头 CMS 终极指南》。其中包含可视化图表、用例、优点等内容。

为什么要使用 BCMS？

BCMS 拥有诸多实用功能，值得购买。让我们来探索其中的一些功能。

✅ BCMS 允许您将内容存储在灵活的输入中，例如下拉菜单、文件、数字和富文本，所有这些都可以与 Next.js 应用程序顺利配合使用。

✅ 您可以使用 BCMS 的有序文件夹系统（比其他系统好得多）轻松上传和管理 Next.js 项目中的任何媒体。阅读文档。

✅ 您还可以获得适用于博客或电商网站的动态组件。它们Widgets在 BCMS 中被称为可重复使用的构建块，用于条目内容区域内。阅读文档。

✅ 还有一个概念可以Groups帮助您定义可重复使用的内容结构，例如作者个人资料或地址，以便在 Next.js 应用程序中轻松查询。

您可以在模板、小部件甚至其他组中使用它们。阅读文档。

✅ 要在 BCMS 中编写多语言内容，您只需单击add并从近 100 种语言中进行选择即可。

英语是默认语言，无法删除，但可以删除其他语言，这也会删除与该语言相关的所有数据。

✅ 还有一个概念，entry就像是从预定义模板创建的单个文档或项目。

模板决定了每个条目应包含哪些详细信息。这些详细信息（称为properties）显示在名为的部分中meta。每个条目还包含一个内容区域，您可以在其中编写文本并添加交互元素。

例如，如果您创建了一个博客模板，您可以设置作者、类别、标签和发布日期等属性。这样，每当您添加新的博客文章（entry）时，这些字段都会被填充。

您可以复制、删除条目，甚至可以设置条目状态以指示博客文章何时可以发布。阅读文档了解更多信息。

您可以在thebcms.com/nextjs-cms上阅读有关所有功能的信息。

顺便说一句，BCMS 是开源的，在 GitHub 上已有数百颗星。您可以在 Readme 中找到作业、插件等更多信息。

现在我们已经了解了 BCMS 的独特概念，下一节将介绍如何将 BCMS 与 Next.js 集成。

2. 有关如何开始使用 BCMS 和 Next.js 的分步指南。

即使您对这些概念一无所知，我们也会尽量简化，使其易于理解。如果您有兴趣从头开始学习，可以阅读文档。

您需要安装的第一件事是 BCMS CLI，通过运行以下命令。

npx @thebcms/cli create next

如果您没有，您将获得安装软件包并通过 BCMS 进行身份验证的选项。

登录后，仪表盘如下所示。您可以在app.thebcms.com/上访问。

这将设置一个新的 Next.js 项目，并允许您根据需要选择一个入门模板。您也可以从头开始，但为了简单起见，我将使用博客入门模板。

这将设置一个新的 NextJS 项目，并会根据你的用例提供选择启动项目的选项。你也可以选择从零开始，但为了方便起见，我选择了博客启动项目。

目录结构如下。

在项目的根目录中，您将找到bcms.config.cjs主配置文件。


/**
* @type {import('@thebcms/cli/config').BCMSConfig}
*/

module.exports = {
    client: {
        orgId: process.env.BCMS_ORG_ID,
        instanceId: process.env.BCMS_INSTANCE_ID,
        apiKey: {
            id: process.env.BCMS_API_KEY_ID,
            secret: process.env.BCMS_API_KEY_SECRET,
        },
    },
};

您将看到代码库预先填充了一些内容、一个.env文件和必要的 BCMS 配置。

在仪表板中，如果您想调整功能、webhook、依赖项或环境变量，您可以探索设置。

如果您跳过入门模板，则需要API Key在设置下创建一个新的模板。在模板中创建条目后，您将获得允许必要权限的选项。如果您觉得这听起来很复杂，不用担心，我们很快就会讲解。

您只需安装依赖项并使用以下命令运行服务器。

npm i
npm run dev

该bcms --pull types --lng ts命令启动BCMS CLI并从 BCMS 中提取类型，并将其保存在中/bcms/types/。这些类型适用于 JavaScript 和 TypeScript。

然后，前往http://localhost:3000查看本地托管版本。它看起来如下。

恭喜！🎉

您刚刚将 BCMS 与 Next.js 集成，就这么简单！

让我们进一步了解其中涉及的内容。前往 BCMS 仪表板，Templates在侧边栏中查找该选项。

您将看到一个已创建的博客模板，其中包含六个属性：title、slug、date、description、cover_image 和 category。每种属性类型都显示为一个徽章（media、string、date）。

您可以根据您的用例轻松更新任何属性。

您还可以从头开始创建模板，如图所示。

模板准备就绪后，您需要为其创建条目。在本例中，Blog template已经有四个条目。

每个条目都包含所有必要的详细信息。

创建新条目时，它将根据您的模板属性自动包含必填字段。

同样，对于封面图片，只需上传并相应地选择它。

一旦您刷新本地设置，更新就会出现。

该条目将根据slug URL您在仪表板中设置的路线进行访问。

让我们来讨论一下代码库。

bcms.ts首先，通过在目录内创建来初始化 BCMS 客户端/src。

从 BCMS 获取和显示数据的主要逻辑位于/src/app/page.tsx。

import React from 'react';
import { bcms } from './bcms-client';
import { BlogEntry, BlogEntryMetaItem } from '../../bcms/types/ts';
import { Metadata } from 'next';
import BlogCard from '@/components/blog/Card';
import Tag from '@/components/Tag';

const pageTitle = 'Blogs - Simple Blog';
export const metadata: Metadata = {
    title: pageTitle,
    openGraph: {
        title: pageTitle,
    },
    twitter: {
        title: pageTitle,
    },
};

const HomePage: React.FC = async () => {
    const blogs = (await bcms.entry.getAll('blog')) as BlogEntry[];

    const items = blogs.map((blog) => {
        return blog.meta.en as BlogEntryMetaItem;
    });
    return (
        <div className="py-24 md:py-32">
            <div className="container">
                <div className="flex flex-col gap-6 items-center text-center mb-20 md:mb-[120px]">
                    <Tag size="lg">Hi, I’m Anmol 👋</Tag>
                    <h1 className="text-4xl font-bold leading-none md:text-5xl">
                        This is my blog
                    </h1>
                </div>
                <div>
                    <div className="grid grid-cols-1 gap-12 max-w-[1040px] mx-auto">
                        {items.map((item, index) => {
                            return <BlogCard key={index} blog={item} />;
                        })}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default HomePage;