<p><span style="color:#24292e">おはこんにちばんは。Next.jsに</span>Adobe Fontsに対応してみました。<br><br><span style="color:#333333">Adobe fontsで日本語（東アジアの言語）を含むフォントを選択した場合、スクリプトの埋め込みを求められるので、</span>その対応手順になります。<br><a href="https://github.com/IshinoJun/sample-next-adobe-web-font" target="_blank" rel="noopener noreferrer">サンプルコードはこちら</a>。<br></p><h2 id="hfe5a8eaaf7"><span style="color:#24292e">実行環境</span></h2><ul><li>Next.js 10.0.0</li><li>React 17.0.1</li></ul><p><br></p><h2 id="h1c68c77870">AdobeFontsのプロジェクトIDを環境変数に定義</h2><p><span style="color:#0d0d0d">まずはAdobeFontsでプロジェクトIDを取得してください。</span><br><span style="color:#0d0d0d">それをルート配下の </span><strong>.env.local </strong>に以下のように定義してあげてください。</p><pre><code>NEXT_PUBLIC_KID_ID=&lt;PROJECT_ID&gt;</code></pre><p><br></p><h2 id="h6fffc0d37f">フォントを読み込む<span style="color:#333333">スクリプトを定義</span></h2><p>これは<span style="color:#0d0d0d">AdobeFonts</span>公式のサンプルをそのまま利用します。kitIdの部分は環境変数に書き換えています。<br>サンプルはルート配下にそのスクリプトを作成します。</p><pre><code>.&#x2F;adobeLoader

const adobeLoader = (d) =&gt; {
  const config = {
      kitId: process.env.NEXT_PUBLIC_KID_ID,
      scriptTimeout: 3000,
      async: true,
    },
    h = d.documentElement,
    t = setTimeout(function () {
      h.className = h.className.replace(&#x2F;\bwf-loading\b&#x2F;g, &quot;&quot;) + &quot; wf-inactive&quot;;
    }, config.scriptTimeout),
    tk = d.createElement(&quot;script&quot;),
    f = false,
    s = d.getElementsByTagName(&quot;script&quot;)[0],
    a;
  h.className += &quot; wf-loading&quot;;
  tk.src = &quot;https:&#x2F;&#x2F;use.typekit.net&#x2F;&quot; + config.kitId + &quot;.js&quot;;
  tk.async = true;
  tk.onload = tk.onreadystatechange = function () {
    a = this.readyState;
    if (f || (a &amp;&amp; a != &quot;complete&quot; &amp;&amp; a != &quot;loaded&quot;)) return;
    f = true;
    clearTimeout(t);
    try {
      Typekit.load(config);
    } catch (e) {}
  };
  s.parentNode.insertBefore(tk, s);
};

export default adobeLoader;</code></pre><p><br></p><h2 id="hf051d4c4f3"><span style="color:#0d0d0d">AdobeFontsの</span><span style="color:#333333">スクリプトを</span>読み込む</h2><p>次にブラウザ側の処理で1度AobeFontsのスクリプトを読み込む必要があるので、_app.tsx のuseEffect で一度実行するようにします。<br>サーバーサイド側で実行してしまうと、documentが無くて落ちるので注意しましょう。</p><pre><code>.&#x2F;pages&#x2F;_app.tsx

import adobeLoader from &quot;..&#x2F;adobeLoader&quot;;

useEffect(() =&gt; {
  if (process.browser) adobeLoader(document);
}, [])</code></pre><p><br></p><h2 id="h6c094c4b4b">CSSのフォント指定</h2><p>最後はCSSを指定するだけです。今回はグローバルに以下のCSSを指定しています。</p><pre><code>font-family: &#x27;fot-tsukuardgothic-std&#x27;, sans-serif;
font-style: normal;
font-weight: 400;</code></pre><p><br></p><h2 id="hab0ca1fc2c">チラつき対応</h2><p>そうなんです。実はこのままだとAobeFontsをロードする前に1度デフォルトのフォントが表示されてしまい、以下のように一瞬チラつきます。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/1030c1223966ddc2597064470df5a125.gif" alt><br><br>この対策にはAobeFonts<span style="color:#333333">の読み込み完了後、htmlタグに.wf-activeというclassが挿入されるので、以下のように対応すると改善されます。</span></p><pre><code>html {
  visibility: hidden;
}
html.wf-active {
  visibility: visible;
}</code></pre><p><br>これで終了です。お疲れ様でした。<br></p><h2 id="h1afe451c43">さいごに</h2><p>今回は知り合いに相談されて色々調べてみましたが、あまり参考となる情報がなかったので取り敢えずで対応してみました。<br>もっといい方法ある気がするw<br></p><h2 id="h3de35099b3">参考</h2><p><a href="https://qiita.com/hirossyi73/items/6551bc32f0d8c2e56092" target="_blank" rel="noopener noreferrer">https://qiita.com/hirossyi73/items/6551bc32f0d8c2e56092</a><br></p>

