More than 3 years have passed since last update.

NextAuth.js+API Routes+Prisma...。Firebase不要!?のフルスタックアプリケーション。

Posted at 2021-12-03

はじめに

フロントエンドをメインで学習している僕にとって、Firebaseは欠かせない相棒です。
(いや、"でした"と言うべきでしょうか。今回、「NextAuth.js」と「Next API Routes」にトライするまでは、、)

下記のような技術スタックを用いて簡単なアプリを作成したので、その感想をFirebaseと比較しつつ、書いていきます。

前提として、、
ここでは個人開発等の比較的小規模なアプリケーションを想定して、色々書いております。

実装甘い部分はありますが、、

ゲストログインもあるので、覗いてみて下さい　

「Firebase Authentication」に迫るレベルで簡単に認証機能が実装できてしまいます。
SNSログイン認証であれば、ほぼ遜色ないです。
ただ、メールアドレス認証に関してはFIrebaseには敵わなそうです。
UIをカスタマイズしたり、認証メールを送るのがやや面倒でしょうか。

一方、NextAuthの良い点として、sessinを用いてログインしているかどうかを管理するのが容易であるように感じました。FirebaseはonAuthStateChangedメソッドを用いると思うのですが、このメソッドをどこで呼び出すか、データをどこで保持しておくか悩んだ記憶があります。

メールアドレス認証が不要ならば、NextAuth.jsを推奨したいです。

create-next-appを実行すると、pagesディレクトリ配下にapiディレクトリがデフォルトで作成されます。このapiディレクトリ配下に作成したファイルで、クライアントから呼び出せるAPI を定義することができます。

Expressを導入する必要も無いのです。

ただ個人的に微妙だったのが、pages配下にapiディレクトリを置くと、フロント側と視覚的に混ざってしまう点です。今回の小規模な開発でさえ、やりにくさを感じました。出来ればAPI側は、フロント側と明確に分別したいところです。

Githubにプッシュすれば、自動でビルド・デプロイされるので非常にカンタン。
以前、SSRで実装したNuxt.jsのアプリケーションを、「Firebase Hosting」でデプロイしたのですが、「Cloud Functions」の設定が必要で苦労しました。

push毎にデプロイしてくれる点もvercelの良いところです。
ビルドに失敗していたら、プルリクを作成したタイミングで教えてくれます。

今回一番躓いたのが、テストの実装です。
「NextAuth.js」や「API routes」の公式では、Cypressが推奨されております。他にも、next-test-api-route-handlerというモジュールなどが選択肢としてあります。
詳しくは公式ドキュメントでご確認下さい。

githubで色々な実装例は確認したものの、結局Jestを採用しました。
node-mocks-httpを使うと、比較的スッキリ記述出来ました。

ただ、正直APIのテストはかなりサボっております。
ベストプラクティスと言える自信はありませんが、個人的にはJestで落ち着きました。

今後の個人開発は、上記の技術スタックを使用していきたいです。
もちろんFirebaseの方が、開発の全体的なスピードは早いと思います。
しかし、Firebaseに関してのキャッチアップ自体にもそれなりに時間的コストがかかります。
(NoSQLなFirestoreは面白いですが、、）

というわけで、しばらくはVue.js(Nuxt.js)からは離れることになりそうです。
Next.jsが素晴らしすぎる、、、