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),
})