<p>今回、Next.js, micoroCMS, Vercel を用いて JAMstack の技術ブログを作りましたので、そのお話をいたします。</p>
<p>作成したブログは<a href="https://www.nochitoku-it.com/" target="_blank" rel="nofollow noopener noreferrer">こちら</a><br>
ソースコードは<a href="https://github.com/YukiOnishi1129/nochitoku-blog" target="_blank" rel="nofollow noopener noreferrer">こちら</a><br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--0wzG3LQX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://images.microcms-assets.io/assets/07ff07e8d1244dd1984512c2a5431805/d4e0072141cf4b1fafd57356714d9e04/about.png" alt="NOCHITOKU" loading="lazy" class="md-img"></p>
<h1 id="%E7%A7%81%E3%81%AF%E3%81%93%E3%82%93%E3%81%AA%E3%82%84%E3%81%A4">
<a class="header-anchor-link" href="#%E7%A7%81%E3%81%AF%E3%81%93%E3%82%93%E3%81%AA%E3%82%84%E3%81%A4" aria-hidden="true"></a> 私はこんなやつ</h1>
<p>モダンフロントを中心に活躍しているフリーランスエンジニアです。<br>
エンジニアについての詳細なプロフィールはこちらにまとめていますので、良ければご覧ください。<br>
<a href="https://www.nochitoku-it.com/profile" target="_blank" rel="nofollow noopener noreferrer">プロフィール | NOCHITOKU</a></p>
<h1 id="%E3%81%AA%E3%81%9C%E4%BD%9C%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%8B%EF%BC%9F">
<a class="header-anchor-link" href="#%E3%81%AA%E3%81%9C%E4%BD%9C%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%8B%EF%BC%9F" aria-hidden="true"></a> なぜ作ったのか？</h1>
<p>以下の理由で作成しています。</p>
<ul>
<li><strong>技術ノウハウの発信場所</strong></li>
<li><strong>SSG のアウトプット</strong></li>
</ul>
<p>私自身スキルのキャッチアップの中で、個人ブログの知見により救われたことが多くありました。<br>
そこで、<strong>自分でも他のエンジニアの方の役に立とうと思い</strong>、個人ブログの開発に至りました。</p>
<p>ブログコンセプトなどはこちらにまとめていますので、良ければご覧ください。<br>
<a href="https://www.nochitoku-it.com/about" target="_blank" rel="nofollow noopener noreferrer">「NOCHITOKU ブログ」について</a></p>
<p>また、React, Next.js をメインに仕事をしているので、SSG 構成のアウトプットを兼ねて開発しています。<br>
現状は SSG 構成ですが、今後 ISR 化や E2E テストの導入など、保守体制の構築にも力を入れていこうと思います。</p>
<h1 id="%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E6%A9%9F%E8%83%BD">
<a class="header-anchor-link" href="#%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> ブログの機能</h1>
<p>一般的なブログの機能に加えて、PWA の機能があります。</p>
<ul>
<li><strong>ブログ一覧、記事詳細</strong></li>
<li><strong>検索</strong></li>
<li><strong>カテゴリー検索</strong></li>
<li><strong>アーカイブ検索</strong></li>
<li><strong>プロフィール</strong></li>
<li><strong>利用規約</strong></li>
<li><strong>プライバシーポリシー</strong></li>
<li><strong>PWA</strong></li>
</ul>
<h2 id="pwa-%E6%A9%9F%E8%83%BD%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
<a class="header-anchor-link" href="#pwa-%E6%A9%9F%E8%83%BD%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> PWA 機能について</h2>
<h3 id="%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3-(iphone%2C-android)">
<a class="header-anchor-link" href="#%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3-(iphone%2C-android)" aria-hidden="true"></a> スマートフォン (iPhone, Android)</h3>
<p>ブログサイトを「ホーム画面に追加」することで、ネイティブアプリのように操作することができます。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/chkqq2btt7jgt3pdzvh89hubrdwy" alt width="250" loading="lazy" class="md-img"></p>
<h3 id="pc-%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6-(mac)">
<a class="header-anchor-link" href="#pc-%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6-(mac)" aria-hidden="true"></a> PC ブラウザ (Mac)</h3>
<p>ブログサイトにブラウザからアクセスします。<br>
URL の右の方にあるアイコンをクリックし、「NOCHITOKU」ブログをインストールします。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/e1j7eyxqjcwaz7ui0a6nmuza3dxt" alt loading="lazy" class="md-img"><br>
すると画像のようなデスクトップアプリとして、ブログサイトを操作できるようになります。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/ho2c3cphgx08sekg3sz89gj8fl3x" alt loading="lazy" class="md-img"></p>
<h1 id="%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E6%A7%8B%E6%88%90">
<a class="header-anchor-link" href="#%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E6%A7%8B%E6%88%90" aria-hidden="true"></a> システム構成</h1>
<p>以下の構成にて、技術ブログを構築しています。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/citgvqslnvxfnz3li8h5ybnxpixe" alt loading="lazy" class="md-img"></p>
<p>ホスティングは Vercel で実施しています。<br>
Github との連携で、main リポジトリ push 時に自動デプロイが実行されるようになっています。<br>
また macroCMS と連携しており、<strong>webhook を用いて記事を公開するタイミングでも同様に自動デプロイが実行</strong>されます。</p>
<p>今回 SSG を採用しており、ビルド時に microCMS から API にて記事データを取得し、静的ファイルを生成するようにしています。<br>
そのため画面遷移時の同期通信などは発生せず、快適な操作性を実現しています。</p>
<h1 id="%E9%96%8B%E7%99%BA%E3%81%AE%E6%B5%81%E3%82%8C">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E3%81%AE%E6%B5%81%E3%82%8C" aria-hidden="true"></a> 開発の流れ</h1>
<h2 id="%E8%A6%81%E4%BB%B6%E5%AE%9A%E7%BE%A9%E3%83%BBwf-%E4%BD%9C%E6%88%90-(%E5%8D%8A%E6%9C%88)">
<a class="header-anchor-link" href="#%E8%A6%81%E4%BB%B6%E5%AE%9A%E7%BE%A9%E3%83%BBwf-%E4%BD%9C%E6%88%90-(%E5%8D%8A%E6%9C%88)" aria-hidden="true"></a> 要件定義・WF 作成 (半月)</h2>
<p>ブログコンセプトの決定とデザインの WF(ワイヤーフレーム)作成に注力しました。<br>
デザインは妻に外注しています。<br>
<strong>妻は現在、未経験から UI・UX デザイナーへの転職活動をしており、今回のブログデザインは良いポートフォリオになると思いお願いしました。</strong><br>
おしゃれで使いやすい UI のデザインを作成してくれて大満足です！</p>
<p>PC のみならずレスポンシブのデザインも作成していただきました。<br>
■PC<br>
<img src="https://storage.googleapis.com/zenn-user-upload/dtoe0ipvgs9uzybz5bffeicjf1x9" alt loading="lazy" class="md-img"></p>
<p>■ レスポンシブ<br>
<img src="https://storage.googleapis.com/zenn-user-upload/mj4ef76g01710wo78ybv5wwhu43g" alt loading="lazy" class="md-img"></p>
<p>またデザインツールに「<strong>Figma</strong>」を使用しています。<br>
Figma は以下の 2 点が魅力的で、チーム開発において最適なデザインツールだと捉えています。</p>
<ul>
<li><strong>コンポーネント単位にパーツを分割し、再利用できる</strong></li>
<li><strong>複数人でデザインを共有し同時操作ができる</strong></li>
</ul>
<p>今回のブログデザインもコンポーネントを作成し再利用することで効率的に開発することができました。</p>
<h2 id="%E8%A8%AD%E8%A8%88%E3%83%BB%E9%96%8B%E7%99%BA%E3%83%BB%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4(1-%E3%83%B6%E6%9C%88)">
<a class="header-anchor-link" href="#%E8%A8%AD%E8%A8%88%E3%83%BB%E9%96%8B%E7%99%BA%E3%83%BB%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4(1-%E3%83%B6%E6%9C%88)" aria-hidden="true"></a> 設計・開発・デプロイ(1 ヶ月)</h2>
<p>WF 完成後、妻が本格的なデザインカンプを作成するのと並行して、私の方で技術ブログの開発に取り組みました。<br>
スキルスタックは以下の通りです。</p>
<ul>
<li><strong>Next.js</strong></li>
<li><strong>TypeScript</strong></li>
<li><strong>CSS Modules</strong></li>
<li>
<strong>jest</strong>, <strong>testing-library</strong>
</li>
<li><strong>Storybook</strong></li>
<li>
<strong>eslint</strong>, <strong>prittier</strong>
</li>
</ul>
<p>またその他ライブラリとして、以下のものを導入しています。</p>
<ul>
<li><strong>dayjs</strong></li>
<li><strong>axios</strong></li>
<li>
<strong>react-anchor-link-smooth-scroll</strong> // ページ内リンク</li>
<li>
<strong>react-modal</strong> // モーダル表示</li>
<li>
<strong>react-scroll</strong> // ページトップへ遷移するためのライブラリ</li>
<li>
<strong>react-share</strong> // SNS シェアボタン</li>
<li>
<strong>cheerio</strong> // microCMS の記事データを変換</li>
<li>
<strong>highlight.js</strong> // 記事内のコードをハイライト</li>
</ul>
<p>設計方針や構成などは後ほど<a href="(https://www.nochitoku-it.com/)">「NOCHITOKU ブログ」</a>で発信する予定です。<br>
また Github にコードは公開していますので、ご興味がありましたらご覧ください。</p>
<p><a href="https://github.com/YukiOnishi1129/nochitoku-blog" target="_blank" rel="nofollow noopener noreferrer">YukiOnishi1129/nochitoku-blog</a></p>
<h1 id="%E5%BD%B9%E3%81%AB%E3%81%9F%E3%81%A3%E3%81%9F%E8%A8%98%E4%BA%8B%E7%B4%B9%E4%BB%8B">
<a class="header-anchor-link" href="#%E5%BD%B9%E3%81%AB%E3%81%9F%E3%81%A3%E3%81%9F%E8%A8%98%E4%BA%8B%E7%B4%B9%E4%BB%8B" aria-hidden="true"></a> 役にたった記事紹介</h1>
<p>開発時に助けられた記事を紹介いたします。</p>
<h2 id="next.js-%E3%81%AB-css-modules-%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#next.js-%E3%81%AB-css-modules-%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B" aria-hidden="true"></a> <a href="https://zenn.dev/catnose99/scraps/5e3d51d75113d3" target="_blank">Next.js に CSS Modules を導入する</a>
</h2>
<p>CSS Modules を Next.js に導入する際にとても参考になりました。<br>
CSS 変数の扱い方、メディアクエリの共有方法、絶対パスの指定方法など助けられました。</p>
<h2 id="nest.js-%2B-storybook-%2B-bulma-%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%E3%83%A1%E3%83%A2">
<a class="header-anchor-link" href="#nest.js-%2B-storybook-%2B-bulma-%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%E3%83%A1%E3%83%A2" aria-hidden="true"></a> <a href="https://zenn.dev/kobayashi_m42/scraps/41aae5f3091204" target="_blank">Nest.js + Storybook + Bulma 環境構築メモ</a>
</h2>
<p>Storybook に CSSmodules を導入する際の方法です。<br>
「sass-loader」のバージョンが v10.1.1 にしないと、Storybook 側でエラーが発生するので注意です。(Storybook が v6 の場合)</p>
<h2 id="how-to-import-svgs-into-nextjs">
<a class="header-anchor-link" href="#how-to-import-svgs-into-nextjs" aria-hidden="true"></a> <a href="https://medium.com/frontend-digest/how-to-import-svgs-into-nextjs-8ec6100e613f" target="_blank" rel="nofollow noopener noreferrer">How To Import SVGs into NextJS</a>
</h2>
<p>Next.js で svg を使用する設定です。<br>
いくつか方法はありますが、私は以下の方法を取っています。</p>
<ul>
<li>「babel-plugin-inline-react-svg」を install → .babelrc に設定</li>
<li>index.d.ts に svg の型定義を追加</li>
</ul>
<h2 id="next.js-%E3%81%A7%E3%82%B5%E3%82%AF%E3%83%83%E3%81%A8-pwa-%E5%AF%BE%E5%BF%9C">
<a class="header-anchor-link" href="#next.js-%E3%81%A7%E3%82%B5%E3%82%AF%E3%83%83%E3%81%A8-pwa-%E5%AF%BE%E5%BF%9C" aria-hidden="true"></a> <a href="https://qiita.com/NozomuTsuruta/items/8991707ff549b1552e78" target="_blank" rel="nofollow noopener noreferrer">Next.js でサクッと PWA 対応</a>
</h2>
<p>Next.js に PWA 対応を導入する方法です。<br>
「next-pwa」というライブラリが良く使われているので、こちらを採用しました。</p>
<h2 id="next.js-%E3%81%AE-preview-mode-%EF%BC%8B-vercel-%E3%81%A7%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E6%A9%9F%E8%83%BD%E3%82%92%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#next.js-%E3%81%AE-preview-mode-%EF%BC%8B-vercel-%E3%81%A7%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E6%A9%9F%E8%83%BD%E3%82%92%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B" aria-hidden="true"></a> <a href="https://blog.microcms.io/nextjs-preview-mode/" target="_blank" rel="nofollow noopener noreferrer">Next.js の Preview Mode ＋ Vercel でプレビュー機能を実現する</a>
</h2>
<p>microCMS 側で記事を下書きした場合のプレビュー機能の設定です。<br>
結構難しかったですが、micoroCMS 社が記事にしてくれていたので、詰まることなく進めることができました。<br>
プレビュー機能を導入する際も、ホスティングは Vercel にした方が構築は楽でしたね。</p>
<h2 id="using-nextjs-with-google-analytics-and-typescript">
<a class="header-anchor-link" href="#using-nextjs-with-google-analytics-and-typescript" aria-hidden="true"></a> <a href="https://medium.com/frontend-digest/using-nextjs-with-google-analytics-and-typescript-620ba2359dea" target="_blank" rel="nofollow noopener noreferrer">Using NextJS with Google Analytics and TypeScript</a>
</h2>
<p>Next.js に Google Analytics を適用させる方法です。<br>
gtag の型定義ライブラリである「@types/gtag.js」をインストールすることで簡単に設定できます。</p>
<h2 id="next.js(ssg)%E3%81%A7%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%8D%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86">
<a class="header-anchor-link" href="#next.js(ssg)%E3%81%A7%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%8D%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86" aria-hidden="true"></a> <a href="https://blog.microcms.io/next-pagination/" target="_blank" rel="nofollow noopener noreferrer">Next.js(SSG)でページネーションを実装してみよう</a>
</h2>
<p>ブログ記事一覧ページのページネーションの構築方法がまとめられています。<br>
getStaticPath で動的ページの作成、getStaticProps でデータ取得、ページネーションコンポーネントの作成など、結構複雑でしたが記事があって助かりました。</p>
<h2 id="next.js-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92-vercel-%E3%81%A7%E5%85%AC%E9%96%8B%E3%81%97%E3%81%A6%E3%80%81%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AB%E5%8F%8D%E6%98%A0%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#next.js-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92-vercel-%E3%81%A7%E5%85%AC%E9%96%8B%E3%81%97%E3%81%A6%E3%80%81%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AB%E5%8F%8D%E6%98%A0%E3%81%99%E3%82%8B" aria-hidden="true"></a> <a href="https://qiita.com/Niceguy1234567890/items/48923a766f101425a677" target="_blank" rel="nofollow noopener noreferrer">Next.js アプリを Vercel で公開して、独自ドメインに反映する</a>
</h2>
<p>XSERVER で取得したドメインを Vercel に割り当てる方法です。<br>
こちらはサブドメインの割り当てですが、オリジンドメインを XSERVER 側で設定し、ネームサーバを Vercel に設定し直せばいけました。<br>
この辺りもいつか NOCHITOKU ブログでまとめようと思います。</p>
<h1 id="%E6%9C%80%E5%BE%8C%E3%81%AB">
<a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h1>
<p>以上、JAMstack な技術ブログを開発した話でした。<br>
SSG に関しては初めての実装だったので戸惑うことが多かったですが、数多くの技術記事のおかげで完成まで到達することができました。<br>
私も「NOCHITIOKU」ブログで技術ノウハウを発信していき、同じように苦しんでいるエンジニアの方々の手助けをしていこうと思います。<br>
「NOCHITOKU」ブログでは実践的な技術ノウハウを中心に発信していきますので、ぜひご覧になってみてください！</p>
<p><a href="https://www.nochitoku-it.com/about" target="_blank" rel="nofollow noopener noreferrer">「NOCHITOKU ブログ」について</a></p>
<p>また私の妻が現在 UI・UX デザイナーへの転職活動をしております。<br>
このブログのデザインを 1 から全て担当しており、もしご興味がありましたら以下のアカウント宛に DM いただければ幸いです。</p>
<p><a href="https://twitter.com/shio_design" target="_blank" rel="nofollow noopener noreferrer">@shio_design</a></p>


JAMstackで技術ブログを作った話【Next.js ✖️ microCMS ✖️ Vercel】

Nest.js + Storybook + Bulma 環境構築メモ

Next.js の Preview Mode ＋ Vercel でプレビュー機能を実現する

Using NextJS with Google Analytics and TypeScript

Next.js(SSG)でページネーションを実装してみよう

Next.js アプリを Vercel で公開して、独自ドメインに反映する

Discussion