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
1
340
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
『VoLT』レバテックの デザインシステム ~電光石火の構築プロセスと目指す未来~
leveragestech
2
150
オブザーバビリティ勉強会で模擬障害対応をやってみた
leveragestech
1
380
分散システム?モジュラーモノリス?モノレポ?全部やってみた結果は?
leveragestech
8
3k
Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで
leveragestech
1
8.4k
TypescriptでのContextualな構造化ロギングと社内全体への導入
leveragestech
3
870
デザインシステム基盤構築実践
leveragestech
1
3.5k
荒廃したテックブログの再生_技術広報LT大会
leveragestech
5
5.7k
文系大学生と学び考える開発生産性
leveragestech
1
47
「マイクロサービスアーキテクチャ」と「アーキテクチャ特性」で読み解くレバテックのこれまでとこれから
leveragestech
0
75
Other Decks in Technology
See All in Technology
LLMチャットアプリケーション・アーキテクチャの工夫
pharma_x_tech
2
140
PHPカンファレンス福岡2024 【超特急】SQLアンチパターン総おさらいLT
ytsuzaki
0
190
クラウドネイティブな省エネサービスの内製開発で、BizDevOpsを実現する / Achieving BizDevOps in in-house development of cloud-native energy-saving services
genkiogasawara
2
310
[TimeTree] Aurora から Spanner への 移行の決断と背景
3utama
2
2.7k
納得できるテストをつくるアプローチ
mizunori
0
110
顧客価値に向き合うためのCREのススメ
zakiyama
0
100
デプロイして本番システムで使うことから考えるAI
shibuiwilliam
1
150
Fintech事業部流・爆速開発
layerx
PRO
0
120
Developer Productivity is Waste
cote
PRO
0
100
エンドツーエンドの可視性を実現するクエスト
taijihagino
PRO
1
160
良い開発のためにまず組織を設計せい
ichimichi
7
3.8k
やらない事を決めるプロダクト設計
rukiadia
8
4.4k
Featured
See All Featured
Fireside Chat
paigeccino
24
2.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
28
1.8k
The Invisible Customer
myddelton
115
12k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.2k
Six Lessons from altMBA
skipperchong
22
3.2k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Embracing the Ebb and Flow
colly
80
4.2k
We Have a Design System, Now What?
morganepeng
45
6.9k
Done Done
chrislema
178
15k
Principles of Awesome APIs and How to Build Them.
keavy
122
16k
How to name files
jennybc
66
95k
Building Applications with DynamoDB
mza
89
5.8k
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 との相性はあまり良くないので気をつける • エラーハンドリング に気をつける ◦ 自動でエラーをキャッチしてくれない場合があるので気をつける
ご清聴ありがとうございました!