T3 Stack触り切る&まとめる

[ksyunnnn]

What

触っておく

[ksyunnnn]

とりあえずなんか保存したり認証したりしたい

[ksyunnnn]

T3 Stack

[ksyunnnn]

tRPC

What

スキーマの定義や型生成なしに、型安全なAPIが構築できるツール

なにがうれしいの

• バックエンド・フロントエンド間の型定義の共有が非常に楽
• スキーマ定義のためのファイルや型定義の実装が生成されるわけじゃないのでシンプル（感じ方には個人差があります

左: server.ts / 右: client.ts

https://trpc.io/docs/v10/nextjs

N/A

https://trpc.io/docs/v10/#features https://github.com/prisma/prisma-examples/blob/latest/typescript/rest-nextjs-api-routes-auth/pages/api/publish/%5Bid%5D.ts

zod

• TypeScript-first schema validation with static type inference
• https://github.com/colinhacks/zod
• https://zenn.dev/uttk/articles/bd264fa884e026

APIのルーティングをしてくれとる

（追記: ↑これは語弊あるな。tRPC内のルーティングってのほうが正しそう） (NextjsがルーティングしてくれるAPIも使えるし)

  useEffect(()=>{
    (async()=>{
      const res = await fetch("/api/examples")
      console.log({res: await res.json()})
    })()
  },[])

ここでPrisma使ってデータ取得したり作成したりするんやな https://github.com/ksyunnnn/hands-on-t3-app/blob/57a01890ca8b2b18b69934d125cb69f13834ee59/sample/src/server/router/example.ts#L4-L21

example.hello部分が上記で定義したルートぽい https://github.com/ksyunnnn/hands-on-t3-app/blob/57a01890ca8b2b18b69934d125cb69f13834ee59/sample/src/pages/index.tsx#L6

[ksyunnnn]

Prisma

What

Prisma is an ORM that helps app developers build faster and make fewer errors. Combined with its Data Platform developers gain reliability and visibility when working with databases.

Prisma は、アプリ開発者がより速くビルドし、エラーを減らすのに役立つ ORM です。 その Data Platform 開発者と組み合わせることで、データベースを操作する際の信頼性と可視性が得られます。

ORMってなんなん👉 https://utouto97.hatenablog.com/entry/2021/07/21/224759

N/A

• Prisma直接動かすときのサンプルぽい https://github.com/ksyunnnn/hands-on-t3-app/blob/57a01890ca8b2b18b69934d125cb69f13834ee59/sample/src/pages/api/examples.ts#L5-L8

• Seedの準備のしかた https://qiita.com/nassy20/items/cdc5b1290ba8dbb20622

• 生成したmodelの型の取り出し方 Todo型みたいのはすぐ見つかったけど、createInputの型とかはわからんかった。下記らしい。 https://wp-kyoto.net/prisma-get-sql-query-parameter-as-ts-type/

• 【わからん】modelのtodo.status に incomplete | completeみたいな宣言はできないのでしょうか

• https://www.prisma.io/docs/getting-started/quickstart

• https://github.com/trpc/examples-next-prisma-starter

[ksyunnnn]

Tailwind CSS

What

N/A

VSCodeにこの拡張機能いれとくと便利👇 https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

コピペで使えるSVG https://heroicons.dev/

UIライブラリぽいもの https://flowbite.com/docs/getting-started/introduction/

Headless UI おすすめ https://headlessui.com/

ドキュメント https://tailwindcss.com/docs/installation

[ksyunnnn]

NextAuth.js

What

[ksyunnnn]

TypeScript

What

[ksyunnnn]

Next.js

What

N/A

研修資料 https://speakerdeck.com/recruitengineers/nextjs-2022