Vercel公式が出してる『How to Build a Fullstack App with Next.js, Prisma, and PostgreSQL』をやる
YuheiNakasakaNext.js周りのことは何もわからん人間だがそろそろ気になってきたのでVercel社が公式に出しているRails Tutorialみたいなやつをやってみる。
技術としては下記を使うらしい。
- Next.js as the React framework
- Next.js API routes for server-side API routes as the backend
- Prisma as the ORM for migrations and database access
- PostgreSQL as the database
- NextAuth.js for authentication via GitHub (OAuth)
- TypeScript as the programming language
- Vercel for deployment
YuheiNakasakaNode.jsはnodenvで入ってたv14.17.3のやつを使う。
とりあえずプロジェクトを作ってlocalhost:3000にアクセスしたら Prisma is the perfect ORM for Next.js と書かれたページが出てきた。
YuheiNakasakaDBの準備。postgresqlを使うためにHerokuでインスタンスを立てる。下記に従ってcredentialの取得までやる。
というかDBに直でアクセス！？雰囲気を掴むためのガイドなのでセキュリティは考慮されてないんだな...。
YuheiNakasakaprismaの入れる。フロントエンドにおけるActiveRecord並のゲームチェンジャー的なやつ。
VSCodeの拡張もついでに入れた。使い方は全くわからんのでやっていく。
npx prisma initをするとprisma/schema.prismaというファイルが出来た。これがRailsでいうところのmigrationファイルだ。
modelの定義を行なっていくのだが型の定義が直感的で関係の定義も分かりやすい。エディタの補完も効くしformattingもされるので書き心地は良さそう。ただ@mapと@@mapとか@updatedAtとかよくわからん記法もある。
npx prisma db pushをするとschemaが反映された。rake db:migrateだ。
npx prisma studioと打つとphpmyadminみたいなGUIが立ち上がる。recordの追加は簡単だけど関連の使い方がちょっとわからなくて迷った。
YuheiNakasakaprisma clientを入れる。このprismaインスタンスからDBへアクセスする感じかな。
詳しいことはドキュメントを読んでいじってみる。
prisma.tsを追加したところプロパティ 'prisma' は型 'Global & typeof globalThis' に存在しませんというエラーが出てる。
これで合ってるかわからんけどglobalの型定義↓をnext-env.d.tsに書き加えたらエラーは消えた。
declare global {
namespace NodeJS {
interface Global {
prisma: any;
}
}
}
export {};
tsxの編集をしようとしてたがVSCodeのformattingが効かないのでなんでかなと思ってたらtsxはprettierの対象外になってた。typescriptsreact用の設定を足して終わり。
// .vscode/settings.json
{
"[typescript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
YuheiNakasakaprismaのqueryは結構直感的だし何よりスキーマが補完されて気持ちよく書ける。すべてのフィールドに型が付いてる恩恵だ。
YuheiNakasaka次は認証機能を追加する。NextAuth.jsというのを使うらしい。RailsでいうところのDeviseかな。
NextAuth.jsに必要なschemaを見たところ、デフォルトのdeviseみたいにusersテーブルが肥大化していくような感じではないっぽいかな？
詳しくはNextAuth.js公式のmodelsに関するドキュメントを読む必要がありそう。
YuheiNakasakaあとはCRUDの作成。componentの作り方とかSSRとかはそんなに驚くべきところはないので流していくだけ。基本は作りたいrouteのpagesを作り、sessionとprismaを利用したDBリクエストを行うapiを作成。SSRでデータ取得してレンダリング。みたいな感じのを次々作ってく感じ。
ファイル階層名とか[id].tsとか名付けしてidを取得したりする(/user/:idとかrouteを定義するとparams[:id]でアクセスできるみたいなやつ)はNuxtっぽい。
next-auth/clientを使って<Provider/>でsesstionをRootに注入するのとかはFlutterでProviderを使ってた時のやつと同じであれだ〜となった(というかFlutterの方がhooksしかりReactのコミュニティから拝借してるので後発だと思うけど)。
YuheiNakasakaVercelへのデプロイ。記事の指示に従って進めようと思ったが、Vercel側のガイダンスが記事と違っていた。Teamへの加入を求められたりUIが変わってるので少し迷う。ただ概ねやりたいことはわかっているので指示通りに環境変数とか設定してぽちぽち進めていきdeploy。
するとprisma関連でType error: Type expected.というエラーが。。調べるとどうもprismaが2.14.0以上の場合はTypeScriptのバージョン4.1.0以上じゃないといけないのにそれを満たせてなかったのが問題だった。
なのでpackage.jsonのtypescriptのバージョンを上げてインストールし直したらうまくいった。
デプロイが完了すると Congratulations! という言葉と共に桜吹雪が舞ってめでたい気持ちになってよかった。
YuheiNakasaka今回のコード
尚、あとで忘れそうなのでVercelのProject、Herokuのインスタンス、GitHubのOAuth Appsはすぐ綺麗に削除した。もう使わないだろうし。
YuheiNakasaka雰囲気は掴めたので次はNext.jsとPrismaのドキュメントを読もうと思う。