最近流行りのNext.js周りのアプリ構成テンプレート
最近（？）流行りの技術を使ったNext.jsアプリのテンプレートを作成しました．ご自由にお使いください．
いわゆる「T3 Stack」をメインとした構成です．
Next.js
appディレクトリが導入されたりといまだに人気も開発速度も衰えないすごいヤツです．
Tailwind CSS
ユーティリティファーストでスタイルを書くCSSフレームワーク．CSSをそれなりに理解していないと扱いずらかったり，JSXに直接だらだらと書き込むので毛嫌いする人がいたりしますが，慣れれば１ファイルで完結するのでとても楽です．
こちらも，モダンCSSへの対応がそれなりに早いのでstyled-componentsやcss modulesなどと肩を並べていると思っています．
TypeScript
当 た り 前
NextAuth.js(Auth.js)
Next.jsだけでフロントもバックも作るんだったらこれ以外の選択肢はないくらいには最強のライブラリ．これの強みは，たくさんのSNS認証が４行書くだけでできること．これ以上に勝るものはない．
Prisma
バックエンドとデータベースをつなぐためのORM．Next.jsでバックエンドを作るとき，フロントからデータベースまで同じ型を使うことができるため利便性がヤバい（語彙力）．また，クエリをTypeScriptで書くため，CRUD操作に迷うことがないのは楽．
本家の「T3 Stack」ではtRPCを使っているが，正直Prismaの同じ型を使っていれば不要だと思う．なので，今回は導入を見送り．
import { User as PrismaUser } from '@prisma/client'
export type User = Omit<PrismaUser, 'emailVerified' | 'image'>
// client
const data = await axios.get<User>('/api/user')
ただ，素のfetch関数を使ってる場合とかは有用かも
SWR
これは誰が何と言おうと「データフェッチライブラリ兼状態管理ライブラリ」です（異論は認める）．reduxやrecoilは規模が大きくなったら検討すればいいので，最初期であんな面倒なものを組む必要はないと思います．SWRはkey-valueでデータをキャッシュするので，フェッチしたデータをクエリURLごとにキャッシュしたり，stateを文字列と一緒にグローバルで保管したりできます．
next-pwa
iOSが通知機能をサポートしたことで，今後需要が大きく拡大しそうなので入れました．next.config.jsに２行追加するだけなのでとても楽．
ただ，最近更新が止まっているので新しいのを探したほうがいいかもしれない．
いつかNext.js公式がサポートするかも？
現状アクティブなフォークは以下のレポジトリです．
あとがき
その他たくさんのライブラリが入っていますが，一度は見たことあるであろう者たちばかりですので説明は割愛します．
この構成が皆さんのアプリ構成の一助となれば幸いです．
Discussion