用Next.js构建Pokedex

用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应用看起来不错!

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

结论

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 用Next.js构建Pokedex

发表评论

提供最优质的资源集合

立即查看 了解详情