正しくクエリパラメータを取得できていない

[Suntory-Y-Water]

要約

• Next.js13のAPIでクエリパラメータの取得ができていない
• そもそも論として画面側から送れてすらいない（エンドポイントはあっている）

完了条件

• 正しくクエリパラメータを渡せること
• 正しくクエリパラメータが取得できること

'use client';
import React from 'react';
import { useAtom } from 'jotai';
import { pokemonListsAtom } from '../state/atoms';

type PokemonIdProps = {
  ids: string[];
};

export const RefreshButton = ({ ids }: PokemonIdProps) => {
  const [pokemon, setPokemon] = useAtom(pokemonListsAtom);

  const handleClick = async () => {
    // ids 配列からランダムに6つのIDを選択
    const selectedIds = [];
    for (let i = 0; i < 6; i++) {
      selectedIds.push(ids[Math.floor(Math.random() * ids.length)]);
    }

    // 選択されたIDをクエリパラメータとして連結
    const queryParams = selectedIds.join(',');

    // APIリクエストの実行
    const res = await fetch(`http://localhost:3000/api/pokemon?ids=${queryParams}`);
    const pokemonData = await res.json();
    setPokemon(pokemonData);
  };

  return (
    <div
      className='bg-custom-yellow hover:bg-yellow-300 text-custom-black p-4 font-bold rounded-md cursor-pointer'
      onClick={handleClick}
    >
      ランダムにポケモンを選ぶ
    </div>
  );
};

[Suntory-Y-Water]

対応

URLSearchParamsを使用してクエリパラメータを解析する

import { NextApiResponse } from 'next';
import { NextRequest, NextResponse } from 'next/server';

export async function GET(req: NextRequest, res: NextApiResponse) {
  // URLSearchParamsを使用してクエリパラメータを解析
  const searchParams = new URLSearchParams(req.nextUrl.search);
  const idsParam = searchParams.get('ids');

  if (!idsParam) {
    return NextResponse.json({ error: 'IDが存在しません' }, { status: 400 });
  }

  const ids = idsParam.split(',');

  // 各IDに対応するポケモンデータを非同期で取得
  const pokemonDataPromises = ids.map(async (id) => {
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`, { cache: 'no-store' });
    return await response.json();
  });

  // すべてのデータを待機
  const pokemonData = await Promise.all(pokemonDataPromises);

  // 取得したデータを整形してレスポンスとして返送
  const pokemonLists = pokemonData.map((data) => ({
    name: data.name,
    image: data.sprites.other['official-artwork'].front_default,
  }));

  return NextResponse.json(pokemonLists, { status: 200 });
}