<h2 id="hb9839ad71f">ライブラリ</h2><p><a href="https://github.com/nygardk/react-share" target="_blank" rel="noopener noreferrer">react-share</a> を使用します。<br><br>インストール</p><pre><code>yarn add react-share</code></pre><p><br></p><h2 id="h922edff87b">実装</h2><p>まずはインポートします。<br>今回は Twitter, Facebook, Line, Hatenaを使用します。(この記事の下部にあるものと同じ)</p><pre><code>import { TwitterShareButton, FacebookShareButton, LineShareButton, HatenaShareButton, TwitterIcon, FacebookIcon, LineIcon, HatenaIcon } from &quot;react-share&quot;;</code></pre><p><br>後は設置したい箇所に、下記のように記載するだけです。</p><pre><code>&lt;TwitterShareButton url=&quot;https:&#x2F;&#x2F;prism-cube.com&quot; title=&quot;ページタイトル&quot;&gt;
　　&lt;TwitterIcon size={30} round={true} &#x2F;&gt;
&lt;&#x2F;TwitterShareButton&gt;

&lt;FacebookShareButton url=&quot;https:&#x2F;&#x2F;prism-cube.com&quot; quote=&quot;ページタイトル&quot;&gt;
　　&lt;FacebookIcon size={30} round={true} &#x2F;&gt;
&lt;&#x2F;FacebookShareButton&gt;

&lt;LineShareButton url=&quot;https:&#x2F;&#x2F;prism-cube.com&quot; title=&quot;ページタイトル&quot;&gt;
　　&lt;LineIcon size={30} round={true} &#x2F;&gt;
&lt;&#x2F;LineShareButton&gt;

&lt;HatenaShareButton url=&quot;https:&#x2F;&#x2F;prism-cube.com&quot; title=&quot;ページタイトル&quot;&gt;
　 &lt;HatenaIcon size={30} round={true} &#x2F;&gt;
&lt;&#x2F;HatenaShareButton&gt;</code></pre>

【Next.js】シェアボタンを設置する

<h2 id="hfa66ac9b59">aspidaを導入</h2><h3 id="hd8d793506b">インストール</h3><pre><code>yarn add @aspida&#x2F;fetch</code></pre><h2 id="he98e7ef630">使用するAPIスキーマ</h2><h3 id="hcd4e76d427">Articles</h3><p><img src="https://images.microcms-assets.io/assets/637a154d3e1c433dadd7561517c3541d/233d44f1584d46cf9b91f64ad9a0a881/a_microcms-aspida-1.png" alt></p><h3 id="h0502f3a90c">tags</h3><p><img src="https://images.microcms-assets.io/assets/637a154d3e1c433dadd7561517c3541d/403a5d694dcc4507bf0570aaeee017cc/a_microcms-aspida-2.png" alt></p><h2 id="hf71e62297b">型定義ファイルの作成</h2><h3 id="h802c719757">共通</h3><p>microCMSのAPIのリクエストとレスポンスで使用する共通の型を作成します。<br><br>src&#x2F;types&#x2F;api.ts</p><pre><code>export type ContentsResponse&lt;T&gt; = {
 contents: T[];
 totalCount: number;
 offset: number;
 limit: number;
};
 
export type ContentResponse&lt;T&gt; = {
 id: string;
 createdAt: string;
 updatedAt: string;
 publishedAt: string;
 revisedAt: string;
} &amp; T;
 
export type ContentsQuery = {
 draftKey?: string;
 offset?: number;
 limit?: number;
 orders?: string;
 q?: string;
 fields?: string;
 ids?: string;
 filters?: string;
 depth?: number;
};
 
export type ContentQuery = {
 draftKey?: string;
 fields?: string;
 depth?: number;
};</code></pre><p><br></p><h3 id="hcd4e76d427">Articles</h3><p>記事用のレスポンスの型を作成します。<br><br>src&#x2F;types&#x2F;article.ts</p><pre><code>import { ContentsResponse } from &quot;.&#x2F;api&quot;;
import { TagResponse } from &quot;.&#x2F;tag&quot;;
import { ImageResponse } from &quot;.&#x2F;image&quot;;
 
export type ArticlesResponse = ContentsResponse&lt;ArticleResponse&gt;;
 
