<h1 id="hed900658dc">環境</h1><p>まずは制作環境や採用したものを紹介していきます。<br>ベースとなっているのは、microCMSさんの<a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer nofollow">こちらのブログ(<strong>microCMS + Next.jsでJamstackブログを作ってみよう</strong>)</a>で紹介されているものになります。主に使用した環境は以下になります。</p><ul><li>Next.js</li><li>React</li><li>microCMS(ブログ作成部分)</li><li>Vercel(デプロイ先)</li><li>Github</li><li><a href="https://preline.co/" target="_blank" rel="noopener noreferrer nofollow">Preline UI</a>(Tailwind CSS)</li><li><a href="https://daisyui.com/" target="_blank" rel="noopener noreferrer nofollow">daisy ui</a>(Taillwind CSS)</li></ul><h1 id="h738688b202">制作に至った理由</h1><p>当サイトを制作するに至った理由は主に２つあります。</p><ol><li>Next.jsの勉強をしたかった。</li><li>個人サイトが欲しかった。</li></ol><p>以上の2つになります。</p><h2 id="hfffbb11b7f">Next.jsの勉強をしたかった</h2><p>僕はNode.js×expressを今年(2024年)の4月からふれていて、いくつかアプリケーションを作成していたのですがNext.jsとReact等の存在を７月頃に知りまして、そこからNext.jsを使った物を制作したいと考えていました。そんな中で、８月下旬からNext.jsの勉強をこちらの本(<a href="https://amzn.asia/d/bwsRhrS" target="_blank" rel="noopener noreferrer nofollow">TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発</a>)を読みながら開始しました。</p><p>中頃まで読んだあたりで実際のアプリケーション開発に入っていくのですが、お恥ずかしい話そこまでの内容をあまり理解できてないと感じたので、なにかもっとお手軽に始められて実際に使っていきたいサンプルのようなものは無いかなと探していたところ、9月の頭にシンさんの<a href="https://www.youtube.com/watch?v=dNpONz4Yi04" target="_blank" rel="noopener noreferrer nofollow">こちらの動画</a>と先ほど紹介した<a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer nofollow">microCMSさんの記事</a>を見つけました。ここで初めてmicroCMSさんのことを知りました。こちらのチュートリアルであれば、２,３の希望も満たせることに気づき、制作にするに至りました。</p><h2 id="hd37d038844">個人サイトが欲しかった</h2><p>以前から個人サイトは欲しかったのですが、自分の持ってる知識だと、記事の作成更新等の機能を自分で実装しようとすると、かなりの時間と労力がかかってしまうことが容易に想像できてしまいました。例えば、データベースの設定や僕だけがログインできるページを作成してそこでページを作成する等・・・。</p><p>そんな中で見つけたのが<a href="https://www.youtube.com/watch?v=dNpONz4Yi04" target="_blank" rel="noopener noreferrer nofollow">シンさんの動画</a>と<a href="https://blog.microcms.io/microcms-next-jamstack-blog/">microCMSさんの記事</a>になります。こちらであれば記事の制作の管理はmicroCMSの方でとても簡単にできる！と思い使うことにしました。またVercelであれば簡単にデプロイできるのでこちらを使用することにしました。</p><h1 id="hbac9c46500">制作時に困ったことの備忘録</h1><p>ここからは、制作段階で困ったこととその対処法を書いていきます。</p><h2 id="h584bac3b4a">microCMSの全件取得</h2><p>microCMSでは、１度のリクエストでデフォルトでは、10件のみしかコンテンツを取得しません。そこで、<a href="https://document.microcms.io/content-api/get-list-contents" target="_blank" rel="noopener noreferrer nofollow">microCMSのAPIドキュメント</a>を除いてみるとクエリーにlimitを設定できて最大100件まで取得できますが前件取得はできません。そのため、代わりにmicroCMSさんが用意してくれている<a href="https://help.microcms.io/ja/knowledge/fetch-big-data#:~:text=%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82-,getAllContents(),-%EF%BC%9A%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E5%85%A8" target="_blank" rel="noopener noreferrer nofollow">getAllContents</a>を使用します。これで全件取得が可能になりました。</p><h2 id="h10aea7c5f0">目次機能</h2><p>microCMSを利用して目次機能を生成する方法はmicroCMS公式ブログに記載されています。<a href="https://blog.microcms.io/next-microcms-toc/" target="_blank" rel="noopener noreferrer nofollow">Next.js で目次機能を実装してみよう</a>と<a href="https://blog.microcms.io/create-table-of-contents/" target="_blank" rel="noopener noreferrer nofollow">microCMSで目次を作成する</a>を見て実装いたしました～！見た目部分は<a href="https://pote-chil.com/css-stock/ja/toc" target="_blank" rel="noopener noreferrer nofollow">こちらのサイト</a>のデザインを採用いたしました。</p><h2 id="hc0c4b84159">next-sitemapを使用したサイトマップ生成</h2><p>先に結論を書きますと、こちらのサイト(<a href="https://dev-harry-next.com/seo/nextjs-ssr-sitemap" target="_blank" rel="noopener noreferrer nofollow">Next.jsのSSRを使って動的にサイトマップを生成する</a>)を見て実装しました。</p><p>SEO対策のひとつである、サイトマップを簡単に実装できるnext-sitemapですが、SSGでの実装だとoutput modeを&quot;export&quot;にしなければならなくて、Next,jsのImageタグと相性が悪くSSRでの実装になりました。(この結論に至るまでが長かった...)私が購入した本(<a href="https://amzn.asia/d/bwsRhrS" target="_blank" rel="noopener noreferrer nofollow">TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発</a>)にもSSRでの実装をしていたので、これでいいはず！</p><h2 id="hdb3d9b6b3a">Faviconの設定</h2><p>Next.jsだとどのようにファビコンを実装するのだろう？と疑問に思いましたが以下の記事を見て実装しました！<br><a href="https://qiita.com/mrskiro/items/cd9aca1ae735ad678355" target="_blank" rel="noopener noreferrer nofollow">Next.jsでFaviconを設定する</a></p><h2 id="h53d94843e8">OGP生成</h2><p>サイトのリンクをSNS等に貼り付けるとそのサイトのサムネイルが表示されると思います。その画像の生成方法と注意点をメモしておきます。</p><ul><li>サイズは1200 × 630が理想</li><li>画像生成にはcanvas APIを使用</li><li>Googleフォントを使う際にはインストールボタンを押す。</li></ul><p>まず画像のサイズは1200 × 630が理想です。</p><p>次にOGP画像の生成にはCanvasAPIを使用いたしました。(<a href="https://ji23-dev.com/blogs/nextjs-ogp" target="_blank" rel="noopener noreferrer nofollow">参考記事</a>)</p><p>最後に、OGP画像生成時にフォントを指定するのですが、Googleフォントをインストールして使うには、zipファイルをインストールした後に使用したいフォントの.ttfファイルを開いてインストールボタンを押す必要があります。(<a href="https://rakumo.com/gsuite/gws-hint/google-fonts/fonts-how-to-use/#Google_%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88_%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9:~:text=specimen/Rampart%2BOne-,Google%20%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%20%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9,-%E3%81%93%E3%81%93%E3%81%A7%E3%81%AF%E3%80%81%20PC" target="_blank" rel="noopener noreferrer nofollow">参考記事</a>)</p><h1 id="h7dabb5418b">今後の展望</h1><p>これから実装したい機能として検索機能です。現在はブログの数も少ないですが、ゆくゆくは増やしていきたい！ので検索機能をこれから実装したいと考えています。</p><h1 id="h3bcda3e6b0">最後に</h1><p>ここまで読んでいただきありがとうございます！！これから色々作っていこうと思いますのでよろしくおねがいします！ヒカセンの皆様はゲームでも仲良くしてくれると嬉しいな！ではでは、またね～</p><h1 id="hcdf5804e4b">参考リンク集</h1><ul><li><a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer nofollow">microCMS + Next.jsでJamstackブログを作ってみよう</a></li><li><a href="https://amzn.asia/d/bwsRhrS" target="_blank" rel="noopener noreferrer nofollow">TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発</a></li><li><a href="https://www.youtube.com/watch?v=dNpONz4Yi04" target="_blank" rel="noopener noreferrer nofollow">シンさんの動画</a></li><li><a href="https://blog.microcms.io/microcms-next-jamstack-blog/">microCMSさんの記事</a></li><li><a href="https://document.microcms.io/content-api/get-list-contents" target="_blank" rel="noopener noreferrer nofollow">microCMSのAPIドキュメント</a></li><li><a href="https://help.microcms.io/ja/knowledge/fetch-big-data#:~:text=%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82-,getAllContents(),-%EF%BC%9A%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E5%85%A8" target="_blank" rel="noopener noreferrer nofollow">getAllContents</a></li><li><a href="https://blog.microcms.io/next-microcms-toc/" target="_blank" rel="noopener noreferrer nofollow">Next.js で目次機能を実装してみよう</a></li><li><a href="https://blog.microcms.io/create-table-of-contents/" target="_blank" rel="noopener noreferrer nofollow">microCMSで目次を作成する</a></li><li><a href="https://pote-chil.com/css-stock/ja/toc" target="_blank" rel="noopener noreferrer nofollow">HTML・CSSでつくるおしゃれな目次のデザイン3選</a></li><li><a href="https://dev-harry-next.com/seo/nextjs-ssr-sitemap" target="_blank" rel="noopener noreferrer nofollow">Next.jsのSSRを使って動的にサイトマップを生成する</a></li><li><a href="https://qiita.com/mrskiro/items/cd9aca1ae735ad678355" target="_blank" rel="noopener noreferrer nofollow">Next.jsでFaviconを設定する</a></li><li><a href="https://ji23-dev.com/blogs/nextjs-ogp" target="_blank" rel="noopener noreferrer nofollow">Next.js × Vercel】OGP画像を動的生成してみた</a></li><li><a href="https://rakumo.com/gsuite/gws-hint/google-fonts/fonts-how-to-use/#Google_%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88_%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9:~:text=specimen/Rampart%2BOne-,Google%20%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%20%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9,-%E3%81%93%E3%81%93%E3%81%A7%E3%81%AF%E3%80%81%20PC" target="_blank" rel="noopener noreferrer nofollow">Google フォント の使い方</a></li></ul>

works

UmiSiozaki.com