この次に紹介する手順について、2024年1月の最新版である Astro 4.1.1で確認したところ、プログラムが動作しない状態になっているようです。

そこで、手順の中で紹介している「src/library/microcms.ts」というファイルのプログラム内容を、公式ブログの内容の代わりに、次の内容をご利用ください。

//SDK利用準備

import { createClient } from "microcms-js-sdk";

const client = createClient({

  serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,

  apiKey: import.meta.env.MICROCMS_API_KEY,

});

//型定義

export type Blog = {

  id: string;

  createdAt: string;

  updatedAt: string;

  publishedAt: string;

  revisedAt: string;

  title: string;

  content: string;

};

export type BlogResponse = {

  totalCount: number;

  offset: number;

  limit: number;

  contents: Blog[];

};

//APIの呼び出し

export const getBlogs = async (queries?: any) => {

  return await client.get<BlogResponse>({ endpoint: "blogs", queries });

};

export const getBlogDetail = async (contentId: string, queries?: any) => {

  return await client.getListDetail<Blog>({

    endpoint: "blogs",

    contentId,

    queries,

  });

};

こちらで動作します。ご利用ください。