如何使用 Next.js 和 GitHub API 创建个人展示页-JavaScript中文网-JavaScript教程资源分享门户

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 函数中调用。

// javascriptcn.com 代码示例
import fetch from 'isomorphic-unfetch';

function HomePage(props) {
  // render page based on user data
  return (
    <div>
      <h1>{props.name}</h1>
      <img src={props.avatarUrl} alt={props.name} />
      <p>{props.bio}</p>
    </div>
  );
}

HomePage.getInitialProps = async () => {
  const response = await fetch('https://api.github.com/users/{username}');
  const user = await response.json();
  return {
    name: user.name,
    avatarUrl: user.avatar_url,
    bio: user.bio
  };
};

export default HomePage;

在上面的代码中，我们使用了在 getInitialProps 函数中异步获取用户信息的方法，并将获取到的数据作为 props 传递到 HomePage 组件中。

3. 添加样式

现在，我们将为个人展示页添加一些样式。在 Next.js 中，可以使用 CSS 模块来管理样式。在 pages/index.module.css 文件中，我们将创建以下样式：

// javascriptcn.com 代码示例
.container {
  margin: 0 auto;
  max-width: 600px;
  padding: 2rem;
}

h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

img {
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  max-width: 200px;
}

然后，在 pages/index.js 文件中，我们将使用这些样式：

// javascriptcn.com 代码示例
import styles from './index.module.css';

function HomePage(props) {
  // render page based on user data
  return (
    <div className={styles.container}>
      <h1>{props.name}</h1>
      <img src={props.avatarUrl} alt={props.name} />
      <p>{props.bio}</p>
    </div>
  );
}

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