サイトをリニューアルしました

2022-08-16

去年に引き続き、1 年ぶりにサイトをリニューアルしました。

これまでは Gatsby と Gatsby Cloud を使用して運営していたのですが、いかんせん両方とも使いづらく、それならばと慣れた Next.js × Vercel の組み合わせに思い切って移行してみました。

React を使用して環境を作る場合、Gatsby も十分選択肢になり得ると思っているのですが…。

実際今回のリニューアルも、当初 Gatsby を使用して開発を始めたのですが、やはり Next.js ほど手に吸い付く感じがなく、かゆいところに手が届かず結構厳しかったです。

まぁ、Gatsby がそこまで強く採用されていない時点で色々と察する部分もあります、好きなんですが、なかなかどうして。

トップページのイラストは例によってなおやさんに描いてもらいました。

とはいえもともとサイト用に描いてもらったイラストではないため、ここではあまり触れないようにします。

春日部つむぎちゃんって時点でこれまた色々と察する人は察するかもです、お楽しみに。

Next.js を使用するにあたり、前回のサイトをリニューアル時に裏側を結構強めに組んでいたため、意外と手こずる部分も多かったです。

実装自体はデザイン含め半日ほどで完了したのですが、やっぱり裏側は大変ですね。

裏側で主に使用しているパッケージは以下のとおりです。

Mixpanel は外しちゃいましたが、それ以外は結構詰め込みました。

Gatsby と異なり、Next.js は api の機能を持ち合わせているのが強すぎますね。

わざわざ Firebase などを介す必要もなく、何も考えず環境変数をすべて Vercel に乗っけられるのは神だなぁと。

メールの送信機能や、ブログの最新状態を api を介して開発できるのはすごすぎる、しかも無料。

逆に表側で使用している主なパッケージは以下のとおりです。

今の時代ほんと便利なパッケージがたくさんリリースされているので、導入していて楽しいですね。

もちろんしっかりとした選定は必要だと思いますが、ダウンロード数がほぼ答えですよね。

今回意外と苦戦したのがやはりブログ周りでして。

今回からブログエントリーの一覧ページに本文の書き出しを表示しようと思ったのですが、ここを static で取得するとファイルの容量制限を超えちゃいまして。

じゃあ段階的に取得すれば良いやと思いページャーを swr に噛ませたところ、今度は api 側で取得処理の時間制限に引っかかってしまいました。

なのでとりあえず本文の書き出しの取得量を減らして対応してみましたが、最適解ではなさそうです、うーむ。

そんな感じです。

久しぶりに勢いで作り上げたのですが、めっちゃ楽しかったです。

例によってリポジトリも公開していますので、ぜひぜひ。