tRPC + Next.js13 でWEBアプリを作った

Raccoon Tech Connect #2 パフォーマンス改善LT
https://raccoon-holdings.connpass.com/event/301692/

Transcript

1. tRPC + Next.js13 で WEBアプリを作った Raccoon Tech Connect #2 パフォーマンス改善LT うーたん
2. 自己紹介 • うーたん • 新卒サーバーサイドエンジニア ◦ 株式会社ゆめみ • 趣味 ◦ アニメを見ること • X ◦ @uutan1108
3. 目次 - Next.js とは - tRPC とは - 作ったもの - 構成図 - 終わりに
4. Next.js とは
5. Next.js とは WebのためのReactフレームワーク 世界最大級の企業で使用されているNext.jsは、最新の React機能を拡張し、強力なRustベースのJavaScriptツー ルを統合して最速のビルドを実現することで、フルスタッ クのWebアプリケーションを作成できます。 https://nextjs.org/
6. tRPC とは
7. tRPC とは 速く動き、何も壊さない。エンドツーエンドのタイプセー フAPIが簡単に。 フルスタックアプリケーションの生産性を向上させる TypeScript推論のフルパワーを体験してください。フルス タックアプリケーションの生産性を高めましょう。 https://trpc.io/
8. Next.js と tRPC で作れば早く開発できそう 「パフォーマンス改善」 ということにします。
9. 作ったもの OHMORIYUSUKE/animes-library
11. DBに保存されて いるアニメを表示
12. 文字を入力する と表示が変化
13. 構成図
14. 構成図 - Next.js で完結 - Next.js からデータベースを操作
15. API Routes の実装
16. SQL エンドポイント名 getAnimeNameList エンドポイントにアニメの名前を渡す → DBから一致するアニメの名前配列を返す エンドポイントの引数
17. client の実装
18. - バックエンドの 処理を関数を呼 び出すように書 ける - FE と BE で同じ 型を利用 入力があると レコメンドが変化 AutoComplete コンポーネント
19. 終わりに
20. 感想 - 慣れない書き方だったが、慣れたら簡単に書くことが できた - Next.js13 の勉強になった - 検索窓に入力するたびにSQLが実行さて遅いので、入 力するたびにストレス 「パフォーマンス改善」 の余地しかない。
21. 告知
23. ご清聴ありがとうございました🙇