【Next.js】getServerSidePropsからAPIを叩く方法

2023年1月26日

getServerSidePropsを用いてサーバーサイドでAPIを叩いてデータを取得し、レンダリングするまでの流れをご紹介します。

getServerSidePropsとは

Next.jsの公式チュートリアルによると、getServerSidePropsについてこのように記載されています。

getServerSideProps（サーバーサイドレンダリング）と呼ばれる関数をページからエクスポートする場合、getServerSidePropsから返ってきたデータを用いてNext.jsは毎リクエストごとにそのページのプリレンダリングを行います。
export async function getServerSideProps(context) {
  return {
    props: {}, // ページコンポーネントに 'props' として渡されます.
  }
}
Next.jsチュートリアルより

またいつgetServerSidePropsを使うべきかについてはこのように言及されています。

リクエスト時に取得する必要があるデータをページにレンダリングする必要がある場合にのみ、getServerSidePropsを使用するべきです。

… 略 …

リクエスト時にデータをレンダリングする必要がない場合は、クライアントサイドやgetStaticPropsを用いてデータを取得することを考慮すべきです。
Next.jsチュートリアル「When should I use getServerSideProps 」より

クライアント側（ブラウザ）かサーバー側どっちでレンダリングすべきなのか意識せえよ、ってことですね。

方法

今回はNext.jsのAPIを、getServerSidePropsで呼び出す方法でいきます。

Next.jsのAPIとは、pages/api配下にあるやつのことです。

pages/api/getBooks.tsx

import type { NextApiRequest, NextApiResponse } from 'next'

// 取得する情報のインターフェース
export interface Book {
  id: string, 
  title: string, 
  pageCount: number | null, 
}

// Google Books API からキーワードに関する書籍を検索する関数
export async function getData(keyword: string): Promise<Book[]> {
  const res = await fetch("https://www.googleapis.com/books/v1/volumes?q=" + encodeURIComponent(keyword))
  const jsonData = await res.json()
  return jsonData.items.map((elem: any) => {
    return {
      id: elem.id,
      title: elem.volumeInfo.title,
      pageCount: elem.pageCount || null
    }
  });
}

// Next.jsのAPI定義
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<any>
) {
  // const data = await getData();
  const data = await getData('ドラえもん');
  res.status(200).json(data);
}

pages/index.tsx

import { GetServerSideProps } from "next";
import { Book, getData } from "./api/books"

export default function Home(props: any) {
  return (
    <>
      <ul>
        {props.items.map((item: Book) => (
          <li>
            <p key={item.id}>{item.id}</p>
            <p key={item.title}>{item.title}</p>
          </li>
        ))}
      </ul>
    </>
  )
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const books: Book[] = await getData('ドラえもん');
  return {
    props: {items: books}
  }
}

対象ページにアクセスすると、このように取得したデータが表示されます。