Next.js 是一款流行的 React 服务端渲染框架，而 GitHub API 则提供了一种方便的方式来获取 GitHub 用户的信息。在本文中，我们将介绍如何使用 Next.js 和 GitHub API 来创建一个个人展示页。本文假设你已经熟悉 JavaScript 和 React，了解了 GitHub API 的基本使用方式。
1. 准备工作
首先，我们需要创建一个空的 Next.js 应用程序。可以运行以下命令来完成这个任务：
npx create-next-app my-app
然后，进入到新创建的应用程序目录，安装需要的依赖项：
cd my-app npm install --save isomorphic-unfetch
isomorphic-unfetch 是一个可以在浏览器和 Node.js 中使用的轻量级 HTTP 客户端。
2. 获取 GitHub 用户信息
在我们开始设计个人展示页之前，我们需要获取 GitHub 用户的信息。我们将会使用 GitHub Users API 来获取这些信息。GitHub Users API 可以通过访问以下 URL 来获取一个用户的信息：
https://api.github.com/users/{username}替换 {username} 为你的 GitHub 用户名即可。
我们可以使用 isomorphic-unfetch 来获得这些信息。在 Next.js 中，可以在 pages/index.js 文件中创建一个异步函数，并在 getInitialProps 函数中调用。
-- -------------------- ---- -------
------ ----- ---- ---------------------
-------- --------------- -
-- ------ ---- ----- -- ---- ----
------ -
-----
---------------------
---- --------------------- ---------------- --
------------------
------
--
-
------------------------ - ----- -- -- -
----- -------- - ----- -------------------------------------------------
----- ---- - ----- ----------------
------ -
----- ----------
---------- ----------------
---- --------
--
--
------ ------- ---------在上面的代码中，我们使用了在 getInitialProps 函数中异步获取用户信息的方法，并将获取到的数据作为 props 传递到 HomePage 组件中。
3. 添加样式
现在，我们将为个人展示页添加一些样式。在 Next.js 中，可以使用 CSS 模块来管理样式。在 pages/index.module.css 文件中，我们将创建以下样式：
-- -------------------- ---- ------- ---------- - ------- - ----- ---------- ------ -------- ----- - -- - ---------- ----- -------------- ----- - --- - -------------- ---- -------- ------ ------- - ----- ---------- ------ -
然后，在 pages/index.js 文件中，我们将使用这些样式：
-- -------------------- ---- -------
------ ------ ---- ---------------------
-------- --------------- -
-- ------ ---- ----- -- ---- ----
------ -
---- -----------------------------
---------------------
---- --------------------- ---------------- --
------------------
------
--
-4. 部署应用程序
最后，我们需要将应用程序部署到一个网站上。我们可以使用 Vercel 来轻松地将 Next.js 应用程序部署到生产环境中。
在 Vercel 中，只需将应用程序与 GitHub 存储库关联起来，每次推送代码时，它都会自动构建和部署应用程序。我们还可以自定义域名和 SSL 证书，以使我们的应用程序保持安全又专业。
总结
在本文中，我们介绍了如何使用 Next.js 和 GitHub API 创建一个个人展示页。我们首先获取了 GitHub 用户的信息，然后添加了一些样式，并最终将应用程序部署到了生产环境中。这个过程需要一些基础的 JavaScript、React 和 CSS 知识，但它确实为学习和练习这些技术提供了一个好的起点。示例代码和 GitHub 存储库可以在这里找到：https://github.com/example/my-app。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653e65a17d4982a6eb7e53b3