Next.jsとmicroCMSでシンプルなポートフォリオサイトを作った
今年のはじめにNext.jsとmicroCMSをつかって自分のポートフォリオサイト的なものを作ってみました。
Next.jsのチュートリアルほぼそのままで作れるので、自分でそういうサイト作ってみたいなーと思っている人にはオススメです。
（まぁ今の時代NoCodeで十分な気もする）
せっかくなのでやったことをまとめておきます。
完成品↓
はじめに：やりたいこと
要件としては、
・独自ドメインを使った自己紹介サイトの作成がしたい
・ポートフォリオサイトらしく自分の経験（過去の仕事）を投稿できる仕組みにしたい
です。
必要なことはNext.jsのチュートリアルがほぼ全て教えてくれる
まず作成のベースとなるNext.jsを理解するため、チュートリアルをやってみることにしました。
このチュートリアル、ものすごく丁寧でわかりやすいのですが、ポートフォリオサイト作成に必要な機能がほぼ解説されているんですよね。
ページの作成やルーティングはもちろん、外部からデータを取ってくる方法や公開方法まで解説されています。
なのでこれを一通りなぞったあと、それを真似する形でポートフォリオサイトを作ることができました。
ちなみにチュートリアルの最後にTypescript化する方法も載っています。
Typescript初心者としてはありがたいですね。
コーディング環境の準備
VSCodeで開発を行うため、ESLint、StyleLint、Prittierを導入しました。
このLinterの設定が面倒で「設定で時間使いたくないのになぁ…」とか思ったりもしていましたが、新しいNext.jsのバージョンではESLintの設定をプロジェクト作成時に追加することができるようです。
こういうの苦手なのでポチポチするだけで環境が整うようになってほしい（）
Tailwind CSSを使ってみた
スタイリング（CSS）には話題になっていたTailwind CSSを使ってみました。
ドキュメントにもNext.jsへの導入手順が載っているので楽ですね〜
利用した感想としては、必要なスタイルが準備されていて各デフォルト値の変更も柔軟にできるライブラリだったので、CSS書きたくない人や小さい・素早くリリースしたいサイトの構築なんかではとても便利なんじゃないかと思います。
あとドキュメントの検索機能が便利（重要）。
「Tailwind CSSで補えないコンポーネントのスタイリングはどうするの？」という疑問をもっていたのですが、とある記事に「そういう例外はCSS in JSで書けばいいんじゃない」とありました。
なるほどそういう割り切りでも良さそう。
ただ個人的にはReactでサイト構築＆運用していくなら、やっぱりCSS Modulesでコンポーネント単位にCSS書いていこうよ派です。
コンポーネントの切り分けと素の？CSSを書いて管理しやすくするのがサイト運用には適してるかなと思います。
もちろんCSSをちゃんと管理する人（チーム）がいればの話なので、Tailwindも状況によってはとても素晴らしい手段の一つですよね〜
コンテンツ（記事）の管理はmicroCMSで
ポートフォリオらしく記事の追加もおこないたかったので、コンテンツの追加が簡単で取得APIが簡単に用意できるHeadless CMSを利用してみることにしました。
いろいろなCMSサービスがあるのですが、初めて利用するので日本生まれのサービスが利用方法など理解しやすいかなと思いmicroCMSを利用することに。
記事によって文章と画像の並びなどがかわるのでそのへんどうしようかなーと思っていたのですが、繰り返しフィールドという機能を利用することで自由にテキストや画像を組み合わせることができました。
配列で中身が返ってくるので、取り出したデータの形式に合わせた表示をしてあげることが可能になります。
Vercelで公開
VercelはNext.jsを開発している Vercel Inc. が手掛ける（静的）サイトのホスティングサービスです。なのでNext.jsのチュートリアルにも登場しているんですね。
チュートリアル通りやれば何も困ることはありませんでした。独自ドメインも設定できますし、SSLの設定も特に必要ありません。
GitHubにPushすれば自動でデプロイされます。
サイドのナビゲーションはreact-scrollで
react-scrollを利用して画面左にナビゲーションを表示しました。
現在表示している項目をナビで強調、クリックしたときのsmooth scrollが簡単に作成できました。
Google Analyticsで計測できるようにする
詳しく書かれていた記事があったのでそちらを紹介させていただきます。
私は単純にタグを埋め込むだけでしたが、イベント送信の方法なども詳しく解説されています。
まだできていないこと
これからやりたい
・404ページの作成
・ページをスクロールした時にコンテンツを表示するアニメーションを付けたい（お手軽な方法はあるか）
・記事が増えてきたら一覧ページのページネーション（or無限スクロール）機能をつけないといけない
---
もし自分のサイトを構築しようと考えている方、Next.jsは有力な選択肢になるんじゃないでしょうか〜