Strapi Starter Next 14, Tailwind, Typescript and Strapi

注意: 本项目由 Trecia, Daniel 和 Paul 出于对 Strapi 的喜爱而启动。我们都还很陌生 Next 14 和 Typescript。如果您发现任何错误或改进建议，请随时创建 issue。感谢大家的支持和参与。

欢迎使用 Strapi

Strapi 社区版是一个免费且开源的无头 CMS，使您可以管理任何内容，任何地方。

• 自托管或云端: 您可以按照自己的方式托管和扩展 Strapi 项目。您可以通过部署到 Strapi Cloud 来节省时间，或者部署到您想要的托管平台：AWS、Azure、Google Cloud、DigitalOcean。
• 现代管理面板: 优雅、完全可定制且完全可扩展的管理面板。
• 多数据库支持: 您可以选择您喜欢的数据库：PostgreSQL、MySQL、MariaDB 和 SQLite。
• 可定制: 通过完全自定义 API、路由或插件来满足您的需求，可以快速构建您的逻辑。
• 快速且强大: 基于 Node.js 和 TypeScript，Strapi 提供可靠和稳定的性能。
• 前端无依赖: 使用任何前端框架（React、Next.js、Vue、Angular 等）、移动应用程序甚至物联网。
• 默认安全: 可重复使用的策略、CORS、CSP、P3P、Xframe、XSS 等。
• 强大的 CLI: 动态创建项目和 API。

功能

• 内容类型构建器: 通过为内容管理人员提供创建任何页面自由，包括 字段、组件和 动态区域，构建最灵活的发布体验。
• 媒体库: 将您的图像、视频、音频或文档上传到媒体库。轻松找到合适的资产，编辑并重复使用。
• 国际化: 国际化 (i18n) 插件允许 Strapi 用户创建、管理和分发不同语言（称为“区域设置”）的本地化内容。
• 基于角色的访问控制: 为管理员和最终用户创建无限数量的自定义角色和权限。
• GraphQL 或 REST: 使用 REST 或 GraphQL 消费 API。

您可以在 Strapi Cloud 或 Strapi 企业版 中解锁 SSO、审计日志、审核工作流等额外功能。

入门

如果您更喜欢引导您完成设置过程的视频，可以在 这里 找到。

1. 本地克隆存储库：

  git clone https://github.com/strapi/nextjs-corporate-starter.git
    or
  gh repo clone strapi/nextjs-corporate-starter

2. 运行 setup 命令来设置前端和后端依赖关系：

  yarn setup

3. 接下来，导航到您的 /backend 目录并设置您的 .env 文件。您可以使用 .env.example 文件作为参考：

HOST=localhost
PORT=1337
APP_KEYS="toBeModified1,toBeModified2"
API_TOKEN_SALT=tobemodified
ADMIN_JWT_SECRET=tobemodified
JWT_SECRET=tobemodified
TRANSFER_TOKEN_SALT=tobemodified

4. 运行以下命令开始你的项目：

  yarn build
  yarn develop

您将被提示创建您的第一个管理员用户。

太好了，您的项目现在已经运行。让我们添加一些数据。

播种数据

我们将使用我们的 DEITS 功能，它允许轻松地将数据导入您的项目。

您可以在我们的文档中了解更多信息 这里。

在我们的项目的根目录中，我们有我们的 seed-data.tar.gz 文件。我们将使用它来播种我们的数据。

1. 打开您的终端并确保您仍然位于您的 backend 文件夹中。

2. 运行以下命令以播种您的数据：

  yarn strapi import -f ../seed-data.tar.gz

这将本地导入您的数据。 请重新登录您的管理面板以查看新导入的数据。

这是一个快速视频，涵盖了初始设置和数据播种。

https://github.com/strapi/nextjs-corporate-starter/assets/6153188/80f00bf5-d17b-449d-8a0d-7f0d9614f40b

设置前端

接下来，我们需要切换到我们的 /frontend 目录并创建我们的 .env 文件，并将以下内容粘贴进去。

NEXT_PUBLIC_STRAPI_API_TOKEN=your-api-token
NEXT_PUBLIC_PAGE_LIMIT=6
NEXT_PUBLIC_STRAPI_FORM_SUBMISSION_TOKEN=your-form-submission-token
NEXT_PUBLIC_STRAPI_API_URL=http://localhost:1337

在启动我们的 Next JS 应用之前，我们需要进入 Strapi 后台并创建两个令牌，用于 表单提交 和显示我们的 内容。

在 Strapi 管理面板中，导航到设置 -> API 令牌，然后点击 创建新的 API 令牌。

以下是我们的令牌设置

名称：公共 API 令牌内容 描述：访问公共内容。 令牌持续时间：无限 令牌类型：自定义

在权限中，让我们授予以下访问权限。

内容	权限
文章	find and findOne
作者	find and findOne
类别	find and findOne
全局	find
页面	find and findOne
产品功能	find and findOne

获取令牌后，将其添加到 .env 文件中的 NEXT_PUBLIC_STRAPI_API_TOKEN 变量名中。

或者： 您可以创建一个只读令牌，该令牌将授予对所有端点的读取权限。

在这个特定的项目中，这不是问题。尽管上述是推荐的方法，但也想在这里展示这个选项。

创建令牌时，只需从令牌类型下拉菜单中选择 只读 选项即可。

接下来创建一个允许我们提交表单的令牌。

名称：公共 API 表单提交 描述：表单提交。 令牌持续时间：无限 令牌类型：自定义

在权限中，让我们授予以下访问权限。

