🖋️

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

1 min read 2

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

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

screenshot

技術

  • 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でまったく同じ挙動を経験している人がいるので、バグなのかもしれません。

Discussion

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

そうなのですよね。Zennでは仕方なく404の場合にもnotFound: trueを返さずに404ページとして既存のキャッシュを上書きしています。でないとキャッシュが消えるまで404が表示され続けることになってしまうので…。

早く解決されると良いのですが。

このあたりはまだ不安定なのかもしれませんね。ローカルではdevだけでなくstartコマンドでも正常に動作するため、nextというよりvercel側の問題のような気がします。

ログインするとコメントできます