用Next.js构建Pokedex

Next.js 是一个用于构建静态和动态 React 应用程序的框架。它的生产准备就绪，并提供方便的功能，让你的应用程序立即启动和运行。Next.js 提供了不同的获取数据的方法，因为它同时支持客户端和服务器端呈现。在本教程中，我们将学习 Next.js；通过使用 SWR 构建一个 Pokedex 应用程序来检索数据。我们开始吧！

先决条件

本教程假设您对 React 和 Next.js 有基本的了解。如果您是 Next.js 的新手，可以从本文开始学习。

我们正在建设什么

我们将使用 Next.js 构建一个 Pokedex 应用程序。pokemon 将使用 SWR库从Pokemon API获取。本文将教您如何使用 Next.js 构建应用程序。它还将介绍如何使用 SWR 库在客户端获取数据。

什么是 Next.js？

Next.js 给你一个很好的开发经验。它附带了一些功能，可以在“vanilla”的 React 应用程序中自行安装和处理。Next.js. Vercel 团队声明如下：

对于产品所需的所有特性，Next.js 为您提供了最佳的开发体验：混合静态和服务器呈现、TypeScript 支持、智能绑定、路由预取等等。不需要配置。

Next.js 框架提供了一个使用 API 路由构建 API 的简单解决方案。您可以使用 GraphQL、Express 或您喜欢的框架构建整个 API，然后使用 API 路由将其连接到数据库。Next.js 使用基于文件系统的路由，并将 pages 目录下的文件视为路由或 API 端点。

设置

我们将使用create-next-app创建一个新的项目。因此，首先打开命令行界面（CLI）并运行以下命令：

npx create-next-app next-pokedex

项目创建好后，让我们看一下它的结构：

├── components
|  └── Pokemon.js
├── pages
|  ├── _app.js
|  └── index.js
├── package.json
├── styles.css
└── useRequest.js

接下来让我们看看文件结构：

1. components/Pokemon.js是从父组件接收要显示为参数的对象的表示组件(index.js)
2. pages/_app.js告诉 Next.js 如何使用自定义样式初始化应用程序。在这种情况下，我们将使用 styles.css 为 Pokedex 添加样式。
3. pages/index.js是我们应用程序的主页。它负责在页面加载时获取和显示所有 pokemons。
4. useRequest.js是依赖 SWR 库从 API 检索数据的自定义钩子。创建此文件仍然是可选的；如果需要，可以跳过它并直接在组件中使用 useSWR。但是，我们需要在两个不同的文件中获取数据，因此使用这个钩子可以防止重复。

创建自定义 hook

简单介绍一下，SWR 是一组用于远程数据获取的 React 钩子，可以简化缓存、分页等操作。它是由 Next.js 的同一个团队创建的， 与 React 不同，SWR 库附带下一页.js，所以我们不需要安装它。让我们创建自定义挂钩！

// useRequest.js

import useSWR from 'swr'

const fetcher = (url) => fetch(url).then((res) => res.json())

const API_URL = 'https://pokeapi.co/api/v2/pokemon'
const PAGE_LIMIT = 100

export default function useFetchPokemon(name) {
  const uri = name ? `${API_URL}/${name}` : `${API_URL}?limit=${PAGE_LIMIT}`
  const { data: result, error } = useSWR(uri, fetcher)

  return { result, error }
}

我们首先从 SWR 导入useSWR钩子。之后，我们声明从 API 执行 fetch 请求所需的变量。接下来，我们将 pokemon 的名称传递给useFetchPokemon()函数。参数是可选的，因此我们必须检查接收到的名称是否有效，然后建立 uri 的 API。最后，我们使用useSWR获取数据，并传入 uri 和fetcher函数作为参数。顺便说一下，fetcher函数允许我们将检索到的数据转换为 JSON 格式。

创建 Pokemon 组件

// Pokemon.js

import React from 'react'
import useFetchPokemon from '../useRequest'

export default function Pokemon({ pokemon }) {
  const { name } = pokemon
  const { result, error } = useFetchPokemon(name)

  if (error) return <h1>Something went wrong!</h1>
  if (!result) return <h1>Loading...</h1>

  return (
    <div className='Card'>
      <span className='Card--id'>#{result.id}</span>
      <img
        className='Card--image'
        src={result.sprites.front_default}
        alt={name}
      />
      <h1 className='Card--name'>{name}</h1>
      <span className='Card--details'>
        {result.types.map((poke) => poke.type.name).join(', ')}
      </span>
    </div>
  )
}