内容	权限
潜在客户表单提交	create

将您的令牌添加到 .env 文件中的 NEXT_PUBLIC_STRAPI_FORM_SUBMISSION_TOKEN 变量名中。

设置环境变量后，您可以通过运行 yarn dev 来启动前端应用程序。

您现在应该看到您的 Next JS 前端。

并发启动两个项目

我们也可以使用 concurrently 包使用一个命令启动两个项目。

您可以在根文件夹中的 package.json 文件中找到该设置。

{
  "scripts": {
    "frontend": "yarn dev --prefix ../frontend/",
    "backend": "yarn dev --prefix ../backend/",
    "clear": "cd frontend && rm -rf .next && rm -rf cache",
    "setup:frontend": "cd frontend && yarn",
    "setup:backend": "cd backend && yarn",
    "setup": "yarn install && yarn setup:frontend && yarn setup:backend",
    "dev": "yarn clear && concurrently \"cd frontend && yarn dev\" \"cd backend && yarn develop\""
  },
  "dependencies": {
    "concurrently": "^7.6.0"
  }
}

进入根文件夹并安装软件包，yarn

您可以通过运行 yarn dev 启动这两个应用程序。

结论

希望您发现这个 starter 有用，它是一个最简单的例子，可以帮助您快速上手。

很乐意听到您将使用它构建什么。

如果您发现错误或有任何建议，请随时创建 issue。

感谢您，并祝您一切顺利！

贡献 Next.js 企业级 Starter 仓库

我们很高兴您正在考虑为 Next.js 企业级 Starter 开源项目做出贡献！如果您不确定或害怕任何事情，请记住，您在这里不会出错。任何贡献都是有价值的，我们感谢您！

本文档旨在提供您进行贡献所需的所有信息。

先决条件

在您开始贡献之前，您需要安装以下内容：

• Node.js 和 npm：您可以从官方 Node.js 网站 下载它们。
• Git：您可以在官方 Git 书 中找到 Git 的安装说明。

贡献步骤

1. 复制仓库

在您的网络浏览器中，导航至 https://github.com/strapi/nextjs-corporate-starter。单击页面右上角的“Fork”按钮。这将在您的 GitHub 帐户中创建仓库的副本。

2. 克隆您的副本

现在，转到您的仓库版本。您可以通过导航到 https://github.com/USERNAME/nextjs-corporate-starter（用您的 GitHub 用户名替换“USERNAME”）来做到这一点。在这里，单击“Clone”按钮，然后单击“复制到剪贴板”以复制 git URL。

接下来，您需要打开终端，导航到您要存储项目的文件夹，然后键入以下命令，然后按“Enter”：

git clone PASTE_CLONED_REPOSITORY_URL

将 'PASTE_CLONED_REPOSITORY_URL' 替换为您先前复制的 URL。此命令会将您的仓库克隆到您的计算机上。

3. 添加上游仓库

在开始贡献之前，您必须设置对原始仓库的引用。您可以使用以下命令实现：

git remote add upstream https://github.com/strapi/nextjs-corporate-starter.git

此命令添加一个名为“upstream”的新远程库，它指向原始仓库。

4. 同步您的派生仓库

在开始进行更改之前，您应该将您的派生仓库与上游的最新更改同步。步骤如下：

a. 获取分支及其对应的提交：

git fetch upstream

b. 切换到你的分支的主分支:

git checkout main

c. 将上游主分支的更改合并到本地主分支：

git merge upstream/main

这会使您的分支主分支与上游仓库同步，而不会丢失您的本地更改。

5. 创建一个分支

进行贡献时，最好在新分支而不是主分支中进行更改。您可以使用以下命令创建一个新分支并切换到它：

git checkout -b BRANCH_NAME

将 'BRANCH_NAME' 替换为描述您计划进行更改的名称。

6. 进行修改

现在，您可以开始修改项目了。随意进行您认为可以增强项目的修改。

7. 提交修改

完成修改后，您需要提交它们。这就像在游戏中创建一个保存点一样。您可以使用以下命令进行操作：

git add -A
git commit -m "Your detailed commit message"

将“Your detailed commit message”替换为对所做更改的描述。

8. 推送更改

提交更改后，需要将它们推送到 GitHub 上的分支存储库。可以使用以下命令执行此操作：

git push origin BRANCH_NAME

将 'BRANCH_NAME' 替换为您之前创建的分支名称。

9. 创建拉取请求

推送更改后，您可以创建拉取请求 (PR)。在您的网络浏览器中导航到您的 forked 仓库，然后点击“Pull request”（页面顶部附近），再点击“New pull request”。确保基本仓库为原始仓库，基本分支为“main”，并且头部仓库为您的仓库，比较分支为您创建的分支。

输入 PR 标题并描述您所做的更改。准备就绪后，点击“Create pull request”。

恭喜！🎉

您已经为 Next.js Corporate Starter 项目做出贡献！团队将审查您的更改，并可能提出一些修改或改进建议。一旦您的更改得到批准，它们将被合并到主代码库中。

感谢您的贡献，我们很感激！

请记住，每个人在开源领域都是新手。如果您对某些内容不确定，请随时寻求帮助。祝您好运，快乐编码！

嘘…

如果您经常做出贡献，我们已经在 package.json 中提供了一个脚本来帮助您将本地项目与上游（原始）项目的 main 分支保持同步。只需执行以下命令：

yarn repo:upstream

常问问题

如何添加额外页面？

请观看此视频，我将指导您完成操作。

如何更新我的 Strapi 版本？

请查看此问题评论