Overview

Next.jsの練習

技術

• DB: PostgreSQL
• App: Next.js
  • Form: ReactHookForm, zod
  • ORM: Prisma
  • Toast: Sonner
  • Styling: tailwind

サボったこと

• テスト
• OpenAPI
• レスポンシブなスタイリング
• 丁寧なエラーハンドリング
• ちゃんとしたcomponent分割
• 他にもあるかも

解決したほうが良さそうなこと

無駄に大仰になるにつれ、色んな課題が出てきた

• Prismaのtransactionを持ち回しまくってて多少めんどくさい
  • この解決がかっこいいと思うけど、Prismaがいつか標準で備えてくれるのを願って待ちたい気もする
    https://zenn.dev/uki/articles/0e89ff41880778
• package privateっぽいやつ
  • こういうの
    https://zenn.dev/uhyo/articles/eslint-plugin-import-access

他

実行

init

$ npm install $ docker compose build

起動

$ docker compose up -d $ npm run dev

終了

$ npm run dev とめる $ docker compose stop

prismaのメモ

参考: https://tech-blog.s-yoshiki.com/entry/315

preparation

prismaを渋々globalにinstallする $ npm i -g prisma ts-node

以下を避けるため……

$ prisma
zsh: command not found: prisma

ts-nodeについても同様の理由

init

(このレポジトリでは済)

$ prisma init // generate schema.prisma

prisma/schema.prisma を編集

$ prisma migrate dev --name init

add migration

prisma/schema.prisma を編集

$ prisma migrate dev or $ prisma migrate dev --name add_column_to_user

migrationミスった！ロールバックしたい (ローカルでの手順)

knexのようなロールバックはできない

まずミスったmigrationのディレクトリを消す $ rm- rf prisma/migration/wrong_migration_dir/

その後、
$ prisma migrate reset
$ prisma migrate dev $ prisma db seeding # 必要に応じて

このコマンドにより、DBを一度リセットした上で、他のmigratonファイルを実行した状態に戻せる
後述するが、あわせてseedingも同時に実行される
手動で入れたデータは当然消えるので注意

migrationの内容に誤りはないけどエラー！SQLに一工夫しないといけない

例えば互換性がなくcastが必要なカラムの型の変更時にエラーが発生する

一度 migrationファイルを作成し、その後そのファイルの中身のSQLを変更、そして最終的にresolveする

$ prisma migrate dev --create-only

$ prisma migrate resolve --applied hogehoge

seeding

$ prisma db seed

prisma migrate reset の実行時に走る ドキュメント上は prisma migrate dev の実行時にも走るようだが、動かしてみるとそうでもない

https://www.prisma.io/docs/orm/prisma-migrate/workflows/seeding#integrated-seeding-with-prisma-migrate

format

$ prisma format

generate ERD

$ npm i -g prisma-erd-generator

$ prisma generate or $ prisma migrate dev

global installしない場合はnpx prisma~とすればそのまま使える
preparationの項と似たようなものだが、詳細を追うのが面倒くさいので諦めた

GUI client

$ prisma studio --port 8080

DBのGUIクライアントではなくて、あくまでPrismaのGUIクライアントなことに注意
なのでDB上はUUIDとしたカラムがStringで表示されていたりする……