<p>こんにちはJUNYAです。<br>今回は、Next.jsを使用し開発したこのブログ「JUNBLOG.」についての記事になります。<br>開発に至った経緯、技術選定についてお話ししたいと思います。今後、Jamstackなブログって無料で公開できるの？アフィリエイトは可能なの？という方の参考になれれば幸いです。</p><h2 id="h46c3962f17">結論：無料でJamstackなブログ（アフィリエイト可）は作れます！</h2><p><span style="color:#c7243a;font-size: 1.5em">Jamstackなブログは無料で公開</span>できます。そして<span style="color:#c7243a;font-size: 1.5em">無料範囲でアフィリエイトを含む営利目的の運営も可能</span>です。<br>Jamstackなブログは簡単に言うと、事前にページを生成しそれを表示する仕組みなので、サクサクとページを表示することができます。WordPressを代表とするCMSサイトと比べると表示速度は一目瞭然。ページリロードに2秒以上かかると離脱率があがると言われているので、この点でもWeb運用には、とてもメリットのある技術であることがわかります。また、直接サーバーを介さずCDNが静的なページを返すだけで表示が可能ですので、セキュリティ面の強さも人気の一つです。今回はメリットだらけのjamstackで「無料」そして「営利目的も可能」なJUNBLOG.を開発しました。</p><h2 id="h929a8e4c31">なぜブログを作ったのか？</h2><p>過去にWordPressでブログを作ったことがありました。WordPressを習得することが目的で、それは達成できたのですが、肝心の記事を書くということに興味が湧かず、１年間でサーバーを解約し終了した経験があります。久しぶりにブログを作るに至った経緯を書きたいと思います。</p><h3 id="h0e4b88e529">技術的な興味</h3><p>今後Web開発をしていく上で、ライブラリであるReact.jsの基本概念に惹かれ日々習得に励んでいます。更に爆速で表示ができると評判のReact.jsをベースとしたフレームワークNext.jsを使用した自分のブログが欲しい！と思ったのがきっかけです。<br>CSSについては、「React.js関連で最適なCSSは何がいいのか論争」に自分の中での解としてtailwindcssがいいのでは？と思い今回初めて導入してみました。その他にもヘッドレスCMSでは国産のmicroCMS、ホスティングサービスにはnetlifyを使用した開発に技術的な興味があったことが一つ目です。</p><h3 id="hac84e4e38d">モチベーション</h3><h4 id="h61892ff950">知識の整理</h4><p>今回は以前と違い、知識の整理のためのアウトプットを増やすという目的をもっています。一番のアウトプットは、開発を行い成果物を作るだけではなく、+１のアウトプットとしてブログが効果的。記事にすることで、習得した技術を体系的に整理することが目的の一つです。</p><h4 id="ha2c447f770">情報発信欲</h4><p>普段プログラミングの知識のほぼ全てを、インターネットから得ている自分としては、色々な方が日々発信している情報にとても感謝しています。このブログを開発するのにも、様々な記事を参考にさせていただきました。自分もそうだったように、少しでも誰かの役にたちたいという欲が出てきたのがもう一つの目的です。<br></p><h2 id="h03726fb0df">技術スタック</h2><h4 id="ha222dd6fc7">基準</h4><p>選定の基準としては、Jamstackな構成であること。後に収益性が出てきた際も対応できるように、アフィリエイトを含む営利目的の運営が可能なこと。<br>そして費用については、<u>初期段階ではお金をかけずに運営でき、規模に応じて有料化できる構成であることを重要視しています。</u></p><h4 id="h0d376e5d4e">構成</h4><p>先程も少し触れましたが、JUNBLOG.を開発した技術構成は以下のとおりです。</p><ul><li>Next.js...フレームワーク</li><li>taiwindcss...スタイル</li><li>microCMS...ヘッドレスCMS</li><li>Netlify...ホスティングサービス</li></ul><p><br>それではひとつづつ説明します。<br></p><h3 id="haab1fd6475">Next.js</h3><p><img src="https://images.microcms-assets.io/assets/4bcfc3b75ce345c29a717f921dd7723f/027901e141dc46029ef3c33f82fa31e4/nextjs_icon.png" alt="" width="256" height="256"><br>React.jsが好きな私は、使わずにはいられないフレームワーク。Next.jsは基本的には全てのページをPre-renderingするため、爆速で表示することが可能になります。簡単にいうと開発にはReact.js（JavaScript）を使用するけど、クライアント側では静的なhtmlサイトとして表示されるため爆速で表示されるということでしょうか。この「爆速で表示」というユーザビリティに富んだ言葉に惹かれNext.jsを選定しました。TypeScriptを使用しています。<br></p><h3 id="he0dce7a7c5">tailwindcss</h3><p><img src="https://images.microcms-assets.io/assets/4bcfc3b75ce345c29a717f921dd7723f/ffdd01bb484b4315b6e0361fa8afe85a/tailwindcss_logo_icon.png" alt="" width="256" height="256"><br>React.js周りの技術を使用する際、CSSをどのように記述するかということに明確な答えを出せずにいました。<br>CSS in JS がいいのか、CSS modules を使用するのがいいのか色々開発しながら試行錯誤していました。<br>詳しく書くと長くなるので別の機会に記事にしたいと思いますが、結果自分の中では、tailwindcssは今のところの最適解となりました。今後もReact.js周りには積極的に採用していきたいです。静的なWebサイトやWordPressサイトなんかには向かないと思いますが・・・（今のところ採用する理由が見つからないです）<br></p><h3 id="hae6947d5ce">microCMS</h3><p><img src="https://images.microcms-assets.io/assets/4bcfc3b75ce345c29a717f921dd7723f/f6a68b8d1c5f4537b40f34b51d50c84e/microcms_logo.png?w=256&amp;h=256" alt="" width="256" height="256"><br>Jamstackな構成で必要になるのが、ヘッドレスCMS。そのほとんどが海外製の中、microCMSさんは日本製。使いやすいUIと何よりも安心な日本語ドキュメント。<br>もちろん今回の選定基準である無料で使用できるという条件も完璧にクリアです。<br>無料の範囲が<br>１．無制限のAPIの呼び出し<br>２．最大3人のメンバー<br>３．最大3個のAPI<br>と個人ブログでは全く問題のない構成。<br>高い頻度で更新されるブログやyoutubeで「ジャムジャム!!jamstack」などのイベントも開催されていて、今後も期待値の高いヘッドレスCMSです。今回は無料範囲での使用させていただいていますが、規模が大きくなればAPIを増やし機能を充実していくためグレードアップも考えています。また、UIがわかりやすくWordPressで運用できている企業様であれば、難なく使えると思うので、今後企業案件にも積極的に採用できそうです。<br></p><h3 id="h9da03a681c">Netlify</h3><p><img src="https://images.microcms-assets.io/assets/4bcfc3b75ce345c29a717f921dd7723f/5449da36623e4e53b945219f2e48833a/netlify-logo-png-transparent.png?w=256&amp;h=256" alt="" width="256" height="256"><br>ホスティングサービスはNext.jsの開発元でもあるVercelにしたいところでした。しかし、無料であるVercelのHobby planはnon-commercialとあり、営利目的は範囲外。Netlifyの無料枠であるStarterは営利目的に関する事項の記載はなく、無料で運営できるということが選定理由です。実際はNext.jsとの相性はどうか心配でしたが、現在はNetlifyもNext.jsにしっかり対応していて、Vercelほどではないにしても、簡単な設定でデプロイすることができました。初期段階は無料で試験的な運用ができるサービスとして今回はNelifyを一択でした。<br></p><h4 id="h3f2a1ce7c2">構成のまとめ</h4><p>いかがでしたでしょうか？Next.jsは今後も更なる。tailwindcssも今回使用した感じNext.jsやReact.jsを使用する開発に、私自身一つの解を見出せました。またヘッドレスCMSやホスティングサービスは、他のサービスがたくさんあります。しかし無料で営利目的可能ということであれば、今回の構成が参考になるのではないでしょうか？<br></p><h2 id="hc371e1f725">ブログを作ってみて</h2><p>今回は比較的新しい技術で開発することができ、とても楽しく作ることができました。<br>どちらかというと時間がかかったのは、ブログ記事を用意すること。（公開時にたった２記事なのに・・・）<br>文章力の必要性を痛感しました。<br>Next.jsで開発されたブログは、本当に爆速での表示が可能です。これは、ユーザー体験に影響を与えるものになります。<br>React.jsは学習コストはそれなりにかかるものの、一度概念を理解すればさまざまなモダンな技術に応用できます。Next.jsもその一つになります。まだReact.jsの学習したことがない方は、是非やってみてください。わからないことがあれば、できる範囲でお答えします。是非Contact（お問い合わせ入力フォーム）もしくは、TwitterのDMで気軽にご相談ください。React.jsを始めモダンな技術を一緒に学んでいき、Webをより良い世界にしていきましょう！<br></p><h2 id="h9be0c3393d">おわりに</h2><p>今回は、ブログはじめの挨拶として、ブログを始めた理由と技術選定についてのお話しとなりました。<br>JUNBLOG.の制作にあたっては、Netlify Functionsでめちゃくちゃハマったことや技術的な記事などは今後アップする予定でいます。<br><br>記事などご意見、お仕事の依頼などありましたら、Contact（お問い合わせ入力フォーム）又はTwitterのDMよりお気軽にお問い合わせください。<br><br>今後もなるべく高い頻度で有益な情報を発信していくつもりですので、また遊びに来ていただければ嬉しいです。</p>

無料で作る！Next.js  tailwindcss  microCMS  Netlifyでアフィリエイト可能なJamstackブログの開発についての記事です。

無料で作る！Next.js × tailwindcss × microCMS × Netlifyでアフィリエイト可能なJamstackブログの開発【目的・技術選定編】