最近流行りの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の同じ型を使っていれば不要だと思う．Next.jsにServer Actionsが追加されたこともあり，内部APIだけならもっと柔軟なサーバーコードの設計ができるようになると思います．なので，今回は導入を見送り．
// components/LoginForm.tsx
import { User as PrismaUser } from '@prisma/client'
type User = Pick<PrismaUser, 'id' | 'email' | 'name'>
export type LoginSchema = z.infer<typeof LoginSchema>
export default function LoginForm() {
onSubmit = async () => {
const res = await axios.post<LoginSchema, User>('/api/user', {
email,
password
})
// res は User 型
...
}
}
// actions/user.ts
"use server"
export const getUserData = async (email: string, password: string) => {
return await prisma.user.findUnique({
where: {
email,
password
},
select: {
id: true,
email: true,
name: true
}
})
}
// components/LoginForm.tsx
"use client"
export default function LoginForm() {
onSubmit = async () => {
const res = await getUserData(email, password)
// res は User 型
}
}
外部向けのAPIは引き続きAPI Routesを使うといいと思います．そのときにはtRPCは役に立つかもしれません．
SWR
これは誰が何と言おうと「データフェッチライブラリ兼状態管理ライブラリ」です（異論は認める）．reduxやrecoilは規模が大きくなったら検討すればいいので，最初期であんな面倒なものを組む必要はないと思います．SWRはkey-valueでデータをキャッシュするので，フェッチしたデータをクエリURLごとにキャッシュしたり，stateを文字列と一緒にグローバルで保管したりできます．
next-pwa
iOSが通知機能をサポートしたことで，今後需要が大きく拡大しそうなので入れました．next.config.jsに２行追加するだけなのでとても楽．
ただ，最近更新が止まっているので新しいのを探したほうがいいかもしれない．
いつかNext.js公式がサポートするかも？
現状アクティブなフォークは以下のレポジトリです．
上に挙げたライブラリたちが以下のライブラリに集約されていきそうです．
あとがき
その他たくさんのライブラリが入っていますが，一度は見たことあるであろう者たちばかりですので説明は割愛します．
この構成が皆さんのアプリ構成の一助となれば幸いです．
Discussion