只需几秒即可将 Next.js 管理后台添加到您的网站

为所有自由职业客户制作管理后台一直是个挑战。创建新数据库、将其添加到网站、启用身份验证等等，实在是太麻烦了。

很多人选择使用 WordPress 而不是编写原始代码，这很容易理解，主要是因为 WordPress 的控制面板非常方便，编辑起来也很轻松。

猜猜看？我刚刚为所有 React 和 Next.js 开发者们做了些改动。你们再也不用为了使用自己喜欢的技术栈而放弃 WordPress，也不用花费数小时绞尽脑汁地编写后台管理面板了。只需克隆一个 git 仓库，编辑一些 JSON 和环境变量，你的后台管理面板就准备就绪了！

来看看演示并亲自体验一下吧！
https://next-admin.ironcladdev.repl.co/

获取代码

打开你常用的代码编辑器并运行git clone https://github.com/Conner1115/next-admin.git。你甚至不需要运行任何命令，npx create-next-app因为所有文件都已经准备就绪。只需运行命令npm run dev，然后就可以开始围绕它构建你的网站了。

自定义身份验证

在开始管理后台操作之前，请先打开配置.env文件。设置一个强密码（用于登录和退出后台），并为会话 cookie 设置一个较长的随机字符串。这样做可以增强安全性并防止暴力破解。

您需要在.env文件中设置两个字段：ADMIN_SESSION一个是长随机字符串，ADMIN_PASSWORD另一个是您用于登录的密码。

别担心，我已经对密码等设置了速率限制（每 30 分钟 3 次登录失败），所以不用担心坏人会入侵你的网站并破坏所有内容。

自定义仪表盘

进入data文件夹，然后打开data.json。在这里你可以控制可以编辑的不同类型的数据。

如果你访问演示中的管理页面（该页面可能已严重损坏），并进行一些操作，你会发现这些字段由单个字符串字段、多个字符串字段和数组组成。

创建一个字符串字段

打开data.json，清除所有现有字段，然后添加一个项目"homepage"。

{
  "homepage": "This is the text that goes on the homepage"
}

在终端中运行命令npm run dev，然后访问http://localhost:3000/admin。
登录后应该就能看到一些内容了。

单文本字段适用于编辑简短的标题、描述、段落等。而对于包含多个段落、功能介绍或其他需要更多内容的页面，则可以使用多字符串字段。

创建多字符串字段

打开data.json并添加一个名为“paragraphs”的字段，该字段类型为字符串数组。此数组的长度可以是任意的。

{
  "homepage": "This is the text that goes on the homepage",
  "paragraphs": ["This is paragraph One", "This is paragraph Two", "I'm the third paragraph"]
}

在这个例子中，该数组的长度为 3，并生成三个可编辑的文本字段。

数组字段

数组字段对于简单的博客和其他不需要身份验证的存储功能尤其有用。

创建一个名为“posts”的新字段，并将其设置为空数组。

{
  "homepage": "This is the text that goes on the homepage",
  "paragraphs": ["This is paragraph One", "This is paragraph Two", "I'm the third paragraph"],
  "posts": []
}

请schemas.json添加一个名为“posts”的对象。然后您可以设置输入字段。请确保 schemas.json 中的字段名称与 data.json 中的字段名称相同。

{
  "posts": {
    "title": "text",
    "text": "textarea",
    "date": "date",
    "luckynumber": "number"
  }
}

当然，这只是一个例子，"date"它们"luckynumber"只是用来展示有哪些输入类型。除了“textarea”之外，其他输入类型始终是 HTML<input>标签中的类型。如果使用“textarea”，<textarea>则会生成一个标签。

现在前往您的管理后台并尝试一下。创建帖子后，您应该会在 schema 数组中看到一个新元素data.json。

{
  ...
  "posts": [
    {
      "title": "Title",
      "text": "Test Text",
      "date": "2022-01-21",
      "luckynumber": "1",
      "id": "d8d2ef38-b02c-496b-9833-c53fa3b063c9"
    }
  ]
}

所有模式类型数组字段都会自动赋予一个随机值uuid。

您可以根据需要向对象添加任意数量的字段data.json。所有顶级对象键都将添加到控制面板中，并且可以在控制面板中进行编辑。

访问数据

要从中获取数据data.json并在您的页面中使用它，只需将其导入到您的某个页面中，并将其作为有效的 javascript 对象使用即可。

import json from '../../data/data.json';

export default function Home(){
  return (
    <div>
      <h1>{json.headline}</h1>
    </div>
  );
}

您可以从应用程序的客户端以及服务器端访问 json 文件。

写信给data.json

除了原始管理 API 路由之外，还可以通过其他 API 路由向 data.json 写入数据。您可以使用writeJSON位于 . 下的函数scripts/util.js。

该writeJSON函数接受一个参数，该参数是一个应该返回对象的函数。

返回的对象将完全覆盖整个json文件。

{
  "field": "value"
}

writeJSON((json) => ({
  ...json,
  //updating a field
  "field": "newvalue",
  //adding a new field
  "field2", "value"
}))

玩得开心，尽量不要过度滥用演示环境，并且可以在任何项目中使用此管理页面。

喜欢这篇文章吗？记得在dev上关注我，订阅我的网站，并点赞支持一下！