【個人開発】Next.js + Prisma + PlanetScaleでスニペット共有サービスを作りました
個人開発でMy Snippetsというスニペット共有サービスを作りました。
エンジニアの人たちがコード画像をtwitterで公開しているのをよく見かけるので、そういうzennやQiitaなどで記事にするほどでもない短いコードが一箇所にまとまっていれば便利なんじゃないかなと思い、作ってみました。
My SnippetではOGPにコード画像が表示されるようになっているので、コード画像をシェアしたい時にも使えます。リンクカードだとこういう感じになります↓
TwitterでURLをシェアするとこんな感じでOGPが表示されます↓
プロジェクトを跨いで使いまわすようなコードをまとめておいたり、ちょっとしたコードをメモしておく場として使っていただけると嬉しいです。Googleアカウントだけで登録できるので、ぜひ使ってみてください！
こちらの記事では、My Snippetsの開発に使った技術や所感などをまとめておきたいと思います。
スクリーンショット
トップページ
エディタ部分
使った技術
フレームワーク・ライブラリなど
- Next.js (v13.4.12 / App Router使用)
- Tailwind CSS (RadixUIとcva併用)
- next-auth
- codemirror
- @vercel/og
- Prisma
環境
- Vercel
- PlanetScale
その他情報
作業人数
1人
開発期間
2ヶ月ぐらい
作ってみた所感
TailwindCSSめっちゃいい
Next.js 13が出るまではstyled-componentsやemotionを使ってCSSを書いていたんですが、Next.js 13ではどっちもあまり推奨されていないような雰囲気を感じたので、今回はTailwindCSSを使ってみました。
TailwindはHTMLがぐちゃぐちゃになるのがなんとなく嫌でずっと避けてたんですが、めちゃくちゃ便利ですね。めちゃくちゃすごいboilerplateを見つけたので、こちらをかなり参考にさせていただいたんですが、このboilerplateのようにcva(class-variance-authority)やRadixUIを併用すれば、だいぶスッキリすると思います。
例えばButtonコンポーネントだとこんな感じです↓
これはCheckboxコンポーネントで、RadixUIを使ってます↓
こういう感じでスタイルをまとめておけば、コードの見通しが悪くなるほどHTMLがごちゃつくことはないんじゃないでしょうか。今回TailwindCSSのおかげでかなり開発のスピードがあがった気がするので、食わず嫌いはだめだなーと反省しました。
Next.js 13めっちゃいい
revalidateTagとserver actionsが特にすごいと思いました
revalidateTagとserver actionsを使った例はMy Snippetsの方に書きましたのでよかったら見てみてください。こちらの例ではfetchリクエストごとにISRするみたいな感じで使ってます。updateの処理はAPIを介さずにserver actionsで行い、update後にrevalidateTagで再fetchしています。
もう今回みたいな個人開発であれば、もう別言語でAPI作ったりする必要ないですよね。全部Next.jsだけで完結できるんだなーって感じました。これからNext.jsがRailsみたいな感じになっていくんでしょうか？ほんとにすごいです...
まとめ
使ってみたかった技術をいろいろ使って実際に動くサービスを作ってみることで、すごく勉強になった個人開発でした。いろんな人に使ってもらいたいので、作って終わりではなく定期的にアプデして改善していこうと思っています。是非是非使ってみてください🤲
Discussion