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
7.9k
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
古き良き Laravel のシステムは関数型スタイルでリファクタできるのか
leveragestech
1
1k
リファクタリングいつやるの? 〜依存の整理〜
leveragestech
0
84
ディメンショナルモデリングを軽く語る
leveragestech
1
3.9k
アクターモデルによる効率的な分散システム設計
leveragestech
0
3.8k
Terraform による運用効率化の取り組みと最新のテストアプローチの紹介
leveragestech
0
3.8k
OpenFGAで拓く次世代認可基盤 〜予告編〜
leveragestech
0
3.8k
リソース・管理効率の向上だけでない、分散システムとしてのTiDBの魅力
leveragestech
0
3.8k
作ってわかる!非同期ランタイム
leveragestech
0
3.8k
レバテック開発部 技術広報 これまでとこれから
leveragestech
0
190
Other Decks in Technology
See All in Technology
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
100
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
3
11k
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
2
570
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
170
Geminiとv0による高速プロトタイピング
shinya337
0
240
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
7.8k
怖くない!はじめてのClaude Code
shinya337
0
360
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
320
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
6.2k
AWS認定を取る中で感じたこと
siromi
1
160
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
270
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
410
Thoughts on Productivity
jonyablonski
69
4.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
It's Worth the Effort
3n
185
28k
How to Ace a Technical Interview
jacobian
277
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
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 との相性はあまり良くないので気をつける • エラーハンドリング に気をつける ◦ 自動でエラーをキャッチしてくれない場合があるので気をつける
ご清聴ありがとうございました!