$shibayu36->blog;

エンジニアをしています。プログラミングや読書のことなどについて書いています。

Next.js + Prisma + NextAuth.js + React Queryを試した

2分コーディングの一環でNext.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代をやった。とにかく簡単に認証 + DBアクセスがあるアプリケーションを作ってvercelにデプロイできるサンプルが出来て非常に良かった。趣味プロダクトをちょっと作ってみるのに良さそう。

shibayu36/next-prisma-auth-tutorialに試した例を置いているので参考にどうぞ。

やれたこと

  • Googleのアカウントを使ってサインインし、TODOを追加できるアプリケーション
  • herokuのPostgreSQL dbをデータソースとして動くアプリケーションをvercelにデプロイ

作業メモ

利用技術の簡易調査

next-auth

Prisma

const allUsers = await prisma.user.findMany({
    include: { posts: true },
  })

react-query

React Query - Hooks for fetching, caching and updating asynchronous data in React

  • サーバの状態との同期が強い?
  • 基本的には、キャッシュを作ってくれたり、キャッシュの破棄だったり、一定時間で再フェッチしてくれたりみたいなのをいい感じにやれる
  • Quick Start | React Query | TanStack のコードが大体の概念を理解できる
  • Important Defaults | React Query | TanStack あたりを見ると、TTL的なものがデフォルトで入ってて便利

vercel