Open1
Joshさん[Build a Complete SaaS Platform with Next.js 13, React, Prisma, tRPC, Tailwind | Full Course ]
Tsuboi
長いけど頑張る
この人の長尺動画は神です。口癖は「びゅーーてぃふる」
- tRPCはやっぱり神
- Server Actions 使う必要ない？？このプロジェクトでも使われていなかった
- contextにuserId入れといたら簡単に取り出せるのええね
- エラーハンドリングも簡単！よい！！
- API通信で型推論担ってくれるのいいな
- 頻繁にhooks
useQueryとか使うからわりと上位のコンポーネント（page.tsxとか）でCCにしなあかん？ - refetchInterval: useQueryの第２引数
- 結構ローディングやエラー状態はstatusに頼ってる感じを受けた。error.tsxやloading.tsx使わへんねや。まあtanstacquery関連のパッケージも入れてたから従来の書き方の方がええんかね
- その場限りの（使い回す必要のない）mutation処理は
mutationFnというのが用意されてる？ - ストリーミングとか 楽観的更新とか無限queryとかも担ってくれる
- shadcn/uiはいわずもがな神
- ファイルアップロードの箇所のProgressの実装はわりと力技なんやな 、まあしゃあない
- Progress コンポーネントの拡張いいね。１００％になったらindicatorの色変えるやつ
- Button には
aria-labelは必須級で付与してた - Form コンポーネントに頼りまくってたから RHF とか zod の使い方とかめっちゃ学びになった。https://youtu.be/ucX2zXAZ1I0?si=ViD7QLBaJR8Ud6px&t=18978
- stripe
- クレカ登録画面をstirpe側で提供してくれているの知らなかった
- データベースに保存する値は、subscriptionIdとcustomerIdとpriceIdとcurrentPeriodEndの４つを持たせてた
- パッケージ等々
- prisma: まだまだ第一線よね、、drizzle触ってみたいすねえええ
- DBはPlanetScale使ってた
- kinde: 知らなんだ。authのサービス
- simplebar-react: WIP
- uploadthing：知らなんだ。内部的にAWS S３使われている感じ？使ってみたい。middlewareでsession情報取り出して
onUploadCompleteメソッドのmetadataという引数を通してuserId取り出す感じ。App Router 用のドキュメントもあるやん。2GBまでは無料？ Supabase でAuth,DB,Storageは任せようって考えてたけど考え改めるかあ - react-resize-detector: 知らなんだ。今後取り入れるぺきやね
- react-textarea-autosize: やっぱテキストエリアの高さ可変にするためにこのパッケージ入れたほうがええんや。よかった
- Pinecone: 知らなんだ。パッケージと言うかサービス。
- langchain: 知らなんだ。
- @mantain/hooks:
useInsersectionというhooksを使うために入れてた。スクロールを検知してqueryをプラスで取得することを実現するため。他ないんかな？
- @mantain/hooks:
- その他 Tips
- Wrapper 系のコンポーネント作るのええね。Tailwind の重複避けれる
- Tailwind の
calcはちゃんと使わんとなあ - tiptap 触ったときも感じたけど、パッケージが提供してるcssインポートしやんと動かへんみたいなんあるんやな
- contextもcomponentsの中に入れてた。あとチャットの入力機能の実装でuseContext使うの新鮮な感じやな。
- チャットに関する実装は凄すぎるなあ、見直そう7:40あたり
- forwardRef: 作成したコンポーネントにrefを渡したいときにラップする感じか
-
absoluteUrlいいね - MetadataはconstructMetadataとutilsの中にまとまってた