【Next.js】Adobe Fontsに対応してみた

<p><span style="color:#24292e">おはこんにちばんは。</span>Next.jsで実装した静的サイトのサイトマップを生成してみました<span style="color:#24292e">。</span><br><span style="color:#24292e">その手順を記載します。</span><a href="https://github.com/IshinoJun/sample-sitemap" target="_blank" rel="noopener noreferrer">サンプルコードはこちら</a><span style="color:#24292e">。</span><br></p><h2 id="hfe5a8eaaf7"><span style="color:#24292e">実行環境</span></h2><ul><li>Next.js 10.0.0</li><li>React 17.0.1</li></ul><p><br></p><h2 id="h0909947c4e">プロジェクトの設定</h2><p>まずは、雑に静的ページを生成します。</p><pre><code>.&#x2F;pages &#x2F; [dynamic] &#x2F;index.js

import { GetStaticPaths, GetStaticProps, NextPage } from &#x27;next&#x27;
import React from &#x27;react&#x27;
import { useRouter } from &#x27;next&#x2F;router&#x27;;

const DynamicPage: NextPage = () =&gt; {
  const router = useRouter();
  return (
    &lt;div&gt;
      &lt;h1&gt;{router.query.dynamic}&lt;&#x2F;h1&gt;
    &lt;&#x2F;div&gt;
  )
}

export const getStaticPaths: GetStaticPaths = async () =&gt; {
  const paths = [...Array(10)].map((_, index) =&gt; ({
    params: {
      dynamic: `${index}`,
    },
  }))
  
  return { paths, fallback: false };
}

export const getStaticProps: GetStaticProps = async (context) =&gt; {
  return {
    props: {},
  }
}

export default DynamicPage</code></pre><p><br></p><h2 id="hc2e1b5db24">packageを追加</h2><p>今回は <strong><code>next-sitemap</code></strong><strong> </strong>というpackageを利用します。</p><pre><code>yarn add next-sitemap -D</code></pre><p><br>次にルート配下に <strong><code>next-sitemap.js</code></strong><strong> </strong>という設定ファイルを作成します。</p><pre><code>module.exports = {
  siteUrl: &quot;https:&#x2F;&#x2F;www.example.com&quot;,
  generateRobotsTxt: true,
};</code></pre><p><br>最後にプロジェクトがビルドされるたびにサイトマップ生成をするようにするため、<code>package.json</code>の<code>script</code>に以下を追加します。</p><pre><code>&quot;postbuild&quot;: &quot;next-sitemap&quot;</code></pre><p><br></p><h2 id="ha166e75e87">プロジェクトをビルドする</h2><pre><code>yarn build</code></pre><p><br>そうするとpublic配下に以下のような<code>robots.txt</code>と<code>sitemap.xml</code>に生成されたかと思います。サイトマップにはすべての静的ページが記載されています。<br></p><pre><code>.&#x2F;public&#x2F;robots.txt

User-agent: *
Allow: &#x2F;
Host: https:&#x2F;&#x2F;www.example.com
Sitemap: https:&#x2F;&#x2F;www.example.com&#x2F;sitemap.xml</code></pre><p><br></p><pre><code>.&#x2F;public&#x2F;sitemap.xml

