microCMSで記事を最新の10件だけ取得する方法

microCMSの管理画面ではこちらで取得したい値を設定し取得ボタンをクリックし
意図した値が返ってきているか確認する。

取得結果が必要とする最新のデータが１０件表示されていればOK

{
    "contents": [
        {
            "id": "aaaaaa",
            "title": "記事１"
        },
        {
            "id": "bbbbb",
            "title": "記事2"
        },
        {
            "id": "cccc",
            "title": "記事3"
        },
        {
            "id": "dddd",
            "title": "記事4"
        },
        {
            "id": "eeeee",
            "title": "記事5"
        },
        {
            "id": "fffff",
            "title": "記事6"
        },
        {
            "id": "gggggg",
            "title": "記事7"
        },
        {
            "id": "hhhh",
            "title": "記事8"
        },
        {
            "id": "iiiii",
            "title": "記事9"
        },
        {
            "id": "jjjjj",
            "title": "記事10"
        },

    ],
    "totalCount": 17,
    "offset": 0,
    "limit": 10
}

意図した値が返ってきていたらOK！

任意のファイルにコードを記述する

libs/microcms.ts

// 最新の記事一覧を取得
export async function getLatestPost() {
  const latestPosts = await client.get({
    endpoint: "blog",
    queries: { limit: 10, orders: "-createdAt", fields: "title,id" },
  });

  return latestPosts; 
}

タイトル一覧を表示させ、id をslugで運用しているのでこのようなコンポーネントにしました。

components/LatestPostList.tsx

import Link from "next/link";
import React from "react";

interface PostList {
  postTitle: string;
  postSlug: string;
}

export default function PostList({ postTitle, postSlug }: PostList) {
  return (
    <>
      <Link
        href={`/blog/${postSlug}`}
        className="block pt-3 indent-2 text-sm hover:text-gray-400"
      >
        {postTitle}
      </Link>
    </>
  );
}

これで最新の１０件のタイトルとそれに紐付く記事のリンクが作成され
遷移できます。

src/app/page.tsx

// 最新の記事の１０件を表示
{latestPosts.contents.map(
(latestPost: { id: string; title: string }) => (
  <PostList
    key={latestPost.id}
    postTitle={latestPost.title}
    postSlug={latestPost.id}
  />
)
)}

方法は色々模索中なのでよりベターな方法があれば
教えていただけるとうれしいです！！