Next.js、TailwindCSS、microCMSでJAMstackブログを作成

学習したことをアウトプットすることはエンジニアにとって大切ですよね。

フロントエンドに興味を持ち、React、Next.jsを勉強していた時から、アウトプットとして技術ブログを作成することを決めていました。

なぜ技術ブログをアウトプットに選んだのかって？

僕のような開発の知識、経験がない方のお手伝いをこの技術ブログで出来たら良いなと思ったからですよ！！

言語はJavascriptを採用しています。

現在主流となっているTypescriptで書こうと思ったのですが、今回が初めてのプロダクト開発なので、使い慣れているJavascriptで開発しました。

次の開発からはTypescriptを使用しようと思います。

Next.jsは基本的に全てのページをPre-rendering(各ページに対してHTMLを予め作っておくこと)します。なのでパフォーマンスやSEOがより良い結果になります。

Pre-renderingには以下の二種類があります。

・静的にサイトを作成するSSG
・リクエストのたびにHTMLが作成されるSSR

SSGを使うことで表示速度を速くすることができ、SSRを使うことで動的コンテンツを扱えます。この点からNext.jsを採用しました。(あと今流行っているから...)

最近流行っているCSSフレームワークTailwindCSSを使用しました。

まずクラス名を決めなくていいので超楽です。
さらに、細かいレイアウトを簡単にできるという点もいいですね。

ただ、コードが長くなって可読性が低くなる点が...と思ったんですけど慣れたら案外大丈夫でした。

記事の内容、「ブログ」「プロダクト」の一覧画面の一部分はmicroCMSで作成しています。

さまざまなヘッドレスCMSがある中でなぜmicroCMS?

・国産なので日本語表記
・microcmsのブログにさまざまな情報が日本語で載っているので助かる(実際何度も助かりました)

色々な機能が追加され続けているので今後も期待ですね。

ホスティングサービスはVercelを使用しています。

Next.jsとVercelは同じ会社で作成されており、とても相性がいいです。無料でデプロイ、ドメインをカスタムすることができるという点がとても魅力的です。

Next.jsを使用する際のホスティングサービスはVercel一択です！！

初めてのプロダクト開発だったので結構時間はかかりました。

でも「このサイトが世界に配信され、誰かの助けになるのでは？？」と思いながら開発すると楽しかったです。

これからも「プロダクト」、「ブログ」を更新するので是非チェックしてみてください。