&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;urlset xmlns=&quot;http:&#x2F;&#x2F;www.sitemaps.org&#x2F;schemas&#x2F;sitemap&#x2F;0.9&quot; xmlns:news=&quot;http:&#x2F;&#x2F;www.google.com&#x2F;schemas&#x2F;sitemap-news&#x2F;0.9&quot; xmlns:xhtml=&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;1999&#x2F;xhtml&quot; xmlns:mobile=&quot;http:&#x2F;&#x2F;www.google.com&#x2F;schemas&#x2F;sitemap-mobile&#x2F;1.0&quot; xmlns:image=&quot;http:&#x2F;&#x2F;www.google.com&#x2F;schemas&#x2F;sitemap-image&#x2F;1.1&quot; xmlns:video=&quot;http:&#x2F;&#x2F;www.google.com&#x2F;schemas&#x2F;sitemap-video&#x2F;1.1&quot;&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;0&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;1&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;2&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;3&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;4&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;5&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;6&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;7&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;8&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;9&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;&#x2F;urlset&gt;</code></pre><p><br></p><h2 id="h7005ec096e">Google Serch Consoleからサイトマップを登録する</h2><p>あとは、Google Serch Consoleの管理画面からサイトマップを追加します。<strong>https:&#x2F;&#x2F;www.example.com</strong><strong>&#x2F;sitemap.xml </strong>で登録可能です。<br>正しく実装出来ていれば、以下のようにURLを検出してインデックスされるはずです。お疲れ様でした。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/sitemap.png" alt><br></p><h2 id="h1afe451c43">さいごに</h2><p>このブログ自体のサイトマップを作成していなかったので、実装してみました。とても簡単ですね。<br></p><h2 id="h3de35099b3">参考</h2><p><a href="https://www.iamvishnusankar.com/blogs/how-to-generate-sitemap-for-nextjs-projects/" target="_blank" rel="noopener noreferrer">https://www.iamvishnusankar.com/blogs/how-to-generate-sitemap-for-nextjs-projects/</a></p>

【Next.js】静的サイトのサイトマップを生成してみた

<p><span style="color:#24292e">おはこんにちばんは。</span><a href="https://github.com/IshinoJun/nextjs-storybook" target="_blank" rel="noopener noreferrer">Next.jsにStorybookを導入</a>してみました<span style="color:#24292e">。その手順を記載します。</span><br></p><h2 id="hfe5a8eaaf7"><span style="color:#24292e">実行環境</span></h2><ul><li>Next.js 9.5.3</li><li>React 16.13.1</li><li>Storybook&#x2F;react 6.0.12</li><li>Node.js 12.18.0</li></ul><p><br></p><h2 id="hc2e1b5db24">packageを追加</h2><p>いくつか便利なアドオンも追加しています。<br></p><pre><code>yarn add -D @storybook&#x2F;react @storybook&#x2F;addons @storybook&#x2F;addon-a11y @storybook&#x2F;addon-actions @storybook&#x2F;addon-info @storybook&#x2F;addon-knobs @storybook&#x2F;addon-links @storybook&#x2F;addon-storyshots @types&#x2F;storybook__addon-info @types&#x2F;storybook__addon-storyshots @types&#x2F;storybook__react</code></pre><p><br></p><h2 id="hfa896f3411">設定ファイルを追加</h2><p>以下、必要な設定を追加します。<br></p><pre><code>.storybook&#x2F;main.js

