Next.js + NextAuth.js + Prisma + Tailwind CSS を使って爆速で Web アプリケーションを作成した

技術・テクノロジー

先日、べじはっく という(完全)菜食主義という生き方に興味・関心がある方向けの質問サイトを作成しました。

参考: (完全)菜食主義に関する質問サイト「べじはっく」をつくりました

この記事では、上記記事では触れなかったサイトの技術的な話をしていきます。

採用技術

普段は Nuxt.js を使うことが多いのですが、今回は Next.js を使ってみました。

過去に Nuxt.js で作ったサイト:

Next.js は最近リリースが頻繁に行われており、非常に勢いが感じられますよね。Nuxt.js も頑張ってほしい

実際、Next.js を利用しての開発は非常に開発体験が良く、開発していてとても気持ちよかったです。情報も多く、そんなにハマりポイントもありませんでした。

Next.js の嬉しいところ

普段、Nuxt.js を使っていて嬉しいな〜と思うのは、自分でコードを書く頻度を減らせるところです。Nuxt.js はプラグインが豊富で、それを組み込むだけであまり設定ファイルなどを書かずに実装が終わるというメリットがあります。

自分が以前 Next.js を使った際は、正直 Nuxt.js に比べるとコードを自分で書かされるな、と思いました。しかし今の Next.js は Tailwind CSS や ESLint など、自分で設定を書かずとも自動で設定を生成してくれる機能などが追加されていました。

いや〜これ、めちゃくちゃ便利です。自分で設定書きたくないですからね。これらの機能のおかげで、余計なセットアップの時間がずいぶん減らせたように感じました。


あとは、Next.js というよりは React の話なのですが、普段 Vue を書いている自分からすると型まわりのサポートはやはり React は安定しているなと思いました。型をつけられなくて困った、みたいなケースがほとんどなかったです。

Prisma がすごい

今回の技術スタックでサイトを作ろうと思ったきっかけは以下の記事でした。

参考: Next.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代

この記事を読む前の時点では、なんとなく Prisma という良さそうな技術があるんだな〜というくらいの認識でしたが、記事中にあるサンプルを動かしてみると「これはすごそうだ」と認識を改めました。

Prisma は Rails でいうところの schema.rb 的なファイル(schema.prisma)を直接編集するとそこから TypeScript の型情報と API クライアント、マイグレーションファイルを生成してくれる鬼のように便利な仕組みです。

参考: Prisma schema (Reference) | Prisma Docs

そしてこの schema.prisma ファイル自体も GraphQL 的な書き味で非常に編集しやすいですし、VSCode の拡張機能 もありファイルのセーブ時にフォーマットが自動で動作したりと快適です。

NextAuth.js もすごい

加えて、NextAuth.js という Next.js に簡単に認証基盤が組み込めるものも存在し、これのおかげで認証周りの実装も一瞬で終わりました。

NextAuth.js は Prisma との相性もよく、ライブラリ側でドキュメントも整備されており、安心感があります。以下は Google 認証を使う際のサンプルコードです。

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
import { PrismaAdapter } from '@next-auth/prisma-adapter'
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  adapter: PrismaAdapter(prisma),
})

参考: Prisma Adapter | NextAuth.js

おわりに

今回の開発にかかった期間は 10 日でした。これは first commit から初回リリースまでの日数です。開発に取り組んでいた時間は、ざっくりですが 50~60 時間程度でしょうか。

これくらいの日数で、それなりに堅牢なアプリケーションを作れる時代になったのは本当にありがたいです。しかも開発体験も非常に良い。

これまでは Nuxt.js + Firebase での開発が最強だ! と思っていましたが、残念ながら Firebase で Firestore を使って開発しようとすると TypeScript での型まわりで少し厳しい部分があり、最近はちょっとう〜ん...という感想でいました。

もちろん開発するサービスの特性などによって採用する技術は変えるべきでしょうが、今後は Next.js + Prisma もどんどん採用事例が増えてくると予想しています(というか、実際に増えているかも?)。

まだ知らなかった!という方は、ぜひこの機会に触れてみると良さそうです👍