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
3.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
ドキュメントとの付き合い方を考える
leveragestech
0
60
開発者体験を向上させる ボトムアップな組織改善
leveragestech
1
42
市場価値の高いエンジニアを 目指そう!!
leveragestech
1
31
より快適なエラーログ監視を目指して
leveragestech
4
1.6k
絶賛設計中!参画者のエンゲージメントを最大化する体験重視のオンボーディング
leveragestech
1
89
SREが強化するべき組織のケイパビリティ
leveragestech
0
64
DevOps実現のための私たちのSREのあり方
leveragestech
1
51
アウトプット=アウトカムではない世界で開発生産性を考える
leveragestech
4
680
ビジネス貢献を目指して 〜開発者体験から始める開発生産性向上~
leveragestech
2
370
Other Decks in Technology
See All in Technology
Oracle Database 23ai 新機能#4 Real Application Clusters
oracle4engineer
PRO
0
110
Pythonを活用したLLMによる構造的データ生成の手法と実践
brainpadpr
2
210
C# 13 / .NET 9 の新機能 (RC 1 時点)
nenonaninu
1
1.1k
RAGの性能を評価しよう
kurahara
1
270
My Generation 年配者がこの先生きのこるには/My Generation How elder engineers can survive
kwappa
3
5.1k
ITエンジニアとして知っておいてほしい、電子メールという大きな穴
logica0419
1
290
【shownet.conf_】AI技術とUX監視の応用でShowNetの基盤を支えるモニタリングシステム
shownet
PRO
0
260
【ログ分析勉強会#5】Elasticsearch/Kibana のパイプ型クエリー言語ES|QLの紹介 ~ Pandasと一緒にログ分析してみた
nobuhikosekiya
0
160
AI時代のアジャイル開発(XP祭り2024版) / Agile Development in the AI Era in XPJUG
takaking22
13
3.4k
Amazon BedrockとPR-Agentでコードレビュー自動化に挑戦・実際に運用してみた
diggymo
0
550
REST API Design Pitfalls
victorrentea
1
500
スモールスタート、不都合な真実 〜 耳当たりの良い言葉に現場が振り回されないために/20240930-ssmjp-small-start
opelab
12
1.7k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Docker and Python
trallard
40
3k
Bash Introduction
62gerente
608
210k
Atom: Resistance is Futile
akmur
261
25k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
279
13k
From Idea to $5000 a Month in 5 Months
shpigford
380
46k
Optimizing for Happiness
mojombo
375
69k
BBQ
matthewcrist
84
9.2k
Large-scale JavaScript Application Architecture
addyosmani
509
110k
A Philosophy of Restraint
colly
202
16k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Infographics Made Easy
chrislema
239
18k
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 との相性はあまり良くないので気をつける • エラーハンドリング に気をつける ◦ 自動でエラーをキャッチしてくれない場合があるので気をつける
ご清聴ありがとうございました!