Next.jsのSSGとInstagram apiで投稿一覧ページを作成する

npx create-next-app insta-post --ts
cd insta-post
npm run dev

NEXT_PUBLIC_INSTAGRAM_ACCESS_TOKEN=無期限トークンを入力
NEXT_PUBLIC_INSTAGRAM_BUSINESS_ID=インスタグラムのビジネスアカウントIDを入力

{
  "data": [
     ... Endpoint data is here
  ],
  "paging": {
    "cursors": {
      "after": "MTAxNTExOTQ1MjAwNzI5NDE=",
      "before": "NDMyNzQyODI3OTQw"
    },
    "previous": "https://graph.facebook.com/{your-user-id}/albums?limit=25&before=NDMyNzQyODI3OTQw"
    "next": "https://graph.facebook.com/{your-user-id}/albums?limit=25&after=MTAxNTExOTQ1MjAwNzI5NDE="
  }
}

import axios from "axios";

const accessToken = process.env.NEXT_PUBLIC_INSTAGRAM_ACCESS_TOKEN;
const businessId = process.env.NEXT_PUBLIC_INSTAGRAM_BUSINESS_ID;

export async function getInstagramPosts(param = '') {
  let after = ''
  if(param !== '') {
    after = `&after=${param}`
  }
  const response = await axios.get(
    `https://graph.facebook.com/v16.0/${businessId}/media?access_token=${accessToken}&fields=caption%2Clike_count%2Cmedia_url%2Cmedia_type%2Cvideo_url%2Cpermalink%2Ctimestamp%2Cusername${after}`
  );
  return response.data;
}

import { getInstagramPosts } from "@/pages/api/instagram";

export const getStaticProps = async () => {
  let data:any = []; //妥協...
  let after = '';
  let hasNextPage = true;

  while (hasNextPage) {
    try {
      const response = await getInstagramPosts(after);
      data = data.concat(response.data);
      after = "after" in response.paging.cursors ? response.paging.cursors.after : '',
      hasNextPage = !!after;
    } catch (error) {
      console.error('Error fetching data:', error);
      hasNextPage = false;
    }
  }
  return {
    props: {
      data: data
    }
  };
};

after = "after" in response.paging.cursors ? response.paging.cursors.after : undefined,

`undefined` cannot be serialized as json. please use `null` or omit this value.