Nextでミニマルなブログプラットフォームを作った

無料でミニマルデザインなブログを始められるカゲリというサービスを作りました。

以下のスクショの通り、かなりシンプルなデザインにしました。

技術

• Next
• Vercel
• MongoDB (Atlas)
• Auth0

特徴

• 装飾の排除
• Next の SSG による高速な配信
• マークダウンエディタ搭載
• 画像リンク禁止
• シンタックスハイライト
• 広告無し

文字以外の要素をできるだけ排除しました。いいねやソーシャル要素はありません。バズから距離を置いて、ゆったりと記事を書けるサービスを目指しました。

技術的所感

Next + Vercel でバックエンド構築と API アクセスの手間が省けた

今回のサービス開発はかなり快適だったと感じています。React で SPA を作るときにどうしても厄介になりがちなのがデータ取得・更新の非同期処理ですが、Next の SSG や API routes のおかげでフロントエンドの開発に集中できました。

データベースには MongoDB Atlas を使用し Vercel から直接読み書きしているので、API 用のサーバーは構成していません。これくらいの規模のサービスならデメリットよりメリットのほうがはるかに大きいと思います。

Vercel + MongoDB Atlas で完全無料

カゲリはドメイン以外完全に無料で運用できています。

Vercel は無料プランでも個人ならほとんど制限を気にせず使えます。MongoDB Atlas の容量制限は 500MB なので、ユーザー数が急増しない限りは問題ありません。

個人開発では小さなサービスを複数作るケースが多いと思います。ひとつの VPS 上で運用すれば低予算・定額でたくさん構築することもできますが、あまりやりたくありません。AWS や GCP にも無料枠はありますが、絶対にそこに収まるという保証はありません。今回の構成では、どちらも無料プランの使用にクレジットカードの登録は不要なので、絶対に課金されないという安心感があります。

技術的課題

SSG されたページを削除できない

カゲリでは各記事を動的に SSG しており、更新された場合も ISR によって再生成しています。

DB 上で記事が削除された場合、getStaticPropsからnotFound: trueが返るため、本来なら404ページが表示されなければいけません。しかし、なぜか元の記事が表示されてしまいます（内容の更新は正しく適用されるのに）。

github で見つけたissueでまったく同じ挙動を経験している人がいるので、バグなのかもしれません。