【2024最新版？】Next.js+Prisma+Supabase+Firebase AuthでTodoアプリのテンプレート
2年ぶりにNext.jsで作っていたテンプレートの更新を行いました。
色々変わっていて、結構大変でした。
作ったもの
↓以下のテンプレートを2年ぶりに更新しました。
2年ぶりの変更箇所はこちら
変更した点
PlanetScaleからSupabaseへ
PlanetScaleが無料枠を廃止したらしいのでSupabaseに移行しました。
ref: https://zenn.dev/probmkr/articles/7f76d38bf0aee8
本当は認証もFirebaseからSupabaseにしようと思ったのですが、面倒そうだったのでまた今度にします。
ESLint & Prittier -> Lefthook & biome
コードをコミットしようとしたら、ESLintが動かなくなってました。
FlatConfigというものに変わったみたいです。簡単には移行できなさそうでした...
最近良く使ってるLefthookが使えそうだったので、Biome & Lefthookに移行しました。
ref: https://zenn.dev/cybozu_frontend/articles/about-eslint-flat-config
ref: https://qiita.com/xrxoxcxox/items/5688472f24b275a7e87c
ref: https://zenn.dev/kei1232/articles/191a5eb6dbaaff
Recoil -> Jotai
パッケージをバージョンアップして、ビルドしたらRecoil関係のエラーが出てました。
Recoilはメンテナンスが止まったようです。Jotaiに移行しました。
Tailwind -> CSS Modules & Sass
別に変える必要はなかったのですが、Tailwindを久々に読むとよくわからなくなってました。
CSSのほうが個人的に読みやすかったので、戻すことにしました。
（変換はCopilotにやらせました。こういうのは得意ですね）
API Routes -> Route Handlers
2年前は、App Routerが登場したばかりで、サーバーサイドは/pages以下にいれる必要があった？記憶ですが、
App Routerに対応していましたので、移行しました。
これが一番大変でした。
ref: https://nextjs.org/docs/app/building-your-application/routing/route-handlers
middlewareだとfirebaseAdmin使えないからserverに
middlewareではFirebaseAdminは使えない。（2年前もハマった気がする）
Module build failed: UnhandledSchemeError: Reading from "node:stream" is not handled by plugins (Unhandled scheme). Webpack supports "data:" and "file:" URIs by default.
サーバーサイドでAuth周りの処理をするのはどこが正解なんだろう。
（今回は、各ルートのハンドラの最初に書くという微妙なことを行った...）
⨯ No HTTP methods exported in 'hogehoge'. Export a named export for each HTTP method.
defaultつけちゃだめらしい。
Error: Route "/api/todos/[slug]" used params.slug. params should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
awaitつけるらしい
Jest -> Vitest
最近はVitestが新しいらしい。（ESMで動かしやすいから？）
結構苦戦したけど移行できた。
ref: https://zenn.dev/builder_search/articles/14d8cc0dd2e606
ref: https://zenn.dev/htlsne/scraps/5427cd5dfbfc69
Discussion