这是技术进步的激动人心的时刻。
作为开发人员，我们所有人都需要从事一些可以创造收入或帮助我们建立声誉的副项目。
今天，我们将介绍 10 个激动人心的项目，并发现使用每个项目构建的 3-4 个热门应用。总共有 30 多个项目，您可以访问代码来学习。
这些将需要你花一段时间来编码，所以让我们开始吧！
动态图片
1. CopilotKit – 数小时内为您的产品提供 AI Copilots。
在 React 中集成 AI 功能非常困难，而这正是 Copilot 发挥作用的地方。这是一种简单而快速的解决方案，可将可用于生产的 Copilot 集成到任何产品中！
您可以使用两个 React 组件将关键 AI 功能集成到 React 应用中。它们还提供内置（完全可定制）Copilot 原生 UX 组件，例如<CopilotKit />、、、。<CopilotPopup /><CopilotSidebar /><CopilotTextarea />
从以下 npm 命令开始。
npm i @copilotkit/react-core @copilotkit/react-ui
Copilot Portal 是 CopilotKit 提供的组件之一，CopilotKit 是一个应用内 AI 聊天机器人，可以查看当前应用状态并在应用内采取行动。它通过插件与应用前端和后端以及第三方服务进行通信。
这就是您集成聊天机器人的方式。
必须CopilotKit包装与 CopilotKit 交互的所有组件。建议您也从这里开始CopilotSidebar（稍后您可以切换到不同的 UI 提供程序）。
"use client";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";
export default function RootLayout({children}) {
return (
<CopilotKit url="/path_to_copilotkit_endpoint/see_below">
<CopilotSidebar>
{children}
</CopilotSidebar>
</CopilotKit>
);
}
您可以使用此快速入门指南设置 Copilot Backend 端点。
此后，您可以让 Copilot 采取行动。您可以阅读如何提供外部上下文。您可以使用useMakeCopilotReadable和useMakeCopilotDocumentReadablereact hooks 来实现这一点。
"use client";
import { useMakeCopilotActionable } from '@copilotkit/react-core';
// Let the copilot take action on behalf of the user.
useMakeCopilotActionable(
{
name: "setEmployeesAsSelected", // no spaces allowed in the function name
description: "\"Set the given employees as 'selected'\","
argumentAnnotations: [
{
name: "employeeIds",
type: "array", items: { type: "string" }
description: "\"The IDs of employees to set as selected\","
required: true
}
],
implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds),
},
[]
);
您可以轻松集成 Vercel AI SDK、OpenAI API、Langchain 和其他 LLM 提供程序。您可以按照本指南将聊天机器人集成到您的应用程序中。
其基本思想是在几分钟内构建可用于基于 LLM 的应用程序的 AI 聊天机器人。
用例非常广泛，作为开发人员，我们绝对应该在下一个项目中尝试使用 CopilotKit。
CopilotKit 在 GitHub 上有 4.2k+ 颗星，并且有 200 多个版本，这意味着它们在不断改进。
🎯 使用 CopilotKit 构建的热门应用程序。
我们可以使用 CopilotKit 构建许多创新应用程序，让我们来探索一些脱颖而出的应用程序！
✅人工智能博客平台。
您可以阅读本文Next.js，使用Langchain、、Supabase和CopilotKit来构建这个神奇的应用程序。
LangChain & Tavily 用于网络搜索 AI 代理，Supabase 用于存储和检索博客平台文章数据，而 CopilotKit 用于将 AI 集成到应用程序中。
您可以检查GitHub 存储库。
✅文本到 Powerpoint 应用程序。
Next.js您可以使用、OpenAI和阅读本文CopilotKit来构建“文本转 Powerpoint”应用程序。
您可以检查GitHub 存储库。
✅ V0.dev 克隆。
如果您不熟悉，Vercel 的 V0 是一款人工智能工具，可让您根据提示生成 UI，以及许多其他有用的功能。
您可以使用Next.js、GPT4和CopilotKit创建 V0 的克隆。这篇文章被列为前 7 名，总的来说，这是一个值得添加到您的投资组合中的好项目。
您可以检查GitHub 存储库。
✅用你的简历聊天。
您可以阅读本文Next.js，使用OpenAI、和CopilotKit来构建这个出色的工具。
您不仅可以使用 ChatGPT 生成简历，还可以将其导出为 PDF，甚至可以通过与其对话进一步完善它。太酷了吧 :)
您可以检查GitHub 存储库。
2. Appwrite——您的后端减少了麻烦。
Appwrite 的开源平台允许您向您的产品添加 Auth、DB、功能和存储并构建任何规模的任何应用程序、拥有您的数据并使用您喜欢的编码语言和工具。
类似的选项是 supabase，但尽管它们有相似之处，但在几个方面却有很大不同。Restack 非常出色地介绍了Appwrite 与 Supabase 的比较。快来看看吧！
他们有很好的贡献指南，甚至不厌其烦地详细解释架构。
从以下 npm 命令开始。
npm install appwrite
您可以创建这样的登录组件。
"use client";
import { useState } from "react";
import { account, ID } from "./appwrite";
const LoginPage = () => {
const [loggedInUser, setLoggedInUser] = useState(null);
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [name, setName] = useState("");
const login = async (email, password) => {
const session = await account.createEmailSession(email, password);
setLoggedInUser(await account.get());
};
const register = async () => {
await account.create(ID.unique(), email, password, name);
login(email, password);
};
const logout = async () => {
await account.deleteSession("current");
setLoggedInUser(null);
};
if (loggedInUser) {
return (
<div>
<p>Logged in as {loggedInUser.name}</p>
<button type="button" onClick={logout}>
Logout
</button>
</div>
);
}
return (
<div>
<p>Not logged in</p>
<form>
<input
type="email"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<input
type="text"
placeholder="Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<button type="button" onClick={() => login(email, password)}>
Login
</button>
<button type="button" onClick={register}>
Register
</button>
</form>
</div>
);
};
export default LoginPage;
您可以阅读文档。
Appwrite 可以非常轻松地构建具有开箱即用扩展功能的可扩展后端应用程序。
Appwrite 最近发布的“Init”带来了一些令人兴奋的功能。我还没有完全确定 init 可以做什么，所以请发表评论让我们了解更多信息。
它有一些很酷的功能，有助于将我们的应用程序提升到一个新的水平。好奇心超载 :D
我很高兴它可以与 Twilio、Vonage 和 Mailgun 连接。更多选择意味着更好的产品。
Appwrite 在 GitHub 上已有 40k+ 颗星，并且即将v1.5发布。
🎯 使用 Appwrite 构建的热门应用程序。
Appwrite 非常受欢迎，尤其是因为它易于使用。以下是一些很酷的项目，你可以从中汲取灵感。
✅ FoodMagic——增强现实食品应用程序。
FoodMagic 采用增强现实和令人惊叹的用户界面，以独特的方式实现食品配送。
它是使用AppwriteFlutter 构建的。
涉及 Appwrite 函数、数据库、存储和更多概念，因此您可以通过它学到很多东西。
您可以检查GitHub 存储库。
✅回购评级者。
该项目允许您从开发者体验 (DX) 的角度对 GitHub 存储库进行评级。
它是使用Appwrite、Headless UI (React)、Next.js和构建的Tailwind CSS。
您可以检查GitHub 存储库并查看实时工作情况。
✅ Twitter 克隆- FreeCodeCamp（YouTube）。
它具有各种功能，例如使用电子邮件和密码注册和登录、发布推文文本、图像和链接、识别和存储主题标签、显示推文、喜欢推文、转发、评论/回复、关注用户、搜索用户、显示关注者、关注和最近的推文、编辑用户个人资料、显示带有特定主题标签的推文，以及名为“Twitter Blue”的高级功能。
讲师还实现了一个通知选项卡，当有人回复您、关注您、喜欢您的推文或转发时，该选项卡将显示通知。在本教程结束时，您将拥有一个功能齐全的 Twitter 克隆，您可以进一步自定义和改进它。这意味着一切 :)
他使用了Flutter、、Appwrite和，Riverpod并且该教程超过 9 个小时，因此非常长。
✅ Dart 在线编译器
用户无需在系统中安装 Dart SDK 即可编写和运行小型 Dart 程序。此应用使用 Appwrite 函数来运行 Dart 代码。
它是使用Appwrite、 和构建的Flutter。
这使用了 Appwrite Auth、函数和数据库来进行工作。
您可以检查GitHub 存储库。
3.Resend——面向开发人员的电子邮件 API。
您可以使用 React 构建和发送电子邮件。2023 年最受追捧的产品之一。
他们提供了许多 SDK 选项，因此您不必从您喜欢的技术堆栈切换。
Resend 非常值得信赖，很多公司（如 Payload 和 Dub）都在使用它。您可以查看客户列表。
从以下 npm 命令开始。
npm install @react-email/components -E
这就是将其与 next.js 项目集成的方法。
import { EmailTemplate } from '@/components/email-template';
import { Resend } from 'resend';
const resend = new Resend(process.env.RESEND_API_KEY);
export async function POST() {
const { data, error } = await resend.emails.send({
from: 'onboarding@resend.dev',
to: 'delivered@resend.dev',
subject: 'Hello world',
react: EmailTemplate({ firstName: 'John' }),
});
if (error) {
return Response.json({ error });
}
return Response.json(data);
}
您可以阅读文档。
如果您是一名教程爱好者，我推荐 YouTube 上的这个播放列表系列，它涵盖了大多数内容并且易于理解。
基本理念是提供简单、优雅的界面，让您在几分钟内开始发送电子邮件。它可与您喜欢的编程语言的 SDK 完美集成到您的代码中。
由于显而易见的原因，React 电子邮件在 GitHub 上拥有最多星标（12k+），并且超过 5000 名开发人员在他们的应用程序中使用它。
🎯 使用“重新发送”功能发送电子邮件的热门应用程序。
让我们看看一些使用“重新发送”电子邮件的应用程序。
✅ Gitroom。
提前安排好所有社交媒体帖子和文章。您还可以与其他团队成员合作交换或购买帖子。
它是使用NX (Monorepo)、NextJS (React)、NestJS、Prisma (Default to PostgreSQL)、Redis和构建的Resend。
您可以查看GitHub 存储库和网站。
Gitroom 在 GitHub 上有 3k+ 颗星。
✅任意邮件。
Anymail 让您可以使用您选择的事务电子邮件服务提供商 (ESP) 在 Django 中发送和接收电子邮件。
您可以查看GitHub 存储库和网站。他们在 GitHub 上有 1.5k+ 颗星，并且是 v10 版本。
✅徽章。
Badget 旨在通过用户友好的界面和强大的后端简化财务管理。
它是使用Next.js 14、Turborepo、Drizzle ORM、Planetscale、Clerk、、和构建的Resend。React EmailShadcn/uiStripe
您可以检查GitHub 存储库。
该项目很快将在 GitHub 上获得 2k 个 Star。
4. Shadcn UI - 您可以复制并粘贴到应用程序中的组件。
这个开源项目无需介绍。
由于其简单性、自定义选项和灵活性，它在推出后就很受欢迎。
然而，我确实同意它并不像看起来那么简单，特别是如果你不熟悉它的语法和结构。
使用以下命令（Next.js 应用程序）开始。
npx shadcn-ui@latest init
其余部分将自动完成，您可以导入组件并相应地使用它们。
Shadcn UI 在 GitHub 上拥有 55k+ 颗星，并有 3k+ 名开发人员在使用。
🎯 使用 Shadcn UI 构建的热门应用程序。
我不会介绍非常简单的项目，所以不用担心。
✅ 10000+ shadcn/ui 主题。
有了它，你可以探索、保存、生成新主题，甚至为随机主题点赞。这是你可以使用的优秀项目之一。
并且用户界面非常糟糕。
它是使用许多包构建的，例如，，，react-query当然还有。FramerZodshadcn ui
您可以查看GitHub 存储库和现场演示。
它在 GitHub 上有 600+ 颗星。
✅ Openv0。
我之前一直在研究 v0.dev，但后来发现它不是开源的。
我不会放弃这个想法。
Openv0 是另一个使用 AI 生成 UI 组件的项目。组件生成是一个多通道管道 - 其中每个通道都是一个完全独立的插件。
它支持 React、Next.js 和 Svelte 等前端框架。使用 Flowbite、NextUI 和 Shadcn 构建。
检查GitHub 存储库并阅读安装指南。
你也可以在Replit上运行它。它在 GitHub 上有 3k+ 个 Stars。
很多项目都使用Shadcn，因此请自行探索。
5. Buildship——低代码可视化后端构建器。
对于您正在构建的应用程序，使用无代码应用程序构建器（FlutterFlow、Webflow、Framer、Adalo、Bubble、BravoStudio……）或前端框架（Next.js、React、Vue……），您需要一个后端来支持可扩展的 API、安全的工作流、自动化等。
BuildShip 为您提供一种完全可视化的方式，以易于使用的完全托管体验可扩展地构建这些后端任务。
这意味着您无需在云平台上处理或部署事物或执行 DevOps。只需立即构建和交付即可 🚀
他们甚至与 TypeSense 合作并且发展非常迅速！
我尝试过Buildship，它的功能非常强大。
🎯 使用 Buildship 构建的热门应用程序。
大多数资源都是视频，但值得一看。官方 YouTube 频道上有很多教程，但这些是其中一些有趣的。
✅使用低代码和 AI 构建旅行 WebApp。
它是使用Buildship和构建的Locofy。Locofy.ai 用于从设计过渡到应用程序的前端，而 BuildShip.com 用于应用程序的后端。
它还可以计算旅程的实时距离和费用。他们使用 Figma 源进行设计。
✅ Telegram 上的 AI 助手。
您可以使用 OpenAI Assistant 和 BuildShip 创建智能电报机器人，无需编码。这将帮助您与数据聊天。看起来很令人兴奋，对吧 :)
✅ AI YouTube 时间戳生成器。
相信我，您将通过本教程学到很多东西。您可以查看有关自定义提示的未发布开发帖子。
您可以检查前端代码。
6. Taipy——将数据和 AI 算法融入可投入生产的 Web 应用程序。
Taipy 是一个开源 Python 库，用于轻松进行端到端应用程序开发，具有假设分析、智能管道执行、内置调度和部署工具等功能。
我相信大多数人都不明白 Taipy 是用来为基于 Python 的应用程序创建 GUI 界面并改善数据流管理的。
因此，您可以绘制数据集的图表并使用类似 GUI 的滑块来选择使用其他有用的功能来处理数据。
Streamlit 虽然是一款流行的工具，但在处理大型数据集时其性能会显著下降，因此不适合用于生产级用途。
而 Taipy 则简单易用，且性能丝毫不受影响。通过试用 Taipy，您将亲身体验其用户友好的界面和高效的数据处理能力。
在底层，Taipy 利用各种库来简化开发并增强功能。
使用以下命令开始。
pip install taipy
他们还使用分布式计算提高了性能，但最好的部分是 Taipy，它的所有依赖项现在与 Python 3.12 完全兼容，因此您在使用 Taipy 进行项目时可以使用最新的工具和库。
您可以阅读文档。
另外一个很有用的地方是，Taipy 团队提供了一个名为Taipy Studio 的VSCode 扩展，以加速 Taipy 应用程序的构建。
如果您想通过博客了解代码库结构，可以阅读HuggingFace 撰写的使用 Taipy 为您的 Python 中的 LLM 创建 Web 界面。
Taipy 在 GitHub 上拥有 8k+ 颗星，并且正在发布，v3因此它们在不断改进。
🎯 使用 Taipy 构建的热门应用程序。
尝试新技术通常很难，但 Taipy 提供了 10 多个带有代码和适当文档的演示教程供您遵循。我们将看到开发人员构建的其他一些项目。
✅明智地使用钱包。
WalletWise 就像是我们财务上的贴心小帮手，帮助我们记录收入和支出，使用 Gemini 进行交易，使用 Taipy 了解支出。
对用户的收入和支出进行分析，以数学方式显示，并展示 7 条做出更好、更明智的财务决策的技巧。
它还有一个可视化工具，您可以在其中看到不同的标题以了解有关您的支出的更多信息。
从创造力方面来看，这是下面提到的所有内容中最好的。
✅人口普查。
通过由 Taipy 提供支持的“人口普查”项目，将数据编织成动态可视化效果，揭开 2021 年尼泊尔的住房和人口故事。
它有很多选项，所以如果您想用更少的资源学到更多的东西，这是最好的选择！
✅太平象棋。
这是我最喜欢的应用程序，因为我喜欢国际象棋。哈哈！
这是一个基于 20,000 场比赛的国际象棋可视化工具。您可以查看所有比赛、他们所下的开局、对手、最常用的开局以及最成功的开局。您可以查看数据上的热图和图表。
您还可以查看奥运奖牌 Taipy 应用程序，该应用程序的仪表板上显示了有关奥运奖牌、Covid 仪表板和数据可视化的信息。
7. xyflow——使用 React 构建基于节点的 UI。
XYFlow 是一个功能强大的开源库，用于使用 React 或 Svelte 构建基于节点的 UI。它是一个 mono repo，提供React Flow和Svelte Flow。让我们进一步了解 React flow 可以做什么。
您可以观看此视频，在 60 秒内了解 React Flow。
部分功能在专业模式下可用，但免费套餐中的功能足以实现高度交互的流程。React 流程使用 TypeScript 编写，并使用 Cypress 进行测试。
从以下 npm 命令开始。
npm install reactflow
以下是如何创建两个节点Hello& World，它们通过一条边连接。节点具有预定义的初始位置以防止重叠，我们还应用了样式以确保有足够的空间来渲染图形。
import ReactFlow, { Controls, Background } from 'reactflow';
import 'reactflow/dist/style.css';
const edges = [{ id: '1-2', source: '1', target: '2' }];
const nodes = [
{
id: '1',
data: { label: 'Hello' },
position: { x: 0, y: 0 },
type: 'input',
},
{
id: '2',
data: { label: 'World' },
position: { x: 100, y: 100 },
},
];
function Flow() {
return (
<div style={{ height: '100%' }}>
<ReactFlow nodes={nodes} edges={edges}>
<Background />
<Controls />
</ReactFlow>
</div>
);
}
export default Flow;
它看起来是这样的。您还可以添加标签、更改类型并使其具有交互性。
您可以在 React Flow 的 API 参考中看到完整的选项列表以及组件、钩子和实用程序。
最好的部分是您还可以添加自定义节点。在自定义节点中，您可以呈现所需的一切。您可以定义多个源和目标句柄并呈现表单输入或图表。您可以查看此codesandbox作为示例。
您可以阅读文档并查看Create React App、Next.js 和 Remix 的示例 React Flow 应用程序。
React Flow 带有几个额外的插件组件，可以帮助您使用 Background、Minimap、Controls、Panel、NodeToolbar 和 NodeResizer 组件制作更高级的应用程序。
例如，你可能注意到许多网站的背景中都有圆点，这增强了美感。要实现这种模式，你只需使用 React Flow 中的 Background 组件即可。
import { Background } from 'reactflow';
<Background color="#ccc" variant={'dots'} /> // this will be under React Flow component. Just an example.
如果你正在寻找一篇速成文章，我建议你查看一下Webkid 编写的React Flow - 一个用于渲染交互式图形的库。React Flow 由 Webkid 开发和维护。
它在 GitHub 上有 19k+ 颗星，并且展示了v11.10.4它们不断改进的成果，npm 包的每周下载量超过 400k。这是您可以轻松使用的最佳项目之一。
🎯 使用 React Flow 构建的热门应用程序。
许多公司都在使用 React flow，例如 Zapier 和 Stripe。它足够可靠，值得使用。由于 React 更受欢迎，因此我不会介绍使用 Svelte Flow 制作的应用程序。
✅条纹文档。
Stripe 使用它，特别是展示结账如何运作。
您可以阅读完整的文档。
✅ Shaderfrog。
我选择这个是因为这个项目非常酷。
✅类型形式。
Typeform 使用它来展示如何使用逻辑图向表单添加逻辑。
您还可以在FlowwiseAI和Doubleloop上发现它的使用。顺便说一下，Supabase 是 GitHub 上 XYflow 的赞助商之一。
8. Pieces——您的工作流程副驾驶。
Pieces 是一款支持人工智能的生产力工具，旨在通过智能代码片段管理、情境化副驾驶交互和有用材料的主动呈现来帮助开发人员管理工作流程的混乱。
它最大限度地减少了上下文切换，简化了您的工作流程，并提升了您的整体开发体验，同时通过完全离线的 AI 方法维护了您工作的隐私和安全。太棒了 :D
它与您最喜欢的工具无缝集成，以简化、理解和提升您的编码流程。
它具有比我们看到的更多令人兴奋的功能。
它能以闪电般的搜索速度找到您需要的资料，让您可以根据自己的喜好通过自然语言、代码、标签和其他语义进行查询。可以说它是“您的个人离线谷歌”。
Pieces 使用 OCR 和 edge-ML 升级屏幕截图，以提取代码并修复无效字符。因此，您可以获得极其准确的代码提取和深度元数据丰富。
您可以查看Pieces 提供的完整功能列表。
他们为 Pieces OS 客户端提供了大量 SDK 选项，其中包括TypeScript、Kotlin、Python和Dart。
🎯 使用 Pieces 构建的热门应用程序。
由于它更像是一个工具，所以不会有那么多项目，但开发人员仍然使用它来构建很棒的项目。
✅办公桌伙伴。
一个社区项目，通过分析和 Copilot Conversation 帮助您了解、评估和改善您的编码习惯。
主要使用的语言是 TypeScript。
您可以检查GitHub 存储库。
✅ CLI 代理。
一个全面的命令行界面 (CLI) 工具，旨在与 Pieces OS 无缝交互。它提供一系列功能，例如资产管理、应用程序交互以及与各种 Pieces OS 功能的集成。
主要使用的语言是 Python。
您可以检查GitHub 存储库。
✅ Streamlit 和 Pieces。
Pieces Copilot Streamlit Bot 是一款使用 Streamlit 构建的交互式聊天机器人应用程序，旨在为用户提供一个无缝界面来实时提问和接收答案。
主要使用的语言是 Python。
您可以检查GitHub 存储库。
9. Typesense – 快速、容忍拼写错误、内存模糊搜索引擎。
Typesense 是一个开源的、容忍输入错误的搜索引擎，针对即时（通常少于 50 毫秒）的输入时搜索体验和开发人员的工作效率进行了优化。
如果您听说过 ElasticSearch 或 Algolia，那么一个很好的认识 Typesense 的方式是，它是 Algolia 的开源替代品，解决了一些关键问题，并且是一种更易于使用、包含电池的 ElasticSearch 替代品。
您可以在Algolia、ElasticSearch、Meilisearch 和 Typesense之间进行比较。
它是一种快速、容错、内存模糊搜索引擎，用于构建令人愉悦的搜索体验
您可以使用此命令安装 Typesense 的 python 客户端。
pip install typesense
根据文档，在这些情况下不应使用 Typesense。
a. Typesense 不应被用作主数据存储，它存储着您数据的唯一副本。
b. Typesense 通常不适合搜索应用程序日志。
我建议你阅读快速入门指南，它会一步步指导你如何安装和构建搜索 UI。他们还提供了清晰的基准测试，数据集高达 28M，因此你可以检查你将获得的性能。
如果你更喜欢教程，那么我建议你观看这个YouTube 视频。你将获得 Typesense 的概述，作者将向你展示端到端的演示。
TypeSense 在 GitHub 上有 17k+ 颗星，目前版本号为 26，非常惊人。它是用 C++ 构建的。
🎯 使用 Typesense 构建的热门应用程序。
一些使用 Typesense 的现场演示和应用程序。
✅ 现场演示。
他们还提供现场演示，展示 Typesense 在大型数据集上的运行情况，例如：
其他一些公司则使用 Typesense 云来完成整个工作。
这些公司包括 Codecademy、Logitech、Buildship、n8n 和 Storipress CMS。
10. Payload——构建未来网络的最快方式。
构建现代后端 + 管理 UI 的最佳方式。没有黑魔法，全是 TypeScript，完全开源，Payload 既是一个应用框架，又是一个无头 CMS。这是我全心全意欣赏的少数项目之一。
他们的网站拥有最简洁的用户界面之一，我看过 1000 多个网站，包括一些非常疯狂的网站。快去看看吧！
您可以观看这个 YouTube 视频，其中 James（联合创始人）讨论了 Payload CMS 简介以及它如何缩小无头 CMS 和应用程序框架之间的差距。
简而言之，Payload 是一个无头 CMS 和应用程序框架。它旨在极大地促进您的开发过程，但重要的是，随着您的应用程序变得越来越复杂，它不会妨碍您。
使用以下命令开始。
npx create-payload-app@latest
您可以阅读Payload 与普通 CMS 的区别的完整功能列表。
如果你是 next.js 的粉丝，我推荐你阅读《使用 Next.js 和 Payload 的终极指南》。
Payload 也正在为 v3 beta 版本的发布而努力，所以请继续关注。
Payload 在 GitHub 上拥有 19k+ 颗星，被 8k+ 名开发人员使用。
🎯 使用 Payload 的热门应用程序 + 模板。
我们将看到可帮助您在特定用例中使用 Payload 的模板和应用程序。
✅混音与有效载荷
带有 Remix 和 Payload 的 Mono repo 模板。
这可以帮助您设置 Payload CMS 与 Remix 一起进行内容管理，这样每个应用程序都被分成其包（包括快速服务器应用程序）。
✅ Astro 和 Payload
这是 Astro 和 Payloadcms 的预配置设置，旨在让您轻松开始构建网站。使用 Astroad，您将拥有一个完整的开发环境，可以使用 Docker 在本地运行。此设置简化了网站在部署到生产环境之前的测试和开发。
✅电子商务模板。
他们还提供了一个电子商务模板，可帮助您将更多精力放在业务战略上，而不是技术上。您的 API 属于您自己，您的数据也属于您。您不必受制于第三方服务，第三方服务可能会向您收取 API 超额费用（每月费用除外），并且可能会限制您对数据库的访问。运营在线商店的费用绝不会超过您的服务器费用（加上支付处理费）。
开始做一些我们不喜欢的事情总是感觉很奇怪，所以你可以阅读如何使用使用此模板的Next.js 构建电子商务网站。
一些使用 Payload 的知名公司有Speechify、Bizee等等。
阅读以下案例研究。它们将向您介绍 Payload 的功能以及它如何奠定坚实的基础。
✅快犁
Quikplow 是一个创新的按需服务平台，通常被称为“扫雪机界的 Uber”。
Quikplow 开发和部署功能齐全的应用程序后端的速度不仅无与伦比，而且几乎闻所未闻。整个应用程序（包括身份验证、基于位置的搜索、电子商务功能等）的开发时间不到 120 天。
这一前所未有的速度得益于 Payload 的身份验证、CRUD 操作和管理面板生成功能，为 Quikplow 节省了宝贵的开发时间和预算资源。
✅纸三角形
Paper Triangles 需要一个能够体现其知名沉浸式体验的在线形象，但却发现自己受到过时且缓慢的内容管理系统的限制。
与他们的代理合作伙伴 Old Friends 一起，他们面临的挑战是建立一个能够反映他们尖端工作的网站 - 需要自动播放视频、动态动画、集成相机库等，同时又不能牺牲速度或内容更新的便利性。
Payload 成为了完美的选择。它的开源特性以及 TypeScript 和 React 的强大基础使其成为开发高度定制、交互式前端的理想选择。
对于像 Old Friends 这样的机构来说，Payload 是向 Paper Triangles 等客户兑现承诺的最佳选择。
Old Friends 的设计工程师 James Clements 表示：“Payload 为我们的客户提供了易于使用的界面，并为我们执行定制设计提供了开发人员的自由。”
✅比兹
他们需要在重新构建新 CMS 平台的同时迁移和彻底检查 2,500 个页面，并在全面重塑品牌的情况下实施全面的网站重新设计——仅用三个月时间。
为了兑现对 Bizee 的承诺，Riotters（代理商）依靠 Payload 的简洁、TypeScript 驱动的架构，事实证明，该架构具有变革性，简化了设计集成并确保了无错误、可维护的代码。这加速了内容迁移并保留了 SEO 和用户体验。
它甚至促进了从设计到开发的过程——帮助 Riotters 将 Figma 概念转化为实时实现。
至关重要的是，Payload 与 Next.js 的自然协同作用催化了开发人员、设计师、用户体验专业人员、质量保证团队和营销人员之间的跨职能协作。
很多公司都决定使用 Payload，这是他们做出的最佳决定之一。无论如何，去探索你能用它做什么吧。
呼！
我花了很长时间才写完。希望你喜欢。
我明白！
建立良好、长期的副业可能很困难，但即使是一个简单的用例也能带来非凡的成果。谁知道呢？您甚至可能会获得对您长期有帮助的直接机会。
我试图介绍每个项目制作的最好和最有用的应用程序。
无论如何，请让我们知道您的想法，您是否计划在未来构建任何可扩展的附带项目？
祝您度过愉快的一天！下次再见。