<p>microCMSブログ記事「<a href="https://blog.microcms.io/how-to-use-aspida/" target="_blank" rel="noopener noreferrer">Aspida + microcms-js-sdkを使った型安全なAPI開発を参考にしながらaspida</a>」を参考にaspidaを使い本サイトの記事を取得・表示したので、<br></p><h3 id="h58a6675258">パッケージのインストール</h3><pre><code>npm i @aspida/fetch</code></pre><p><br>他にも<code>@aspida/axios</code> <code>@aspida/node-fetch</code>もあるけど、microCMSで紹介されていたので、<code>@aspida/fetch</code>を選択。<br></p><h3 id="h814de21b1d">APIkeyとbaseURLは.env</h3><pre><code>API_KEY="xxxxxxxxxxxxxxx"
CMS_API_URL="https://xxxxx.microcms.io/api/v1"</code></pre><p><br></p><pre><code>const fetchConfig: Required&lt;Parameters&lt;typeof aspida&gt;&gt;[1] = {
&nbsp; headers: {
&nbsp; &nbsp; "X-MICROCMS-API-KEY": process.env.API_KEY || "",
&nbsp; },
&nbsp; baseURL: process.env.CMS_API_URL || "",
};</code></pre><p><br></p><h3 id="hbe8641c492">記事のタイトルを表示してみる</h3><pre><code>const fetchPosts = async () =&gt; {
&nbsp; const data = await client.blog.$get();
&nbsp; return { data };
};
export const getStaticProps = async () =&gt; {
&nbsp; const { data } = await fetchPosts();
&nbsp; return {
&nbsp; &nbsp; props: { postsData: data },
&nbsp; };
};
type Props = InferGetStaticPropsType&lt;typeof getStaticProps&gt;;

const Home: NextPage&lt;Props&gt; = ({ postsData }) =&gt; {
&nbsp; return (
&nbsp; &nbsp; &lt;&gt;
&nbsp; &nbsp; &nbsp; &lt;main&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {postsData.contents.map((post: Content) =&gt; (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li key={post.id}&gt;{post.title}&lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &lt;/main&gt;
&nbsp; &nbsp; &lt;/&gt;
&nbsp; );
};</code></pre><p><br></p>

<p>microCMSブログ記事「<a href="https://blog.microcms.io/how-to-use-aspida/" target="_blank" rel="noopener noreferrer">Aspida + microcms-js-sdkを使った型安全なAPI開発を参考にしながらaspida</a>」を参考にaspidaを使い本サイトの記事を取得・表示してみました。</p><p><br></p><h3 id="h58a6675258">パッケージのインストール</h3><p><code>npm i @aspida/fetch</code></p><p><br></p><p><code>@aspida/axios</code> <code>@aspida/node-fetch</code>など他にもありますが、参考記事と同じ<code>@aspida/fetch</code>を選択しました。</p><p><br></p><h3 id="h90b69cb24d">.envの作成</h3>

API_KEY="xxxxxxxxxxxxxxx" //microCMSのAPIキー
CMS_API_URL="https://xxxxx.microcms.io/api/v1"

const fetchConfig: Required<Parameters<typeof aspida>>[1] = {
  headers: {
    "X-MICROCMS-API-KEY": process.env.API_KEY || "",
  },
  baseURL: process.env.CMS_API_URL || "",
};

<h3 id="hbe8641c492">記事のタイトルを表示してみる</h3>

<h3 id="h4c3dde1119">詳細ページを表示する</h3><p><br></p>