前言
在现代化的 Web 开发中，前端框架的选择越来越多。Next.js 和 GraphQL 是两个非常流行的技术，它们可以让我们更高效地构建 Web 应用程序和服务。在本文中，我们将使用 Next.js 和 GraphQL 来构建一个博客系统，这将是一个详细的指南，包含代码示例和深入的学习。
技术栈
- Next.js：一个 React 框架，用于构建 SSR 和静态网站。
- GraphQL：一种用于 API 开发的查询语言。
- Apollo：一个用于构建 GraphQL 客户端的 JavaScript 库。
- Prisma：一个用于构建现代数据库的 ORM。
目标
我们的目标是构建一个博客系统，具有以下功能：
- 用户可以查看文章列表。
- 用户可以查看单篇文章。
- 用户可以创建、编辑和删除文章。
- 用户可以进行身份验证。
步骤
1. 创建 Next.js 应用程序
首先，我们需要创建一个 Next.js 应用程序。在终端中，运行以下命令：
npx create-next-app blog
这将创建一个名为 "blog" 的新应用程序。现在，我们可以进入该目录并启动应用程序：
cd blog npm run dev
在浏览器中，打开 http://localhost:3000，您应该看到一个默认的 Next.js 首页。
2. 安装 Apollo 和 GraphQL
接下来，我们需要安装 Apollo 和 GraphQL。在终端中，运行以下命令：
npm install apollo-boost graphql react-apollo
这将安装 Apollo 和 GraphQL 所需的所有依赖项。
3. 创建 GraphQL API
我们将使用 Prisma 来创建我们的 GraphQL API。Prisma 是一个现代 ORM，它使我们能够更轻松地管理我们的数据库。
首先，我们需要安装 Prisma。在终端中，运行以下命令：
npm install prisma -D
接下来，我们需要在项目根目录中创建一个名为 "prisma" 的新目录。在 "prisma" 目录中，创建一个名为 "schema.prisma" 的新文件，然后添加以下内容：
-- -------------------- ---- ------- ---------- -- - -------- - ------------ --- - ------------------- - --------- ------ - -------- - ------------------ - ----- ---- - -- ------ ---------------- --- ----- ------ ------- -------- ------ ---- ------- ----- ------ - ----- ---- - -- ------ ---------------- --- ----- ------ ------- ------ ------ ---- ----------------- ----------- ----------- ----- -------- ------ --------- -------- --------------- -
这将定义我们的数据模型，包括用户和文章。我们还定义了一个 "db" 数据源，它将使用 PostgreSQL 数据库。
接下来，我们需要在终端中运行以下命令来生成 Prisma 客户端：
npx prisma generate
这将生成一个名为 "prisma-client-js" 的新目录，其中包含了我们的 Prisma 客户端。
4. 创建 GraphQL Schema
现在，我们可以使用 Prisma 来创建我们的 GraphQL API。在 "pages" 目录中，创建一个名为 "api" 的新目录。在 "api" 目录中，创建一个名为 "schema.graphql" 的新文件，然后添加以下内容：
-- -------------------- ---- ------- ---- ----- - ------ -------- -------- ----- ----- - ---- -------- - ----------------- -------- -------- --------- ----- -------------- ---- ------ -------- -------- --------- ----- -------------- ----- ----- - ---- ---- - --- --- ------ ------- -------- ------- ---------- ------- ------- ----- - ---- ---- - --- --- ------ ------- ----- ------ -
这将定义我们的 GraphQL Schema，包括查询、变异和数据类型。
5. 创建 GraphQL Resolver
我们需要创建一个 GraphQL Resolver 来实现我们的查询和变异。在 "api" 目录中，创建一个名为 "resolvers.js" 的新文件，然后添加以下内容：
-- -------------------- ---- -------
----- - ------------ - - --------------------------
----- ------ - --- ---------------
----- --------- - -
------ -
------ ----- -- -- -
------ ----------------------
-------- - ------- ---- --
---
--
----- ----- -------- - -- -- -- -
------ ---------------------
------ - -- --
-------- - ------- ---- --
---
--
--
--------- -
----------- ----- -------- - ------ ------- -- - ---- -- -- -
-- ------- -
----- --- ---------- ---- -- ------------- -- ------ - --------
-
------ --------------------
----- -
------
--------
------- - -------- - --- ------- - --
--
-------- - ------- ---- --
---
--
----------- ----- -------- - --- ------ ------- -- - ---- -- -- -
----- ---- - ----- ---------------------
------ - -- --
-------- - ------- ---- --
---
-- ------- -
----- --- ----------- --- ---------
-
-- --------------- --- -------- -
----- --- ---------- --- ---- ------ ---- --- ---------
-
------ --------------------
------ - -- --
----- - ------ ------- --
-------- - ------- ---- --
---
--
----------- ----- -------- - -- -- - ---- -- -- -
----- ---- - ----- ---------------------
------ - -- --
-------- - ------- ---- --
---
-- ------- -
----- --- ----------- --- ---------
-
-- --------------- --- -------- -
----- --- ---------- --- ---- ------ ---- --- ---------
-
----- -------------------- ------ - -- - ---
------ -----
--
--
----- -
------- ----- -------- -- -
------ --------------------- ------ - --- --------------- - ---
--
--
--
-------------- - ----------这将实现我们的查询和变异，并使用 Prisma 客户端来访问数据库。
6. 创建身份验证
现在，我们需要创建身份验证。我们将使用 Next.js API 路由来实现身份验证。
在 "pages" 目录中，创建一个名为 "api" 的新目录。在 "api" 目录中，创建一个名为 "auth.js" 的新文件，然后添加以下内容：
-- -------------------- ---- -------
----- --- - ------------------------
----- - ------------ - - --------------------------
----- ------ - --- ---------------
------ ------- ----- -------- ------------ ---- -
----- - ------ -------- - - ---------
----- ---- - ----- --------------------- ------ - ----- - ---
-- ------ -- ------------- --- --------- -
------ ---------------------- -------- -------- ----- -- ---------- ---
-
----- ----- - ---------- --- ------- -- ----------------------- -
---------- -----
---
---------------------- ----- ---
-这将验证用户的电子邮件和密码，并生成一个 JSON Web Token（JWT）。我们将在下一步中使用 JWT 来进行身份验证。
7. 创建页面
现在，我们可以创建页面来显示我们的博客。在 "pages" 目录中，创建一个名为 "index.js" 的新文件，然后添加以下内容：
-- -------------------- ---- -------
------ - -------- - ---- ----------------------
------ --- ---- --------------
----- ----------- - ----
----- -
----- -
--
-----
-------
---------
------ -
----
-
-
-
--
------ ------- -------- ------ -
----- - -------- ------ ---- - - ----------------------
-- --------- -
------ ------------------
-
-- ------- -
------ --------- --------------------
-
------ -
-----
-------------
---------------------- -- -
---- --------------
---------------------
---------------------
---
-- ------------------ -- ----------------
----
------
---
------
--
-这将使用 Apollo 和 GraphQL 来查询所有文章，并将它们显示在页面上。
8. 创建身份验证组件
最后，我们需要创建一个身份验证组件，使用户能够登录并访问受保护的页面。在 "components" 目录中，创建一个名为 "Auth.js" 的新文件，然后添加以下内容：
-- -------------------- ---- -------
------ - -------- - ---- --------
------ - ----------- - ---- ----------------------
------ --- ---- --------------
----- ------------- - ----
-------- -------------------- -------- ---------- -------- -
----------- ------- --------- ---------- -
-----
-
-
--
------ ------- -------- ------ -
----- ------- --------- - -------------
----- ---------- ------------ - -------------
----- ------ - ---- -- - ---------------------------
----- ------------ - ------- -- -
-----------------------
------ ---------- - ------ -------- - ---
--
-- ------ -
----------------------------- -----------------
------ ----------------------
-
------ -
----- ------------------------
------
------------
-------------
----------------- -- -----------------------------
--
------
---------------
----------------
----------------- -- --------------------------------
--
------- -----------------------------------
-------
--
-这将使用 Apollo 和 GraphQL 来进行身份验证，并将 JWT 存储在本地存储中。
结论
在本文中，我们使用 Next.js 和 GraphQL 来构建一个博客系统。我们学习了如何使用 Prisma 来创建我们的 GraphQL API，如何使用 Apollo 和 GraphQL 来查询和变异数据，以及如何使用 JWT 进行身份验证。我们还学习了如何使用 Next.js API 路由来实现身份验证，并创建了一个身份验证组件。通过这个例子，我们可以看到 Next.js 和 GraphQL 的强大功能，以及它们如何在现代化的 Web 开发中发挥作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6740df5ad40a3cb159e72ffe