多年以来，开发人员逐渐认识到无头内容管理系统的力量。
使用像 Next.js 这样的框架搭配一个稳固的 CMS，如果你需要管理大量内容，可以带来很大的帮助。
虽然一些知名公司在这个领域占主导地位，今天我们来聊聊BCMS以及如何在Next.js中使用它。另外，我们还会提供一些入门模板来帮助你开始。
咱们跳进去吧。
此处省略内容
到底包含哪些内容？我们将深入探讨这些主题，简而言之。
- 什么是BCMS，为什么要使用BCMS？
- 一步一步指南，教你如何开始使用BCMS和Next.js。
- 你可以使用的启动模板有哪些？
如果你想更了解自己，可以阅读相关文档docs。
此处省略内容
1. 你知道吗？什么是BCMS，为什么你应该用它？BCMS 是一个不太为人所知的无头 CMS 之一，非常适合用来构建 Next.js 项目。不仅如此，它为包括 Astro、Gatsby.js、Nuxt.js 和 Svelte 在内的其他技术框架提供了灵活的内容建模，更符合技术领域的表达习惯。
你还会得到以下内容：
✅ 全球 CDN 选择。
✅ 组件式内容结构化
✅ 灵活的内容适用于多语言网站。
✅ 10+ 输入选项，每个都附带详细权限。
你可以做各种各样的事情，比如处理表单申请、HR工具、发送邮件、定制报表等，所有这些操作都可以通过BCMS利用webhooks、functions和cron jobs实现。
这是一张图片链接。
🎯 在我们继续之前，先来了解一下什么是无头内容管理系统。
无头内容管理系统（Headless CMS）允许你在一个地方管理内容，并部署到任何数字渠道，如网站、移动应用等。
简单来说，它就是一个完全依赖API构建的后端应用。无头模式意味着没有前端界面，这种模式可以灵活地与任何frontend或Head相连接。
想了解更多的话，可以查看StoryBlok的文章《无头CMS详解》和Builder.io团队的《Headless CMS全面指南》。文章里包含视觉图解、应用场景、好处等内容，以及其他很多内容。
为什么要用BCMS呢？
有许多实用的功能让BCMS物有所值。让我们看看其中的一些。
✅ BCMS 让你可以将内容存储在灵活的输入选项中，比如下拉菜单、文件、数字和富文本格式，所有这些都能很好地与 Next.js 应用程序配合使用。
✅ 您可以轻松地在 Next.js 项目中使用 BCMS 的文件夹系统上传和管理任何媒体（比其他系统要好得多）。查看 文档。
仪表板上的视频和音频文件
✅ 您还可以为您的电商网站获得动态组件。这些在 BCMS 中被称为 Widgets（部件），是可重复使用的构建模块，可以嵌入到内容区域中。更多详情，请阅读 文档。
"这是一张小部件的图片"
仪表盘上的小工具
✅ 还有Groups这一概念，它帮助你定义可重用的内容结构，如作者资料或联系地址，便于在你的Next.js应用中轻松检索。
你可以将它们用在模板、小部件或甚至在其他组中使用。阅读docs。
✅ 要在一个多语言内容创作环境中（如 BCMS）写内容，你只需点击 添加 按钮，从近百种语言中选择一个即可。
英语是默认语言，并且无法被删除，但是你可以删除其他语言，这也会删除与该语言相关的所有数据。
点击图片了解更多关于支持多种语言的网站的信息。
✅ 也有一个叫做 entry 的概念，它就像是根据预设模板创建的单个文档或条目。
模板决定每个条目应该包含哪些细节。这些细节被称为属性，出现在一个名为元数据的区域里。每个条目还有一个内容区域，您可以在这里写文本和添加互动元素。
例如，如果你创建了一个博客模版，你可以设置属性值如作者、分类、标签和发布日期这些属性值。然后，每次当你添加一个新的博客文章（条目entry）时，这些字段都会准备好让你填写。
你可以复制条目，删除条目，甚至可以设置条目状态来表明博客文章已准备好发布。更多详情请查阅文档。
"这是一些条目。" (Zhè shì yīqiē tiáomù.)
你可以通过这里点击了解更多功能：thebcms.com/nextjs-cms。
顺便提一句，BCMS是开源的，位于 GitHub上有好几百个星标。你可以从readme中找到工作、插件等。
现在既然我们已经理解了BCMS的独特概念，接下来我们要把BCMS和Next.js结合起来。
……
2. 一份教你如何一步步开始使用 BCMS 和 Next.js 的指南。我们会保持内容简单易懂，即使你完全不了解这些概念也没关系；如果你有兴趣从头开始了解所有内容，可以查看相关文档。
首先，你需要通过运行以下命令来安装BCMS CLI工具。
运行以下命令来创建一个新的Next项目：
npx @thebcms/cli create next进入全屏，退出全屏
你会获得安装包的选项，并且如果你还没有认证，可以用 BCMS 进行认证。
登录后，你会看到这样的仪表盘。你可以在app.thebcms.com/访问它。
这会创建一个新的 Next.js 项目，并让你根据需要选择一个启动模板。你也可以从零开始，但为了简单点，我选择博客模板。
这将创建一个新的 nextjs 项目，并会给你提供选择一个启动项目的选项（根据你的使用场景）。你也可以选择从头开始，不过为了方便，我选择了这个博客模板。
这个目录结构是这样的。
[
]
在你的项目根目录下，你可以找到bcms.config.cjs，这是主配置文件。
/**
* @type {import('@thebcms/cli/config').BCMSConfig}
*/
模块导出 = {
客户端: {
组织ID: process.env.BCMS_ORG_ID,
实例ID: process.env.BCMS_INSTANCE_ID,
API密钥: {
密钥ID: process.env.BCMS_API_KEY_ID,
密钥密文: process.env.BCMS_API_KEY_SECRET,
},
},
};
全屏模式；退出全屏
你将看到代码库中已经预填了一些内容，包括一个 .env 文件，以及必要的 BCMS 配置。
在仪表板中，你可以查看和调整设置，如果你想调整功能、网钩、依赖或环境变量参数。
设置页面
如果你不使用启动模板，你需要在设置中创建一个新的 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仪表板，在侧边栏查找模板选项。
模板图片如下: 
（点击查看）
你会发现一个已经创建好的博客模板，它包含了六个属性：标题、别名（slug）、日期、描述、封面图片和分类。每个属性类型都以徽章的形式显示，分别是媒体、文本和日期。
你可以根据需要轻松更新任何属性。
您也可以像展示的那样，从头开始创建模板。
从零开始创建模板
给模板添加属性
一旦您的模板准备好了，您就需要为它添加条目。在这个例子中，Blog 模板已经有四个条目。
每个条目信息都有所有需要的信息。
创建新条目时，系统会自动根据您的模板设置包含所需的字段。
同样地，只需上传封面图片并相应地选择它即可。
刷新本地环境后，更新就会出现。
该条目可经由你在控制台设置的 slug URL 访问。
：内部页面
我们来聊聊代码吧。
首先，在 /src 目录下创建 bcms.ts 文件即可初始化 BCMS 客户端。
在 /src/app/page.tsx 文件中，主要逻辑是用于从 BCMS 获取和显示数据。
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 = '我的博客';
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">嗨，我是 Anmol 👋</Tag>
<h1 className="text-4xl font-bold leading-none md:text-5xl">
这是我的个人博客
</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;
进入全屏模式 退出全屏模式
博客页面的路由定义于 src/app/blog/[slug]/page.tsx。
核心组件，如 ContentManager 和 Tag，位于 src/app/components 目录下。
如果你熟悉 Next.js 的概念，就很容易理解了。
3. 你可以使用的入门模板。
了解这些概念真的很棒，但为各种场景提供现成的方案真是太棒了。下面是一些入门模板，这些模板可能帮你节省不少时间和精力。
✅, 个人网站(https://thebcms.com/starters/personal)
这是我见过的最棒的作品集模板之一。它简洁明了，结构独特且合理，包含一些非常棒的板块。
这个用 Next.js 和 BCMS 建立的模板为开发者提供了很好的开始。如果你想了解更多，请阅读此教程。
你可以查看 GitHub 仓库 [https://github.com/bcms/starters/tree/master/next/personal] 和演示页面 [https://personal-starter.thebcms.com/]。
✅ 电商网站
](https://imgapi.imooc.com/3b799a6709ea3c9008000457.jpg)
注意：图片描述已翻译为“电子商务”，但请确保Markdown语法正确无误。
这是一个带有分析功能、多语言支持等特性的 next.js 电子商务模板。
如果您想详细了解包括模板、组、涉及元素及制作步骤的分解，请阅读这篇指南。
如果你打算开始做播客或创建一个以音频为重点的平台，这个模版非常不错。
官方教程(教程链接)主要针对Gatsby，不过GitHub仓库里也有提供Next.js版本。
✅ 职位板
这是为希望创建职位列表网站或组织的职业页面的人准备的。
官方的tutorial是关于Nuxt的，不过你也可以找到包含Next.js版本的GitHub仓库。
可以查看 GitHub 仓库和在线示例。
BCMS 提供了超过 10 个模板，这些模板适用于不同的框架如 Astro、Gatsby、Next 和 Nuxt。您可以在 官方 BCMS 仓库 或 thebcms.com/starters 官方网站上找到所有样本。
其他可用的模板包括机构网站、工作列表、会议网站、食谱网站等。每个模板都非常独特，这让事情变得更有意思了。
如果你想寻找其他选择，还可以参考一下Sanity、Contentful、Payload和Strapi这几个平台。
我知道外面还有其他不错的选择，不过BCMS也有它的优点。
有时候不太受重视的工具其实最适合你的工作方式。
如果有其他想法或试过哪些无头内容管理系统的选项，告诉我。
祝你今天过得愉快！下次聊 :)
| 你可以查看我的工作 在这里。 谢谢你的阅读！🥰 |
   |
|---|
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