const path = require(&quot;path&quot;);
const SRC_PATH = path.join(__dirname, &#x27;..&#x2F;src&#x27;);

module.exports = {
  stories: [&#x27;..&#x2F;src&#x2F;**&#x2F;*.stories.tsx&#x27;],
  addons: [
    &#x27;@storybook&#x2F;addon-a11y&#x27;,
    &#x27;@storybook&#x2F;addon-actions&#x27;,
    &#x27;@storybook&#x2F;addon-knobs&#x27;,
    &#x27;@storybook&#x2F;addon-links&#x27;,
  ],
  webpackFinal: async(config, {configType}) =&gt; {
    config.module.rules.push({
      test: &#x2F;\.(ts|tsx)$&#x2F;,
      include: [SRC_PATH],
        use: [
          {
            loader: require.resolve(&#x27;babel-loader&#x27;),
            options: {
              presets: [[&#x27;react-app&#x27;, { flow: false, typescript: true }]],
            }
          },
          { loader: require.resolve(&#x27;react-docgen-typescript-loader&#x27;) }
        ]
    });
    config.resolve.extensions.push(&#x27;.ts&#x27;, &#x27;.tsx&#x27;);
    return config;
  }
};</code></pre><p><br></p><pre><code>.storybook&#x2F;preview.js

import { addDecorator } from &#x27;@storybook&#x2F;react&#x27;;
import { withInfo } from &#x27;@storybook&#x2F;addon-info&#x27;;
import { withKnobs } from &#x27;@storybook&#x2F;addon-knobs&#x27;;
import { withA11y } from &#x27;@storybook&#x2F;addon-a11y&#x27;;

addDecorator(withInfo);
addDecorator(withKnobs);
addDecorator(withA11y);</code></pre><p><br></p><h2 id="hc389788d77">コンポーネントとStroyを追加</h2><p>簡単なコンポーネントとStoryを以下の通り追加します。<br>Stroyの命名は、<code>Component名 + .stories.tsx</code><span style="color:#333333"> になります。</span><br></p><pre><code>src&#x2F;components&#x2F;Button.tsx

import * as React from &quot;react&quot;;

interface Props {
  text:string;
}

type ButtonProps = React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt; &amp; Props;

const Button: React.FC&lt;ButtonProps&gt; = (props:ButtonProps) =&gt; {
  const { text } = props;

  return (
    &lt;button {...props}&gt;{text}&lt;&#x2F;button&gt;
  );
};

export default Button;</code></pre><p><br></p><pre><code>src&#x2F;components&#x2F;Button.stories.tsx

import { Meta } from &quot;@storybook&#x2F;react&#x2F;types-6-0&quot;;
import React from &quot;react&quot;;
import Button from &quot;.&#x2F;Button&quot;;

export default {
  title: &quot;Button&quot;,
  component: Button,
} as Meta;

export const Default = (): JSX.Element =&gt; &lt;Button text=&quot;test&quot; &#x2F;&gt;;</code></pre><p><br></p><h2 id="hb047d44edf">Storybookを起動</h2><p>packageに以下を追加して起動できるようにします。<br></p><pre><code>package.json

&quot;scripts&quot;: {
    &quot;storybook&quot;: &quot;start-storybook -p 6006&quot;,
    &quot;build:storybook&quot;: &quot;build-storybook -o build&#x2F;storybook&quot;
  }</code></pre><p><br><strong>yarn storybook</strong>  で起動し、<a href="http://localhost:6006/" target="_blank" rel="noopener noreferrer">http://localhost:6006</a> にアクセス出来たら成功です。以下のような画面が出るはずです。お疲れ様でした。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/storybook.png" alt><br></p><h2 id="h1afe451c43">さいごに</h2><p>たまたま触る気があったのでまとめてみました。調べると意外と古い情報が記事が多くありました。<br>例えば、Storybookの5系から推奨されるCFSで書かれていなかったり、設定ファイルが7系で消えるconfig.jsやaddons.jsを利用しているなど。移り変わりが早いですね...<br>なので、今回は2020&#x2F;9&#x2F;20時点で推奨される記法で書いたつもりです。<br><br>また良き情報があれば発信したいと思います。<br><br>以上です。最後まで読んで頂きありがとうございます。</p>

【Next.js】Storybookを導入してみた

<p><span style="color:#24292e">おはこんにちばんは。</span><a href="https://github.com/IshinoJun/nextjs-microcms-contact" target="_blank" rel="noopener noreferrer">Next.js + microCMSで問い合わせ機能</a>を実装してみました。<br></p><h2 id="h8d027c8ed3">はじめに</h2><ul><li>実装方法について触れています。特にAPIキーを隠蔽せずに実装している記事が見受けられてたので、その辺は注意して触れていきます。</li><li>Next.js や microCMSとは？っといった概要には触れません。</li></ul><p><br></p><h2 id="h38c8766536">microCMSの設定</h2><p>この辺は他のサイトで触れてるところがあったので雑に説明します。<br></p><h3 id="h2c9414f5a4">コンテンツ（API）の追加</h3><p>API名とエンドポイントを入力し、コンテンツ（API）を追加します。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B1.png" alt><br><br>続いて、POSTが使えるリスト形式を選択します。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B2.png" alt><br><br>必要なAPIスキーマーを設定すれば終了です。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B3.png" alt><br><br>なお、以下も忘れずに実施ください。</p><ol><li>POSTリクエストを有効にする（<strong>API設定 &gt; HTTPメソッド設定）</strong></li><li>APIリファレンスから<strong>X-WRITE-API-KEY</strong>を作成して控えておく</li></ol><p><br></p><h2 id="h131d3691cd">Next.jsで問い合わせ機能を実装</h2><p>フォーム機能を実装していきます。<br></p><h3 id="h2ce7c28a66">問い合わせ用の関数を作成</h3><p>Next.jsにはサーバーレス関数を起動できるAPI Routes機能があります。<br>その機能を利用し、サーバサイド経由でAPIキーを隠蔽してリクエストを送るようにします。<br><br>まず、環境変数を利用するために<strong>.env.local</strong>を作成し、先ほどメモしたX-WRITE-API-KEYを記載します。<br>NEXT_PUBLIC_を変数の前にを付けるとフロント側にも公開されてしまうので、APIキーなどでは付けない方が良さそうですね。</p><pre><code>WRITE_API_KEY=&quot;メモしたX-WRITE-API-KEY&quot;</code></pre><p><br>次に以下のような関数とクエリをチェックするタイプガード を用意します。<br>詳しくはリンクのコード見てもられば！<br><br><a href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/api/contact.ts" target="_blank" rel="noopener noreferrer">/</a><a href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/api/contact.ts" target="_blank" rel="noopener noreferrer">pages/api/</a><a href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/api/contact.ts" target="_blank" rel="noopener noreferrer">contact.ts</a></p><pre><code>  &#x2F;&#x2F; クエリとAPIキーのチェック
  if (!isContact(req.body) || typeof WRITE_API_KEY === &quot;undefined&quot;) {
    return res.status(404).end();
  }

  const content = await fetch(`https:&#x2F;&#x2F;xxxxxx.microcms.io&#x2F;api&#x2F;v1&#x2F;contacts&#x2F;`, {
    headers: { &quot;X-WRITE-API-KEY&quot;: WRITE_API_KEY },
    body: JSON.stringify(req.body),
  })
    .then(() =&gt; &quot;Created&quot;)
    .catch(() =&gt; null);

  &#x2F;&#x2F; CMS側で正しく作成されたかチェック
  if (content !== &quot;Created&quot;) {
    return res.status(401).json({ message: &quot;Unauthorized&quot; });
  }

  res.status(200).json({ message: &quot;OK&quot; });

  res.end(&quot;Contact enabled&quot;);
};</code></pre><p><br><a href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/utils/TypeGuardUtils.ts" target="_blank" rel="noopener noreferrer">/utils/TypeGuardUtils.ts</a></p><pre><code>const isContact = (item: unknown): item is Contact =&gt; {
  const target = item as Contact;

  return (
    &quot;name&quot; in target &amp;&amp;
    typeof target.name === &quot;string&quot; &amp;&amp;
    !!target.name &amp;&amp;
    &quot;email&quot; in target &amp;&amp;
    typeof target.email === &quot;string&quot; &amp;&amp;
    !!target.email &amp;&amp;
    &quot;body&quot; in target &amp;&amp;
    typeof target.body === &quot;string&quot; &amp;&amp;
    !!target.body
  );
};

</code></pre><p><br>これで <strong> `&#x2F;api&#x2F;contact` </strong>でこの関数を起動できるようになりました。<br>処理としては、以下のチェックをし、問題無ければ200を返すようにしています。問題があればエラーを返します。</p><ol><li>クエリとして渡されるオブジェクトが期待通りのオブジェクトか</li><li>実際にmicroCMSのAPIを呼び出して正しく作成されたか</li></ol><p><br>microCMSのAPIの呼び出し処理はラッパーなりを用意した方が無難かもですね。keyの設定なりを毎回しなくてはいけないので。<br></p><h3 id="h782dc6ea91">ページ側の作成</h3><p>今回はフォームバリデーションライブラリの <a href="https://github.com/react-hook-form/react-hook-form" target="_blank" rel="noopener noreferrer">react-hook-form</a>（<a href="https://github.com/jquense/yup" target="_blank" rel="noopener noreferrer">yup</a>）とUIライブラリの<a href="https://material-ui.com/" target="_blank" rel="noopener noreferrer">Material-UI</a>を利用しています。<br>上記ライブラリについて詳しくは触れませんが、react-hook-formは公式に記載通り以下の点で優秀だなっと思った最近この頃。<br></p><ul><li>再レンダリングが最小に抑えられている</li><li>コードの記述量が少ない</li><li>外部 UI コンポーネントライブラリとの統合が容易</li></ul><p><br>ページとしては以下の３つを作成します。量が多いので必要なとこだけ説明します。<br><br><a href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/contact/index.tsx" target="_blank" rel="noopener noreferrer">pages/conatct/index.tsx</a></p><pre><code>  const onSubmit = async (contact: Contact): Promise&lt;void&gt; =&gt; {
    try {
      await fetch(baseUrl + &quot;&#x2F;api&#x2F;contact&quot;, {
        method: &quot;POST&quot;,
        headers: {
          &quot;Content-Type&quot;: &quot;application&#x2F;json; charset=utf-8&quot;,
        },
        body: JSON.stringify(contact),
      }).then((res) =&gt; {
        if (!res.ok) {
          throw Error(`${res.status} ${res.statusText}`);
        }
      });

      void router.push(&quot;&#x2F;contact&#x2F;success&quot;);
    } catch (err) {
      void router.push(&quot;&#x2F;contact&#x2F;error&quot;);
    }
  };</code></pre><p><br>フロント側から上記のように叩くことで先ほど作成した問い合わせ用の関数を起動させています。<br>これでサーバサイド経由でAPIキーを隠蔽し、リクエストを送るよう出来ました。<br><br>「何故フロントからだとAPIキーが隠蔽されないのか」は<a href="https://microcms.io/blog/nuxt-secure-api-key/" target="_blank" rel="noopener noreferrer">このサイト</a>で詳しく解説されておりました。<br><br><a href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/contact/success/index.tsx" target="_blank" rel="noopener noreferrer">pages/success/index.tsx</a><br><a href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/contact/error/index.tsx" target="_blank" rel="noopener noreferrer">pages/error/index.tsx</a><br>上記は、問い合わせの成功時と失敗時の画面です！<br><br>これで実装としては完了です。<br><span style="color:#454545">実装後に作成したフォームで送信してみて、</span>microCMSでその結果が表示出来ていれば完成です！！！<br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B5.png" alt><br><br>最後に通知が必要な方は、<strong>Webpack &gt; API設定</strong>でSlackやメール通知などが可能なので設定しておくと良いでしょう。<br></p><h2 id="ha214098e44">まとめ</h2><p>Next.js と microCMS を問い合わせ機能しました。APIキー周りの管理は基本的に自己責任となるので注意が必要ですね。（てかブログ書くの大変）</p>

【Next.js】 microCMSで問い合わせ機能を実装してみた

<h2 id="h8d027c8ed3">はじめに</h2><p>おはこんにちばんは。<br>Webのエンジニアに転身してそろそろ1年になるので、ポートフォリオ 兼ブログを作ってみた。<br>主にWeb周りの技術で色々と触った結果などをゆる〜く書こうかな。<br></p><h2 id="h696e98ee0a">自己紹介</h2><p>スタートアップで働く27歳。フロントとバック共に触っている。<br>詳しくは以下を見てもらえると。<br><a href="/profile" target="_blank" rel="noopener noreferrer">https://ji23-dev.com/profile</a></p>

【Next.js】Adobe Fontsに対応してみた

【Next.js】静的サイトのサイトマップを生成してみた

【Next.js】Storybookを導入してみた

【Next.js】 microCMSで問い合わせ機能を実装してみた

エンジニアかもなので、技術ブログはじめてみた