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
App Routerの開発で気をつけたいこと3選
Search
Tech Leverages
May 24, 2024
Technology
3
5k
App Routerの開発で気をつけたいこと3選
# Frontend Night: App Router本番運用企業が語る!Next.js新機能活用法
2024/05/29 LT『App Routerの開発で気をつけたいこと3選』
Tech Leverages
May 24, 2024
Tweet
Share
More Decks by Tech Leverages
See All by Tech Leverages
We Are PdE!! 〜高価値なプロダクトを作れるようになるための勉強会〜
leveragestech
1
440
Prisma Typed SQLのススメ
leveragestech
1
46
今日から始める技術的負債の解消
leveragestech
3
510
ドキュメントとの付き合い方を考える
leveragestech
2
180
開発者体験を向上させる ボトムアップな組織改善
leveragestech
1
210
市場価値の高いエンジニアを 目指そう!!
leveragestech
2
55
より快適なエラーログ監視を目指して
leveragestech
5
1.6k
絶賛設計中!参画者のエンゲージメントを最大化する体験重視のオンボーディング
leveragestech
1
110
SREが強化するべき組織のケイパビリティ
leveragestech
0
92
Other Decks in Technology
See All in Technology
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
740
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
110
APIテスト自動化の勘所
yokawasa
7
4.2k
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
Amazon FSx for NetApp ONTAPを利用するにあたっての要件整理と設計のポイント
non97
1
160
Forget efficiency – Become more productive without the stress
ufried
0
150
小規模に始めるデータメッシュとデータガバナンスの実践
kimujun
3
590
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
MAMを軸とした動画ハンドリングにおけるAI活用前提の整備と次世代ビジョン / abema-ai-mam
cyberagentdevelopers
PRO
1
120
「視座」の上げ方が成人発達理論にわかりやすくまとまってた / think_ perspective_hidden_dimensions
shuzon
2
4.8k
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
4k
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
480
Featured
See All Featured
Done Done
chrislema
181
16k
What's new in Ruby 2.0
geeforr
342
31k
Designing for Performance
lara
604
68k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Happy Clients
brianwarren
97
6.7k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Adopting Sorbet at Scale
ufuk
73
9k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Statistics for Hackers
jakevdp
796
220k
Transcript
App Router の開発で 気をつけたいこと3選 2024/05/29 レバレジーズ株式会社 堀内 達也
| © Leverages inc. 2 自己紹介 • 所属 ◦ レバテック開発部 •
経歴 ◦ 2022年9月〜 レバレジーズ株式会社 • 出身 ◦ 川崎横浜あたり • 趣味 ◦ 邦ロック、漫画、テニス、ゴルフ • マイブーム ◦ 健康風 食生活 ▪ サラダチキン、フルグラ、美酢
| © Leverages inc. 3 1. はじめに 2. Server Actions に気をつける
3. CSS in JS に気をつける 4. エラーハンドリング に気をつける 5. 番外編 6. まとめ Agenda
| © Leverages inc. 4 1. はじめに 2. Server Actions に気をつける
3. CSS in JS に気をつける 4. エラーハンドリング に気をつける 5. 番外編 6. まとめ Agenda
| © Leverages inc. 5 今日お話しすること はじめに フォーム機能のリニューアルPJにおいて、App Router を導入しました その中で、
「App Router を使うならここは気をつけたほうがいい」 と考えたことを紹介させていただきます!
| © Leverages inc. 6 1. はじめに 2. Server Actions に気をつける
3. CSS in JS に気をつける 4. エラーハンドリング に気をつける 5. 番外編 6. まとめ Agenda
| © Leverages inc. 7 Server Actions について Server Actions に気をつける
クライアントサイドからサーバーサイドの関数を実行することができる機能 サーバーサイドにAPIを用意して、クライアントサイドからfetchしていた 関数を1つ用意するだけになる!
| © Leverages inc. 8 Server Actions について Server Actions に気をつける
| © Leverages inc. 9 気をつけること Server Actions に気をつける サーバーにリクエストが到達しない場合 エラーにならず、
Server Actions のレスポンスとしては undefined が返される クライアント サーバー 通信エラー WAF undefined
| © Leverages inc. 10 具体例 Server Actions に気をつける サーバーにリクエストが到達しない場合、 response
は undefined になる ※ create() の戻り値にundefinedは含まれない
| © Leverages inc. 11 対策 Server Actions に気をつける https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations Server
Actions の返り値の型に undefined を追加しておくと、 安全な実装になります
| © Leverages inc. 12 エラーハンドリングが難しい Server Actions に気をつける サーバーサイドに到達しない場合、undefined が返されるだけ
→ これによって困ったこと • エラーステータスによって動的に挙動を変えるようなことができない • 詳細なエラーログを出力できず、エラー調査が進めづらい Server Actions を利用する際は、これらが許容できる機能かどうか要検討
| © Leverages inc. 13 1. はじめに 2. Server Actions に気をつける
3. CSS in JS に気をつける 4. エラーハンドリング に気をつける 5. 番外編 6. まとめ Agenda
| © Leverages inc. 14 CSS in JS ライブラリ CSS in
JS に気をつける ※今回は ランタイム CSS in JS に絞ってお話しさせていただきます MUI, Chakra UI, styled-components, … 弊PJでは、MUI を利用していました
| © Leverages inc. 15 App Router との相性 CSS in JS
に気をつける https://nextjs.org/docs/app/building-your-application/styling/css-in-js 利用したい CSS in JS ライブラリが RSC に対応できていない場合、 サーバーコンポーネントでは利用することができない
| © Leverages inc. 16 App Router との相性 CSS in JS
に気をつける App Router (及び RSC) の価値観とそもそも相性が悪そう App Router : できるだけ サーバーサイド で処理をするべき、という立場 CSS in JS : クライアントサイド でJSを実行することを前提としている
| © Leverages inc. 17 困ったこと CSS in JS に気をつける 実際にMUIを使っていて困ったことの一例
• サーバーコンポーネントで MUI のコンポーネントが使えなかった (MUI が RSC に対応したため、現在は解消されています) • サーバーコンポーネントで theme.ts に記載したテーマを取得できない
| © Leverages inc. 18 対策 CSS in JS に気をつける CSS
in JS ライブラリ を使っている場合、こういった制約が発生しうる → 別の選択肢を検討したほうが良さそう!
| © Leverages inc. 19 個人的な推し CSS in JS に気をつける shadcn/ui Tailwind
ベースの UIコンポーネント集 ライブラリとしてインストールするのではなく、コンポーネントを直接コードとして取り込む コンポーネントのコードを管理下に置けるので、フレームワークに振り回されずらい
| © Leverages inc. 20 1. はじめに 2. Server Actions に気をつける
3. CSS in JS に気をつける 4. エラーハンドリング に気をつける 5. 番外編 6. まとめ Agenda
| © Leverages inc. 21 Next.jsのエラーハンドリング エラーハンドリング に気をつける error.tsx というファイルを作成しておくことで、エラー時に自動的にその画面を表示してくれる 内部的には、React
Error Boundary を利用している https://nextjs.org/docs/app/building-your-application/routing/error-handling
| © Leverages inc. 22 内部の仕組み エラーハンドリング に気をつける https://nextjs.org/docs/app/building-your-application/routing/error-handling
| © Leverages inc. 23 問題点 エラーハンドリング に気をつける https://ja.legacy.reactjs.org/docs/error-boundaries.html React Error
Boundary はエラーをキャッチしてくれない場合がある 特に困ったのは、イベントハンドラ内で発生したエラーをキャッチしてくれないこと
| © Leverages inc. 24 例えば エラーハンドリング に気をつける 以下の submit処理 の中でエラーが発生した場合、エラー画面に飛ばない
| © Leverages inc. 25 対策 エラーハンドリング に気をつける Stateでエラー状態を管理して、コンポーネントを出し分ける
| © Leverages inc. 26 弊PJでの実装例 エラーハンドリング に気をつける Context でエラー状態を保持するようにし、 メソッドを呼び出すだけでエラー画面を出せるように実装
| © Leverages inc. 27 1. はじめに 2. Server Actions に気をつける
3. CSS in JS に気をつける 4. エラーハンドリング に気をつける 5. 番外編 6. まとめ Agenda
| © Leverages inc. 28 server-only と client-only を活用する 番外編 https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns
サーバーのみで動くコード、クライアントのみで動くコード、を明示的に指定できる
| © Leverages inc. 29 指定通りじゃないコードを書いていた場合、ビルド時にエラーを吐いてくれる server-only と client-only を活用する 番外編
動く場所がサーバーかクライアントか明確なコードには指定しておくと良い どちらでも動いてしまうが、片方のみで動かしたいようなコード、には特に必須
| © Leverages inc. 30 App Router が輝きやすそうなサービス 番外編 サーバーとのやりとりが多く、データ取得に時間がかかるようなサービス 理由は、
• サーバーコンポーネントの登場により、データ取得が容易になったため • キャッシュが強化されているため ( 逆に、クライアントサイドでやりたいことが多いサービスや、 データ取得があまり発生しないサービスは輝きづらいかも...? )
| © Leverages inc. 31 App Router が輝きやすそうなサービス 番外編 例えば、 輝きやすいサービス
• 記事や情報を一覧表示するようなサービス • ダッシュボード系のサービス 輝きづらいサービス • ユーザの情報をPOSTすることがメインのサービス(フォームなど)
| © Leverages inc. 32 1. はじめに 2. Server Actions に気をつける
3. CSS in JS に気をつける 4. エラーハンドリング に気をつける 5. 番外編 6. まとめ Agenda
| © Leverages inc. 33 まとめ まとめ • Server Actions に気をつける
◦ サーバーにリクエストが到達していないときの挙動に気をつける • CSS in JS に気をつける ◦ App Router との相性はあまり良くないので気をつける • エラーハンドリング に気をつける ◦ 自動でエラーをキャッチしてくれない場合があるので気をつける
ご清聴ありがとうございました!