Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
tRPC + Next.js13 でWEBアプリを作った
Search
uutan1108
December 11, 2023
Programming
0
330
tRPC + Next.js13 でWEBアプリを作った
Raccoon Tech Connect #2 パフォーマンス改善LT
https://raccoon-holdings.connpass.com/event/301692/
uutan1108
December 11, 2023
Tweet
Share
More Decks by uutan1108
See All by uutan1108
OpenAPI を守るのは難しい
ohmori_yusuke
2
930
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
150
Laravel を学ぶ前に書いていた require と Laravel 使い始めてから躓いた use 宣言と namespace
ohmori_yusuke
1
290
未来を拓く若手エンジニアの興味関心と目指すキャリア
ohmori_yusuke
1
260
PHPカンファレンス関西2024でLTとスタッフした
ohmori_yusuke
2
460
技書博に参加したら執筆できた
ohmori_yusuke
1
420
PHPを勉強してからプログラミングが好きになった話
ohmori_yusuke
1
620
「石蒜模拟器」にコントリビュートしてみた
ohmori_yusuke
1
440
新卒研修で取り組んだスクラム開発で苦戦したところと学んだこと
ohmori_yusuke
4
1.9k
Other Decks in Programming
See All in Programming
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
510
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.3k
Git Rebase
bkuhlmann
11
1.6k
Documentation for users with AsciiDoc and Antora
ahus1
0
370
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
570
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.2k
Milestoner
bkuhlmann
1
420
Going beyond Apache Parquet's default settings
xhochy
0
140
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
130
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
920
Next.js App Router
quramy
12
2k
Featured
See All Featured
Building Your Own Lightsaber
phodgson
100
5.7k
Web development in the modern age
philhawksworth
203
10k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
RailsConf 2023
tenderlove
9
570
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
We Have a Design System, Now What?
morganepeng
43
6.8k
Navigating Team Friction
lara
179
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
Being A Developer After 40
akosma
67
580k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Transcript
tRPC + Next.js13 で WEBアプリを作った Raccoon Tech Connect #2 パフォーマンス改善LT
うーたん
自己紹介 • うーたん • 新卒サーバーサイドエンジニア ◦ 株式会社ゆめみ • 趣味 ◦
アニメを見ること • X ◦ @uutan1108
目次 - Next.js とは - tRPC とは - 作ったもの -
構成図 - 終わりに
Next.js とは
Next.js とは WebのためのReactフレームワーク 世界最大級の企業で使用されているNext.jsは、最新の React機能を拡張し、強力なRustベースのJavaScriptツー ルを統合して最速のビルドを実現することで、フルスタッ クのWebアプリケーションを作成できます。 https://nextjs.org/
tRPC とは
tRPC とは 速く動き、何も壊さない。エンドツーエンドのタイプセー フAPIが簡単に。 フルスタックアプリケーションの生産性を向上させる TypeScript推論のフルパワーを体験してください。フルス タックアプリケーションの生産性を高めましょう。 https://trpc.io/
Next.js と tRPC で作れば早く開発できそう 「パフォーマンス改善」 ということにします。
作ったもの OHMORIYUSUKE/animes-library
None
DBに保存されて いるアニメを表示
文字を入力する と表示が変化
構成図
構成図 - Next.js で完結 - Next.js からデータベースを操作
API Routes の実装
SQL エンドポイント名 getAnimeNameList エンドポイントにアニメの名前を渡す → DBから一致するアニメの名前配列を返す エンドポイントの引数
client の実装
- バックエンドの 処理を関数を呼 び出すように書 ける - FE と BE で同じ
型を利用 入力があると レコメンドが変化 AutoComplete コンポーネント
終わりに
感想 - 慣れない書き方だったが、慣れたら簡単に書くことが できた - Next.js13 の勉強になった - 検索窓に入力するたびにSQLが実行さて遅いので、入 力するたびにストレス
「パフォーマンス改善」 の余地しかない。
告知
None
ご清聴ありがとうございました🙇