如何使用 Next.js 构建基本 CRUD 应用？

介绍 在本指南中，我们将通过使用 next js 构建一个完整的 crud（创建、读取、更新、删除）应用程序，前端使用 next js，后端解决方案使用 back4app。 您将设置一个名为 basic crud app nextjs 的项目，设计一个动态数据库架构，并将强大的 crud 功能集成到您的 next js 应用中。 我们将涵盖从配置您的 back4app 项目和设计集合到使用 parse sdk 或 rest/graphql 方法连接您的 next js 界面的所有内容。 到最后，您将拥有一个生产就绪的 web 应用程序，具备安全的用户身份验证和高效的数据管理。 关键要点 使用 next js 和 back4app 构建一个完整的 crud 应用程序。 学习设计一个灵活的后端架构，以满足您的数据需求。 利用直观的拖放管理界面进行数据管理。 发现部署的最佳实践，包括 docker 容器化和 github 集成。 先决条件 在开始之前，请确保您拥有： 一个具有新项目的 back4app 账户。 有关指导，请参阅 使用 back4app 入门 https //www back4app com/docs/get started/new parse app 。 一个 next js 开发环境。 使用 创建 next 应用 https //nextjs org/docs/api reference/create next app 或类似工具。确保安装了 node js（版本 14 或更高）。 对 javascript、next js 和 api 集成有基本了解。 如有需要，请访问 next js 文档 https //nextjs org/docs 以获取概述。 步骤 1 – 设置您的项目 启动一个新的 back4app 项目 登录到您的 back4app 账户。 点击仪表板上的“新应用”按钮 。 输入项目名称： basic crud app nextjs 并按照提示操作。 创建新项目 您的新项目出现在仪表板上，作为您后端的核心。 创建您的 next js 应用 打开你的终端并运行 npx create next app\@latest basic crud app nextjs 切换到你的项目目录 cd basic crud app nextjs 此命令设置一个准备好进行自定义的 next js 项目框架。 步骤 2 – 构建你的数据库模式 构建你的数据模型 对于这个crud应用程序，您将创建基本集合。以下是两个主要集合及其字段详细信息，以实现核心功能。 1 项目集合 此集合存储有关每个项目的详细信息。 字段 数据类型 描述 id 对象id 自动生成的唯一标识符。 标题 字符串 项目的名称或标题。 描述 字符串 该项目的简要总结。 创建于 日期 项目创建时的时间戳。 更新于 日期 最新更新的时间戳。 2 用户集合 此集合处理用户档案和认证数据。 字段 数据类型 描述 id 对象id 自动生成的唯一标识符。 用户名 字符串 用户的唯一用户名。 电子邮件 字符串 独特的电子邮件地址。 密码哈希 字符串 用于用户身份验证的安全哈希密码。 创建于 日期 账户创建的时间戳。 更新于 日期 上次账户更新的时间戳。 您可以通过在 back4app 仪表板中为每个集合创建一个新类并添加相关列来手动定义这些集合。 创建新类 通过选择适当的数据类型、命名列以及设置默认值或要求来创建字段。 创建列 使用 back4app ai 助手进行模式设置 back4app ai 助手简化了数据库模式生成。描述您所需的集合和字段，让助手自动生成结构。 使用 ai 助手的步骤： 打开 ai 助手： 在您的 back4app 仪表板菜单中找到它。 描述您的数据模型： 粘贴详细的提示，概述您的集合和字段要求。 审查并应用： 检查生成的模式并在您的项目中实施。 示例提示 create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) 这种方法不仅节省时间，还确保您的架构是一致且优化的。 步骤 3 – 激活管理界面和 crud 功能 探索管理界面 back4app 管理界面提供了一种无代码解决方案来管理您的后端数据。通过其直观的拖放系统，您可以轻松执行 crud 操作。 启用管理界面 在您的 back4app 仪表板中导航到 “更多” 部分 。 点击 “管理应用” 然后选择 “启用管理应用。” 通过设置您的第一个管理员用户来配置您的管理员凭据 。这也建立了角色，如 b4aadminuser 和必要的系统集合。 启用管理员应用 激活后，登录管理员界面以开始管理您的数据。 管理员应用仪表板 通过管理员界面执行crud操作 在管理员界面中，您可以： 创建记录： 在集合中使用“添加记录”按钮（例如，项目）插入新数据。 查看或更新记录： 点击记录以检查或修改其字段。 删除记录： 使用删除选项移除过时的条目。 这个简化的界面使数据管理变得简单高效。 步骤 4 – 将 next js 连接到 back4app 在设置好后端后，下一步是连接您的 next js 应用程序。 选项 a：使用 parse sdk 安装 parse sdk： npm install parse 在您的 next js 应用中初始化 parse： 创建一个文件（例如， lib/parseconfig js )： // lib/parseconfig js import parse from 'parse'; // replace with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 在 next js 页面中集成 parse： 例如，创建一个页面以获取和显示项目。 // pages/index js import { useeffect, usestate } from 'react'; import parse from ' /lib/parseconfig'; export default function home() { const \[items, setitems] = usestate(\[]); useeffect(() => { const loaditems = async () => { const items = parse object extend('items'); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error('error retrieving items ', error); } }; loaditems(); }, \[]); return ( \<div style={{ padding '2rem' }}> \<h1>item list\</h1> \<ul> {items map((item) => ( \<li key={item id}> \<strong>{item get('title')}\</strong> {item get('description')} \</li> ))} \</ul> \</div> ); } 选项 b：使用 rest 或 graphql 如果您不想使用 parse sdk，可以使用 rest 或 graphql 管理 crud 操作。例如，通过 rest 获取项目 const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('items fetched ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); 根据需要将这些 api 调用集成到您的 next js 组件中。 步骤 5 – 保护您的后端 实施访问控制列表 (acls) 通过将 acl 分配给对象来保护您的数据。例如，创建一个只有其所有者可以访问的项目 async function addprivateitem(itemdetails, owner) { const items = parse object extend('items'); const newitem = new items(); newitem set('title', itemdetails title); newitem set('description', itemdetails description); // configure acl owner only read and write const acl = new parse acl(owner); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); newitem setacl(acl); try { const saveditem = await newitem save(); console log('private item added ', saveditem); } catch (error) { console error('error adding item ', error); } } 配置类级权限 (clps) 在 back4app 控制面板中，调整每个集合的 clps，以限制数据访问仅限于授权用户。 步骤 6 – 实现用户身份验证 设置用户账户 back4app 利用 parse 的内置用户类进行身份验证。在您的 next js 应用中，管理注册和登录，如下所示： // pages/signup js import { usestate } from 'react'; import parse from ' /lib/parseconfig'; export default function signup() { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const registeruser = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('registration failed ' + error message); } }; return ( \<form onsubmit={registeruser}> \<input type="text" placeholder="username" value={username} onchange={(e) => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={(e) => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={(e) => setemail(e target value)} /> \<button type="submit">register\</button> \</form> ); } 类似的方法可以用于登录和会话管理。您还可以通过 back4app 控制面板启用其他功能，例如社交登录、电子邮件验证和密码恢复。 步骤 7 – 部署您的 next js 前端 back4app 的部署选项使您能够轻松托管您的 next js 应用，无论是通过 github 集成还是 docker 容器化。 7 1 构建您的生产版本 在终端中打开您的项目目录。 运行构建命令： npm run build 这将生成一个 next 文件夹，其中包含优化的静态和服务器渲染文件。 7 2 组织和上传您的代码 您的代码库应包含您 next js 应用的所有源文件。一个典型的结构可能是： basic crud app nextjs/ ├── node modules/ ├── pages/ │ ├── index js │ └── signup js ├── lib/ │ └── parseconfig js ├── public/ │ └── favicon ico ├── package json └── readme md 示例： lib/parseconfig js // lib/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 示例： pages/index js （请参阅步骤 4 中提供的代码片段） 将您的代码提交到 github 初始化一个 git 仓库： git init 添加所有文件： git add 提交您的更改： git commit m "initial commit of next js crud application" 创建一个 github 仓库： 例如，命名为 basic crud app nextjs 推送您的代码： git remote add origin https //github com/your username/basic crud app nextjs git git push u origin main 7 3 与 back4app web 部署集成 访问 web 部署： 登录到您的 back4app 控制面板，导航到您的项目，并选择 web 部署功能。 连接您的 github 账户： 按照提示链接您的代码库。 选择您的代码库和分支： 选择代码库（例如， basic crud app nextjs ) 和包含您代码的分支（例如， main )。 7 4 配置部署设置 构建命令： 如果您的代码库不包含预构建的 next 文件夹，请指定命令（例如， npm run build )。 输出目录： 将输出目录设置为 next ，以便 back4app 知道您的编译文件所在的位置。 环境变量： 添加任何必要的环境变量，例如 api 密钥。 7 5 使用 docker 对您的 next js 应用进行容器化 如果您更喜欢使用 docker 进行部署，请在您的代码库中包含一个 dockerfile ： # use an official node runtime as the base image from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the source code copy \# build the next js application run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/ next /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 在 back4app 中选择 docker 部署选项以容器化并部署您的应用程序。 7 6 启动您的应用程序 部署您的应用： 点击 back4app 中的 部署 按钮。 监控构建过程： back4app 将获取您的代码，执行构建命令，并部署您的应用程序。 访问您的实时应用： 一旦部署完成，将提供一个 url，您可以在其中访问您的 next js 应用。 7 7 验证您的部署 访问提供的 url 在您的浏览器中打开该 url。 测试功能 确保您的页面正确加载，并且所有 crud 操作正常工作。 必要时进行故障排除 使用浏览器开发者工具和 back4app 日志来诊断任何问题。 第 8 步 – 结论和后续步骤 恭喜您！您已经成功构建了一个强大的 crud 应用程序，使用了 next js 和 back4app。您配置了项目，设计了定制的集合，并将 next js 前端与安全的后端连接。 后续步骤 增强您的前端 通过详细视图、搜索功能或实时更新等高级功能扩展您的 next js 应用。 增强您的后端 探索云函数、第三方集成或其他访问控制。 继续学习 访问 back4app 文档 https //www back4app com/docs 和 next js 资源，以进一步优化和自定义。 通过遵循本教程，您现在具备使用 next js 和 back4app 创建可扩展和安全的 crud 应用程序的技能。祝您编码愉快！