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
2
1.4k
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
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
620
FourKeysだけで開発生産性 は測れないと気付くまでの話
leveragestech
1
64
経営層を開発者体験向上にコミットさせる方法論 ~ Developer eXperience Day 2024 ~
leveragestech
2
150
いつPlatform Engineeringを始めるべきか?〜レバテックのケーススタディ〜 Platform Engineering Kaigi 2024
leveragestech
4
1.4k
TiDBは銀の弾丸になるのか? ~ レバテックの課題と新たな挑戦 ~ TiDB User Day 2024
leveragestech
2
520
大規模なORMバージョンアップ作業を 乗り越えた話
leveragestech
1
820
ももくり3年レコメンドエンジン5年
leveragestech
1
940
膨大なデータ活用のためのAmazon QuickSightを使った 技術構成
leveragestech
1
690
『VoLT』レバテックの デザインシステム ~電光石火の構築プロセスと目指す未来~
leveragestech
2
810
Other Decks in Technology
See All in Technology
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
AOAI Dev Day - Opening Session
yoshidashingo
2
430
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.3k
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
180
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Web development in the modern age
philhawksworth
203
10k
Typedesign – Prime Four
hannesfritz
37
2.2k
The Pragmatic Product Professional
lauravandoore
29
6.1k
Making Projects Easy
brettharned
111
5.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
How to Think Like a Performance Engineer
csswizardry
4
590
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
The Language of Interfaces
destraynor
151
23k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Git: the NoSQL Database
bkeepers
PRO
423
64k
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 との相性はあまり良くないので気をつける • エラーハンドリング に気をつける ◦ 自動でエラーをキャッチしてくれない場合があるので気をつける
ご清聴ありがとうございました!