ポートフォリオサイトをNext.js + Vercel + microCMSでリニューアルした
こんにちは、okutaniです。自分のポートフォリオサイトを「Next.js + Vercel + microCMS」でリニューアルしてみました。Jamstackな構成っていうんですかね。リニューアルといっても、特に見た目は一切変わっていませんが。
LINKokutaniのポートフォリオサイト『okutani’s Portfolio』 | okutani’s Portfolio
利用しているサービスのURLはそれぞれ以下。
LINKNext.js by Vercel – The React Framework
LINKDevelop. Preview. Ship. For the best frontend teams – Vercel
LINKmicroCMS｜APIベースの日本製ヘッドレスCMS
今回は、ポートフォリオ内の「Trashlog」という日記の部分を、microCMSで管理したかったので今回の構成にしてみました。
今回、特にコードの部分など技術的な話には触れませんが（だいたいmicroCMSのブログを読めば解決できるため）、どうしてこの構成にしたのか、やってみてどうだったのか感想を書いてみます。
スポンサーリンク
なぜリニューアルしたのか
元々、ポートフォリオサイトは「静的ページ」→「Laravel」→「Ruby on Rails」と何度かリニューアルしてきました。無駄にリッチに作ってますね。
Railsで運用していてもよかったのですが、自作のAdmin画面を作って記事を更新しなければならなかったり、Railsを動かすためにわざわざHerokuの有料プランを契約したりしなければいけないことに不満を持っていました。
そこで、JSフレームワークの勉強にもなると思い、2020年8月あたりにNext.jsに書き換えてみました。
日記はMarkdownで直接リポジトリにコミットして管理。しかし、毎回エディターを開いて記事を書くのがめんどうでした。特に、スマホから更新ができないのは大きかったです。
そこで今回、日記の部分をHeadless CMSに置き換えようと思い、microCMSを利用してみました。
microCMSを選んだ理由ですが、日本の会社が運用しているので日本語に対応している → 今後Webサイト制作業務などにも利用できるかもしれない、と思ったからです。
自分だけで運用するサイトならContentfulなどのサービスでもいいかなと思いましたが、今後フリーランスで仕事を請け負う時にCMSの選定対象の一つになるのは魅力的でした。
実際使ってみて、特にストレスなく設定・日記の投稿ができたので、ノンプログラマーでも安心して使えるサービスなんじゃないかなと思いました。
また、以前はポートフォリオサイトをNext.js + Netlifyで公開していましたが、Headless CMSと相性がよさそうなVercelに乗り換えてみました。あと、NetlifyがNext.jsのImageコンポーネントにまだ対応していない？っぽかったので、それも移行理由の1つです。
やってみて良かった点
日記は圧倒的に管理しやすくなりました。また、microCMSで日記を更新するとVercelでSSGされるので、SSRと違ってWebサイト表示時のパフォーマンス（Railsなどと比較して）も良いかと思います。
あとは、仕事などで「ブログ機能付きのサイトを作って欲しい」なんて依頼にも、WordPressを利用せずに制作することができます。
僕自身、あまりWordPressが好きじゃないので「Next.js + Vercel（or Netlify） + microCMS」の構成でサイトが作れるという選択肢が増えてよかったです。
あとはmicroCMSの管理画面上でAPIのリクエストを試してみたりできるので、日記の取得方法をいろいろ変えるときに便利でした。そういう点でも分かりやすくてよかったです。
やってみて気になった点
記事を反映させるのに、ビルド時間が2, 30秒ほどかかるので、ちょっとした変更でもすぐに確認できないのが気になりました。
ただ、これはmicroCMSのプレビュー機能を利用してみたり、Next.jsのSSGではなくISG？（Incremental Static Regeneration）などを利用することであるていど改善できるかと思います。ISGについてはまだあまり知見がないので、実際に触ってみたら追記しようと思います。
また、microCMSではコンテンツID（今回は日記それぞれに割り振られているID）が変更できるのですが、3文字以下に設定することができませんでした。日記は「articles/1」のように、数字の連番で管理したかったため、「article_id」などとして新しくフィールドを追加し、その番号でfindするようにして解決しました。
普段SSRに慣れているせいか、SSGにしたときに発生する問題などあまり頭に入っていないため、きちんと仕組みを理解しておく必要があるなと思いました。特にビルド周りは「master(main)の更新」と「日記の更新」時に走るとちゃんと理解しておく必要があります。
あとはNext.jsの仕組みをあるていど理解していないと、ぱっとすぐに作れる構成ではないので、完全にWordPressに置き換わるかと言われるとそうではないかなと思います。それでも、Next.jsのこの構成でブログやメディアサイトを作るのはなかなかイケていて、いいんじゃないかなと思います。
おわりに
実際にNext.js + Headless CMSを使ってみて、そこまで時間もかからず公開までできたのでよかったです。
今後、このブログ（vdeep）もNext.jsでリニューアルしたいと思ってるのですが、記事数・画像数・広告の有無などでmicroCMSを利用するかどうかは迷っています。今現在300記事ぐらいあるので、できれば引越しのしやすいサービスがいいかなと。そうするとWordPressのHeadless APIとかが選択肢としてありなのかなーとか、もうすこし調査して決めたいと思います。
あと1点だけ補足すると、ドメインやCDN管理にCloudFlareをはさんでいます。「ムームードメイン」→「CloudFlare」→「Vercel」といった流れです。CloudFlareは必須ではないと思いますが、他のサイトと一緒に管理したかったためこの構成にしています。
また進捗があれば記事にしようと思います。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
