作者： AI 语音助手
介绍
Next.js 是一个基于 React 的服务端渲染框架，它为开发人员提供了一些便利，并具有以下特点：
- 自动代码分割
- 服务端渲染和客户端渲染混合
- 渲染性能优化
- 静态文件导出
- 支持 TypeScript
本文将介绍使用 Next.js 搭建的星球大战 WIKI 应用，这个应用可以帮助我们了解应用 Next.js 的基础知识和开发实践，还可以通过开发过程中遇到的问题和解决方案，提升我们的技能水平。
前置知识
在开始本文之前，我们需要了解以下知识：
- React 和 TypeScript 的基础知识
- Next.js 的概念和使用方法
- GraphQL 查询语言
如果你对以上知识还不熟悉，可以先阅读相关教程，再开始本教程。
搭建应用
创建项目
创建一个新目录，在目录下创建一个新的 Next.js 应用。通过 yarn 命令安装并初始化项目：
mkdir next-js-wiki cd next-js-wiki yarn init -y yarn add react react-dom next
修改 package.json 文件：
{
"name": "next-js-wiki",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}配置环境
在项目目录下创建 .env 文件, 用于配置应用的环境变量：
GRAPHQL_URL=https://swapi.apis.guru/
在 .env 文件中添加了 GraphQL API 的 URL。
创建页面
在项目的 pages 目录下，创建 index.tsx 文件，并填写以下内容:
-- -------------------- ---- -------
------ - -------- - ---- -------
----- ----- -------- - -- -- -
-----
-----------------
------
--
------ ------- -----这个页面现在只是一个简单的欢迎页面，我们需要给这个页面添加新的功能。
使用 GraphQL 查询数据
我们使用 SWAPI （Star Wars API） 来获取和管理星战百科的数据。
首先，安装 graphql-request：
yarn add graphql-request
然后，在项目中创建 GraphQL 客户端 client.ts:
import { GraphQLClient } from 'graphql-request';
const endpoint = process.env.GRAPHQL_URL;
export const client = new GraphQLClient(endpoint as string);接着，在项目中创建 GraphQL 查询，定义一个 getCharacters 函数：
-- -------------------- ---- -------
------ - --- - ---- ------------------
------ ---- ------------------ - -
----------- -
-------- -
----- -------
---------- -------
-------- -
----- -------
----
----
--
--
------ ----- -------- --------------- -
----- ----- - ----
-
---------- -
------- -
----
---------
------- -
----
-
-
-
-
--
----- ---- - ----- ------------------------------------------
------ ------------------------
-这个查询将返回所有角色的名称、出生日期和物种。
接着，在我们的脚手架应用程序的起始页面中，使用该函数：
-- -------------------- ---- -------
------ - ------------- - ---- -------------
------ ------- -------- ------ ---------- -- - ----------- ----- -- -
------ -
-----
-----------------
----
------------------ ---- -- ---- -- -
--- ----------------------
---
-----
------
--
-
------ ----- -------- ---------------- -
----- ---------- - ----- ----------------
------ -
------ -
-----------
--
--
-这个页面现在会显示出一个列表，其中包含了所有角色的名称，通过这个实例，你可以参考如何在 Next.js 应用中使用 GraphQL。
总结
此应用程序演示了使用 Next.js 和 GraphQL 构建页面的基础知识，并包含对代码和实践的详细解释。
通过这个实例，你可以学习了解 Next.js 的基础知识、如何使用 GraphQL 获取数据和如何使用 TypeScript 构建 JavaScript 应用程序。例子提供了一个优秀的起点，可以在上面进行改进和改造，希望能够对你的开发过程有所帮助。完整代码可以在 GitHub 上查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d45cd2b5eee0b525bed089