export type ArticleResponse = ContentResponse&lt;{
 title?: string;
 body?: string;
 tags?: TagResponse[];
 image?: ImageResponse;
}&gt;;</code></pre><p><br>タグと画像用の型も作成します。<br><br>src&#x2F;types&#x2F;tag.ts</p><pre><code>import { ContentResponse, ContentsResponse } from &quot;.&#x2F;api&quot;;
import { ImageResponse } from &quot;.&#x2F;image&quot;;
 
export type TagsResponse = ContentsResponse&lt;TagResponse&gt;;
 
export type TagResponse = ContentResponse&lt;{
 name?: string;
 image?: ImageResponse;
}&gt;;

src&#x2F;types&#x2F;image.ts
export type ImageResponse = {
 url?: string;
 height?: number;
 width?: number;
};</code></pre><p><br></p><h2 id="h98cff18434">aspidaの設定</h2><p>プロジェクトルートに <span style="color:#14171a">aspida.config.js を作成します。</span><br><br>aspida.config.js</p><pre><code>module.exports = {
 input: &quot;src&#x2F;apis&quot;,
};</code></pre><p><br>aspida用の型定義ファイルを作成します。<br><br>src&#x2F;apis&#x2F;articles&#x2F;index.ts</p><pre><code>import { ContentsQuery } from &quot;src&#x2F;types&#x2F;api&quot;;
import { ArticlesResponse } from &quot;src&#x2F;types&#x2F;article&quot;;
 
export type Methods = {
 get: {
  query?: ContentsQuery;
  resBody: ArticlesResponse;
 };
};</code></pre><p><br>src&#x2F;apis&#x2F;articles&#x2F;_id@string&#x2F;index.ts</p><pre><code>import { ContentQuery } from &quot;src&#x2F;types&#x2F;api&quot;;
import { ArticleResponse } from &quot;src&#x2F;types&#x2F;article&quot;;
 
export type Methods = {
 get: {
  query?: ContentQuery;
  resBody: ArticleResponse;
 };
};</code></pre><p><br></p><h2 id="h82915db38a"><span style="color:#14171a">$api.ts</span>を生成</h2><p>package.json の scripts に &quot;api:build&quot;: &quot;aspida&quot; を追加します。<br><br>package.json</p><pre><code>&quot;scripts&quot;: {
  &quot;dev&quot;: &quot;next dev&quot;,
  &quot;build&quot;: &quot;next build&quot;,
  &quot;start&quot;: &quot;next start&quot;,
  &quot;api:build&quot;: &quot;aspida&quot;
 }</code></pre><p><br></p><pre><code>yarn api:build</code></pre><p>上記を実行すると、src&#x2F;apis&#x2F;$api.ts が生成されます。<br></p><h2 id="h16374f7be1">APIを叩く</h2><p>APIを叩く為の共通設定を utils&#x2F;api.ts に持たせます。<br><br>utils&#x2F;api.ts</p><pre><code>import aspida from &#x27;@aspida&#x2F;fetch&#x27;
import api from &#x27;src&#x2F;apis&#x2F;$api&#x27;
 
const fetchConfig: Required&lt;Parameters&lt;typeof aspida&gt;&gt;[1] = {
 baseURL: &#x27;https:&#x2F;&#x2F;[YOUR-SERVICE].microcms.io&#x2F;api&#x2F;v1&#x2F;&#x27;,
 throwHttpErrors: true,
 headers: {
  &quot;X-API-KEY&quot;: &#x27;[YOUR-API-KEY]&#x27;,
 },
};
 
export const client = api(aspida(fetch, fetchConfig));</code></pre><p><br>シンプルにAPIを呼べるようになりました！</p><pre><code>import { ArticlesResponse } from &#x27;src&#x2F;types&#x2F;article&#x27;
import { client } from &#x27;src&#x2F;utils&#x2F;api&#x27;
 
const response = await client.articles.$get()</code></pre><p><br>0件目から、5件取得する場合</p><pre><code>const response = await client.articles.$get({
 query: {
  offset: 0,
  limit: 5,
 },
})</code></pre><p><br>IDから1件取得する場合</p><pre><code>const id = &#x27;content-id&#x27;;
const response = await client.articles._id(id).$get()</code></pre>

PrismCube

Next.js

【Next.js】シェアボタンを設置する

aspidaで型定義してmicroCMSのAPIにアクセスする