正如您在这里看到的，我们首先导入前面创建的自定义钩子。此组件将从服务器的 index.js 文件接收包含 pokemon 名称的对象。有了 pokemon 的名称，我们现在可以使用useFetchPokemon()检索数据，然后相应地显示它。通过这一步，我们可以更新 index.js 文件并使用 Pokemon 组件在页面加载后显示数据。

从 API 获取所有 pokemons

// index.js

import useFetchPokemon from '../useRequest'
import Pokemon from '../components/Pokemon'

export default function IndexPage() {
  const { result, error } = useFetchPokemon()

  if (error) return <h1>Something went wrong!</h1>
  if (!result) return <h1>Loading...</h1>

  return (
    <main className='App'>
      <h1>My pokemons</h1>
      <div>
        {result.results.map((pokemon) => (
          <Pokemon pokemon={pokemon} key={pokemon.name} />
        ))}
      </div>
    </main>
  )
}

在这个文件中，我们首先导入自定义钩子和负责显示 pokemons 的组件。接下来，我们从useFetchPokemon()中取出保存从 API 中获取的数据的结果对象，以及出错情况下的错误状态。之后，我们循环处理响应数据，对于每个元素，我们依赖Pokemon组件来显示它。通过这一步，我们的 Pokedex 应用程序几乎完成了。我们只需要添加一些样式，使它看起来很好。

设计 Pokedex 应用程序

以下是完整的 CSS 文件：

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #00303f;
  line-height: 1.5;
  font-family: 'Caveat', cursive;
}

.App {
  text-align: center;
  margin: 2rem 0;
  padding: 1rem;
  max-width: 1100px;
  margin: auto;
}

.App > h1 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 2rem;
  font-size: 2rem;
  text-transform: uppercase;
}

.App > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  grid-gap: 1.5rem;
  justify-content: center;
  align-items: center;
}

.Card {
  width: 12rem auto;
  background: #5bb0ca;
  color: #e4c439;
  padding: 1rem;
  border-radius: 10px;
  border-top: 0.5px solid #e4c439;
  border-bottom: 0.5px solid #e4c439;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.2s ease-in-out all;
}

.Card:hover {
  transform: scale(1.05);
}

.Card--id {
  background: #e4c439;
  width: 3rem;
  color: #fff;
  padding: 0.1rem;
  font-weight: 700;
  position: absolute;
  border-radius: 0 0 10px 0;
  top: 0;
  left: 0;
}
.Card--name {
  text-transform: capitalize;
  color: rgb(255, 255, 255);
  font-size: 2rem;
  font-weight: 700;
}

.Card--image {
  width: 150px;
  display: block;
  margin: auto;
}

.Card--details {
  font-size: 1.3rem;
  color: #e4c439;
}

Next.js在样式方面的设置与 React 有些不同。Next.js 使用 App 组件初始化页面。要覆盖组件的默认行为，我们需要使用_app.js文件。如果有需要在组件之间共享的全局样式或数据，请将它们放在此处。别忘了加下划线(_)；否则，Next.js 会将文件视为普通页面。

import '../styles.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

通过导入styles.css文件，Next.js将能够使用 CSS 文件来设计我们的 Pokedex 应用程序。这样，应用程序就可以在浏览器上进行测试了。因此，请在终端中打开项目目录，然后运行以下命令：

yarn dev

## or

npm run dev

如果一切正常，您应该可以在这里看到Next.js应用程序：http://localhost:3000/ .

就这样！我们的 Next.js 应用看起来不错！

我们用 Next.js、SWR 和 Pokemon API 构建了一个 Pokedex 应用程序，预览这个完成的项目CodeSandbox

结论

在本文中，我们学习了如何使用Next.js和SWR从头构建Pokedex应用程序。Next.js 是一个非常受欢迎的框架，它建立在 React、Node.js、Babel 和 Webpack 之上。Next.js 同时支持客户端和服务器端渲染，这使得 Next 在 SEO 方面非常出色。因为只有所需的 JavaScript 才会加载到客户端。Next.js 被大公司广泛使用，绝对值得使用。你应该在下一个项目中试一试！