ヘッドレスCMSから記事情報の取得

cd next_app_name
mkdir touch
touch launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [
          {
            "name": "debug server",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run dev"
          },
          {
            "name": "debug client",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000"
          }
        ]
      }

// ブログ一覧を取得
export const getList = async (queries?: MicroCMSQueries) => {
    const listData = await client.getList<Blog>({
        endpoint: "reports",
        queries,
        }).catch(notFound);
🔴    console.log(listData);
    return listData;
    };

デバッグコンソール
{contents: Array(10), totalCount: 11, offset: 0, limit: 10}

'use client';

import Link from 'next/link';
import { News } from '@/libs/client';
import { formatDate } from '@/libs/utils';
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from 'swiper/modules';

import 'swiper/css'

type Props = {
    articles?: News[];
};

export default function AnimationNewsTimeline({ articles }: Props) {

    if (!articles) {
        return null;
    }
    if (articles.length === 0) {
        return <p>記事がありません。</p>;
    }

return (
    <section>
        <div className="flex text-center">
            <Swiper
            spaceBetween={30}
            centeredSlides={true}
            autoplay={{
              delay: 500,
              disableOnInteraction: false,
            }}
            modules={[Autoplay]}
            className="mySwiper"
            >
                {articles.map((article) => (
                    <SwiperSlide key={article.id}>
                        <Link href={`/news/${article.id}`}>
                            {formatDate(article.publishedAt || article.createdAt)}:{article.title}
                        </Link>
                    </SwiperSlide>
                ))}
            </Swiper>
        </div>
    </section>
);
}