aspidaを使ってmicroCMSの記事を取得してタイトルをリスト表示する
microCMSブログ記事「Aspida + microcms-js-sdkを使った型安全なAPI開発を参考にしながらaspida」を参考にaspidaを使い本サイトの記事を取得・表示してみました。
パッケージのインストール
npm i @aspida/fetch
@aspida/axios
@aspida/node-fetch
など他にもありますが、参考記事と同じ@aspida/fetch
を選択しました。
.envの作成
.env
API_KEY="xxxxxxxxxxxxxxx" //microCMSのAPIキー
CMS_API_URL="https://xxxxx.microcms.io/api/v1"
src/pages/index.tsx
const fetchConfig: Required<Parameters<typeof aspida>>[1] = {
headers: {
"X-MICROCMS-API-KEY": process.env.API_KEY || "",
},
baseURL: process.env.CMS_API_URL || "",
};
記事のタイトルを表示してみる
src/pages/index.tsx
const fetchPosts = async () => {
const data = await client.blog.$get();
return { data };
};
export const getStaticProps = async () => {
const { data } = await fetchPosts();
return {
props: { postsData: data },
};
};
type Props = InferGetStaticPropsType<typeof getStaticProps>;
const Home: NextPage<Props> = ({ postsData }) => {
return (
<>
<main>
<div>
<ul>
{postsData.contents.map((post: Content) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
</main>
</>
);
};