Zenn
Open4

ページネーション機能を追加したい。。。

JavaScript
Next.js
React
初心者
#
pokeapi
柿柿

pages/index.jsx

import { getAllPokemons } from '@/libs/pokemon';
import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';

export const getStaticProps = async () => {
  const pokemons = await getAllPokemons();
  return {
    props: {
      pokemons,
    },
  };
};

const Home = props => {
  return (
    <>
      <Head>
        <title>ポケモン図鑑</title>
      </Head>
      <main className='flex content-center justify-center'>
        <button>前へ</button>
        <ul className='grid grid-cols-4 grid-rows-5 gap-8 py-5'>
          {props.pokemons.map(pokemon => (
            <li key={pokemon.name}>
              <Link href={`/pokemon/${encodeURIComponent(pokemon.id)}`}>
                <Image
                  src={pokemon.image}
                  alt={pokemon.name}
                  priority={true}
                  width={200}
                  height={200}
                />
                <div className='text-center text-lg'>{pokemon.name}</div>
              </Link>
            </li>
          ))}
        </ul>
        <button>次へ</button>
      </main>
    </>
  );
};

export default Home;

page/pokemon/[id].jsx

import { Button } from '@/components/elements/Button';
import { getAllPokemons, getPokemon } from '@/libs/pokemon';
import Head from 'next/head';
import Image from 'next/image';

export const getStaticPaths = async () => {
  const pokemons = await getAllPokemons();
  return {
    paths: pokemons.map(pokemon => ({
      params: { id: pokemon.id },
    })),
    fallback: false,
  };
};

export const getStaticProps = async context => {
  const id = context.params.id;
  const pokemon = await getPokemon(id);
  return {
    props: {
      pokemon,
    },
  };
};

const Pokemon = props => {
  return (
    <>
      <Head>
        <title>{`ポケモン図鑑 - ${props.pokemon.name}`}</title>
      </Head>
      <main>
        <article>
          <div className='text-center text-xl'>{`No. ${`${props.pokemon.index}`.padStart(
            4,
            '0',
          )}`}</div>
          <div className='flex content-center justify-center'>
            <Image
              src={props.pokemon.image}
              alt={props.pokemon.name}
              width={200}
              height={200}
              priority={true}
            />
          </div>
          <div className='flex flex-col content-center justify-center text-center'>
            <h2 className='text-3xl'>{props.pokemon.name}</h2>
            <div className='mt-2.5 flex justify-center'>
              <ul className='w-5/12 rounded-md border-2 border-gray-800 p-4'>
                <li className='text-lg'>分類: {props.pokemon.genus}</li>
                <li className='mt-1.5 text-lg'>高さ: {`${props.pokemon.height / 10}m`}</li>
                <li className='mt-1.5 text-lg'>重さ: {`${props.pokemon.weight / 10}kg`}</li>
                <li className='mt-2 text-xl'>{props.pokemon.description}</li>
              </ul>
            </div>
            <Button />
          </div>
        </article>
      </main>
    </>
  );
};

export default Pokemon;

libs/pokemon.jsx

import axios from 'axios';
import { BASE_URL } from '@/const/const';

export const getAllPokemons = async () => {
  // 全ポケモンのデータ取得
  const res = await axios.get(BASE_URL);
  const results = res.data.results;
  const dataPromise = results.map(data => getPokemon(data.name));
  return await Promise.all(dataPromise);
};

export const getPokemon = async nameId => {
  // ポケモンの基本データ取得
  const basicData = await axios.get(BASE_URL + nameId);
  // ポケモンの詳細データ取得
  const detailData = await axios.get(basicData.data.species.url);
  const image = basicData.data.sprites.other['official-artwork']['front_default'];
  const height = basicData.data.height;
  const weight = basicData.data.weight;
  const index = detailData.data.pokedex_numbers[0]['entry_number'];
  const names = detailData.data.names.filter(e => e.language.name === 'ja');
  const name = names[0].name;
  const genuses = detailData.data.genera.filter(e => e.language.name === 'ja');
  const genus = genuses[0].genus;
  const descriptions = detailData.data.flavor_text_entries.filter(e => e.language.name === 'ja');
  const description = descriptions[0].flavor_text;
  return {
    id: nameId,
    image: image,
    height: height,
    weight: weight,
    index: index,
    name: name,
    genus: genus,
    description: description,
  };
};

const/const.js

export const BASE_URL = 'https://pokeapi.co/api/v2/pokemon/';

っていうファイルたちでポケモン図鑑のアプリを作っているんですが、1ページ20体表示なので、prevボタンとnextボタンを作りたいんです。
ただ、どうしたもんかと頭を悩ませているんです。
どなたかいい案ないでしょうか・・・。