Next.js + Vercel で個人ブログを立ち上げました。

きっかけ

前々からやりたいと思っていた個人ブログを立ち上げました。

きっかけは社で次に行う業務にNext.jsを利用したフロントエンド開発があったからです。
今までモバイルアプリエンジニアとして生きてきてフロントエンドなんもわからんマンだったので勉強を兼ねて実装しました。

技術スタック

前述した通りNext.jsを利用しています。ホスティングサービスはNext.jsの開発会社が提供しているVercelを利用しました。
ブログコンテンツの表示にはmicroCMSを利用しています。

ググるとこの組み合わせの解説記事がたくさん出てきました。

ハマったところ

ルーティングまわり

Next.jsを普段から使ってる人からしたら当たり前かもですが、ルーティングはv13からApp Routerというものを推奨しているようです。

以前までPages Routerというものを利用していたようなのですが、それを知らない自分は getStaticProps や getServerSideProps といったPages Router時代の関数を使った解説記事を読んでいて、いざ公式ページを見たら別の実装方法が紹介されていました。

基本的な部分はPages Routerでいうところの、、って感じで読み替えていけるレベルでそこまで大きく変わるものではなかったですが、公式のチュートリアルをめんどくさがらずに実施すべきでした。

Pages RouterとApp Routerを比較するzenn記事もあってとても参考になりました。

Metadata API

Next.jsはSEOの実装にMetadata APIというものが用意されています。
これを利用してOpenGraph周りを設定していたのですが、なぜかサムネイル画像が表示されない事象に直面しました。

というかこれを書いている今もできていないかもしれない。
インスペクタ上ではタグ生成されているんですけどね〜。キャッシュ更新とか試しても変わらなかったです。

こちらですが、自分が本番環境のドメインを metadataBase に設定できていなかったからでした。

と、思ったらX(旧Twitter)はすぐに更新されませんでした。
どうやらXの仕様上、キャッシュが7日間?保持されるようです。

自分の場合うまくいっていない状態で一度テストツイートをしてしまったのでその状態でキャッシュ保持されてしまいました。

Xのデベロッパー向けページにて、クエリパラメータを更新することで別画像として扱わせて更新できると案内されていました。
今回サムネイル画像はApp Routerのタグ自動生成を利用していて面倒だったのでキャッシュが更新されるのを待ちました。

参考：https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/troubleshooting-cards#refreshing

勉強不足すぎる。。

よかったこと

Vercelでのデプロイがとにかく楽でした。
似たようなサービスだとGitHub Pagesしか触ったことないのですが、Vercelも同じくらい簡単で初心者でも問題なくデプロイできました。
SSL証明書も自動生成してくれて更新もしてくれるようでありがたいです。

また独自ドメインを設定できるのも良きです。
欲しかったんですよね、独自ドメイン。この機会に購入しました。

結果、2000円程度で立ち上げられました。

これから

とりあえずNext.jsに触ってみることと公開を目標にしていて機能やUIにはこだわらなかったので、気が向いたら追加実装していきたいと思いました。

コードスニペットの表示にはきちんと対応できていないので、技術記事を書くときにはしばらくQiitaを使おうと思います。