Next.js 呈现了一种前端开发的新方向。在现代前端开发之中，服务端渲染和搜索引擎优化（SEO）无疑是至关重要的。Next.js 提供了一种简单的方式来实现这一切。所以它也被认为是一个全栈框架。
当我们开始构建一个复杂的 Next.js 应用时，开发人员需要处理大量的数据。此时，在应用程序中集成 GraphQL 可以优化数据获取的处理方式。GraphQL 使我们可以创建数据查询，而其他无用的数据则可被过滤掉。
在本文中，我们将讨论 Next.js 与 GraphQL 的协同工作并说明如何在 Next.js 应用程序中使用 GraphQL。
Next.js
Next.js 是一个基于 React 的全栈框架。它将服务器端渲染与前端 JavaScript 应用程序结合起来。Next.js 只需几个步骤就可以将 React 应用程序转换为服务器渲染应用程序。
Next.js 为开发人员提供了一个简单的 API，这个 API 使服务器端渲染变得容易。使用 Next.js，开发人员可以更轻松地定制页面。由于 Next.js 只有最少量的配置选项，因此开发人员可以将更多的精力集中在业务逻辑上。
GraphQL
GraphQL 是一种数据查询语言，通常用于前端开发。GraphQL 使我们能够轻松地查询数据并将其集成到我们的应用程序中。
GraphQL 允许应用程序开发人员定义一个特定的数据结构，并从文档中生成数据查询和类型定义。
如何使用 GraphQL 在 Next.js 应用程序中
在本节中，我们将指导您创建一个基于 Next.js 的博客应用程序，并在其中使用 GraphQL 从远程 API 中获取数据。
我们将使用 Apollo GraphQL 客户端来获取数据，并使用 GraphQL 提供的服务端渲染功能以保持服务器性能。在我们的博客应用程序中，我们将获取最新的博客文章。以下是如何进行操作的示例：
步骤1：创建一个 Next.js 应用程序
我们首先需要创建一个基于 Next.js 的应用程序。在终端中使用以下命令进行创建：
npx create-next-app my-blog
我们之后需要切换到我们新创建的应用程序目录：
cd my-blog
并使用以下命令启动开发服务器：
npm run dev
步骤2：安装 Apollo GraphQL 客户端
我们需要安装 Apollo GraphQL 客户端来从远程 API 中获取数据。执行以下命令以安装它：
npm install apollo-boost @apollo/react-hooks graphql
步骤3：创建 GraphQL 配置
我们还需要 使用 Apollo GraphQL 客户端创建一个配置。在Config.js文件中创建以下内容：
-- -------------------- ---- ------- ------ ------------ ---- --------------- ------ ----- ---- --------------------- ----- ------ - --- -------------- ---- ----------------------------- ------ --- ------ ------- -------
在这里，我们创建了一个 Apollo 客户端实例并将其设置为从远程 GraphQL 服务器获取数据。
步骤4：使用Apollo客户端获取远程数据。
我们需要在我们的页面中使用Apollo客户端从远程API获取数据。In our Index.js文件中执行以下命令：
-- -------------------- ---- -------
------ ----- ---- ----------------------
------ ------ ---- ------------
------ ------- -------- ------ ---- -- -
------ ------ ----------- ---
-
-------------------- - ----- -- -- -
----- - ---- - - ----- --------------
------ ----
----- -
--------------- -- -
--
-----
----
-
-
--
---
------ -
-----
--
--在这里，我们使用 Apollo 客户端查询目标服务器，获取最新的博客文章并将其传递给我们的页面。
步骤5: 展示远程数据
我们现在可以在页面中显示远程数据。在我们的Index.js文件中执行以下命令改变一下数据：
-- -------------------- ---- -------
------ - --- - ---- ---------------
------ - -------- - ---- ----------------------
------ ------- -------- ------- ---- -- -
----- -------- - --------------
------ -
-----
-------------------- -- -
---- --------------
---------------------
------------------
------
---
------
--
-我们现在可以在我们的页面上显示远程数据。
结论
Next.js 为服务器端渲染提供了一个强大框架和对 React 应用程序的全栈支持。GraphQL 提供了管理数据和通过数据库获取信息的简单方式。
在本文中，我们讨论了如何协同使用 Next.js 和 GraphQL，并提供了使用 Apollo 客户端从远程 API 获取数据的指南。我们也分享了如何在页面上展示这些数据。
这只是 Next.js 和 GraphQL 的开始。应用程序开发人员可以继续探索这些框架的功能，并建立他们的基础知识。
参考文献：https://www.smashingmagazine.com/2020/08/nextjs-graphql-thumbnail-generator/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670e35a75f551281026021a0