App Routerの開発で気をつけたいこと3選

# Frontend Night: App Router本番運用企業が語る！Next.js新機能活用法
2024/05/29　LT『App Routerの開発で気をつけたいこと3選』

Transcript

1. App Router の開発で 気をつけたいこと３選 2024/05/29 レバレジーズ株式会社 堀内 達也
2. |　© Leverages inc. 2 自己紹介 • 所属 ◦ レバテック開発部 • 経歴 ◦ 2022年9月〜 レバレジーズ株式会社 • 出身 ◦ 川崎横浜あたり • 趣味 ◦ 邦ロック、漫画、テニス、ゴルフ • マイブーム ◦ 健康風 食生活 ▪ サラダチキン、フルグラ、美酢
3. |　© Leverages inc. 3 1. はじめに 2. Server Actions に気をつける 3. CSS in JS に気をつける 4. エラーハンドリング に気をつける 5. 番外編 6. まとめ Agenda
4. |　© Leverages inc. 4 1. はじめに 2. Server Actions に気をつける 3. CSS in JS に気をつける 4. エラーハンドリング に気をつける 5. 番外編 6. まとめ Agenda
5. |　© Leverages inc. 5 今日お話しすること はじめに フォーム機能のリニューアルPJにおいて、App Router を導入しました その中で、 「App Router を使うならここは気をつけたほうがいい」 と考えたことを紹介させていただきます！
6. |　© Leverages inc. 6 1. はじめに 2. Server Actions に気をつける 3. CSS in JS に気をつける 4. エラーハンドリング に気をつける 5. 番外編 6. まとめ Agenda
7. |　© Leverages inc. 7 Server Actions について Server Actions に気をつける クライアントサイドからサーバーサイドの関数を実行することができる機能 サーバーサイドにAPIを用意して、クライアントサイドからfetchしていた 関数を1つ用意するだけになる！
8. |　© Leverages inc. 8 Server Actions について Server Actions に気をつける
9. |　© Leverages inc. 9 気をつけること Server Actions に気をつける サーバーにリクエストが到達しない場合 エラーにならず、 Server Actions のレスポンスとしては undefined が返される クライアント サーバー 通信エラー WAF undefined
10. |　© Leverages inc. 10 具体例 Server Actions に気をつける サーバーにリクエストが到達しない場合、 response は undefined になる ※ create() の戻り値にundefinedは含まれない
11. |　© Leverages inc. 11 対策 Server Actions に気をつける https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations Server Actions の返り値の型に undefined を追加しておくと、 安全な実装になります
12. |　© Leverages inc. 12 エラーハンドリングが難しい Server Actions に気をつける サーバーサイドに到達しない場合、undefined が返されるだけ → これによって困ったこと • エラーステータスによって動的に挙動を変えるようなことができない • 詳細なエラーログを出力できず、エラー調査が進めづらい Server Actions を利用する際は、これらが許容できる機能かどうか要検討
13. |　© Leverages inc. 13 1. はじめに 2. Server Actions に気をつける 3. CSS in JS に気をつける 4. エラーハンドリング に気をつける 5. 番外編 6. まとめ Agenda
14. |　© Leverages inc. 14 CSS in JS ライブラリ CSS in JS に気をつける ※今回は ランタイム CSS in JS に絞ってお話しさせていただきます MUI, Chakra UI, styled-components, … 弊PJでは、MUI を利用していました
15. |　© Leverages inc. 15 App Router との相性 CSS in JS に気をつける https://nextjs.org/docs/app/building-your-application/styling/css-in-js 利用したい CSS in JS ライブラリが RSC に対応できていない場合、 サーバーコンポーネントでは利用することができない
16. |　© Leverages inc. 16 App Router との相性 CSS in JS に気をつける App Router (及び RSC) の価値観とそもそも相性が悪そう App Router ： できるだけ サーバーサイド で処理をするべき、という立場 CSS in JS ： クライアントサイド でJSを実行することを前提としている
17. |　© Leverages inc. 17 困ったこと CSS in JS に気をつける 実際にMUIを使っていて困ったことの一例 • サーバーコンポーネントで MUI のコンポーネントが使えなかった （MUI が RSC に対応したため、現在は解消されています） • サーバーコンポーネントで theme.ts に記載したテーマを取得できない
18. |　© Leverages inc. 18 対策 CSS in JS に気をつける CSS in JS ライブラリ を使っている場合、こういった制約が発生しうる → 別の選択肢を検討したほうが良さそう！
19. |　© Leverages inc. 19 個人的な推し CSS in JS に気をつける shadcn/ui　　　　Tailwind ベースの UIコンポーネント集 ライブラリとしてインストールするのではなく、コンポーネントを直接コードとして取り込む コンポーネントのコードを管理下に置けるので、フレームワークに振り回されずらい
20. |　© Leverages inc. 20 1. はじめに 2. Server Actions に気をつける 3. CSS in JS に気をつける 4. エラーハンドリング に気をつける 5. 番外編 6. まとめ Agenda
21. |　© Leverages inc. 21 Next.jsのエラーハンドリング エラーハンドリング に気をつける error.tsx というファイルを作成しておくことで、エラー時に自動的にその画面を表示してくれる 内部的には、React Error Boundary を利用している https://nextjs.org/docs/app/building-your-application/routing/error-handling
22. |　© Leverages inc. 22 内部の仕組み エラーハンドリング に気をつける https://nextjs.org/docs/app/building-your-application/routing/error-handling
23. |　© Leverages inc. 23 問題点 エラーハンドリング に気をつける https://ja.legacy.reactjs.org/docs/error-boundaries.html React Error Boundary はエラーをキャッチしてくれない場合がある 特に困ったのは、イベントハンドラ内で発生したエラーをキャッチしてくれないこと
24. |　© Leverages inc. 24 例えば エラーハンドリング に気をつける 以下の submit処理 の中でエラーが発生した場合、エラー画面に飛ばない
25. |　© Leverages inc. 25 対策 エラーハンドリング に気をつける Stateでエラー状態を管理して、コンポーネントを出し分ける
26. |　© Leverages inc. 26 弊PJでの実装例 エラーハンドリング に気をつける Context でエラー状態を保持するようにし、 メソッドを呼び出すだけでエラー画面を出せるように実装
27. |　© Leverages inc. 27 1. はじめに 2. Server Actions に気をつける 3. CSS in JS に気をつける 4. エラーハンドリング に気をつける 5. 番外編 6. まとめ Agenda
28. |　© Leverages inc. 28 server-only と client-only を活用する 番外編 https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns サーバーのみで動くコード、クライアントのみで動くコード、を明示的に指定できる
29. |　© Leverages inc. 29 指定通りじゃないコードを書いていた場合、ビルド時にエラーを吐いてくれる server-only と client-only を活用する 番外編 動く場所がサーバーかクライアントか明確なコードには指定しておくと良い どちらでも動いてしまうが、片方のみで動かしたいようなコード、には特に必須
30. |　© Leverages inc. 30 App Router が輝きやすそうなサービス 番外編 サーバーとのやりとりが多く、データ取得に時間がかかるようなサービス 理由は、 • サーバーコンポーネントの登場により、データ取得が容易になったため • キャッシュが強化されているため （ 逆に、クライアントサイドでやりたいことが多いサービスや、 データ取得があまり発生しないサービスは輝きづらいかも...？ ）
31. |　© Leverages inc. 31 App Router が輝きやすそうなサービス 番外編 例えば、 輝きやすいサービス • 記事や情報を一覧表示するようなサービス • ダッシュボード系のサービス 輝きづらいサービス • ユーザの情報をPOSTすることがメインのサービス（フォームなど）
32. |　© Leverages inc. 32 1. はじめに 2. Server Actions に気をつける 3. CSS in JS に気をつける 4. エラーハンドリング に気をつける 5. 番外編 6. まとめ Agenda
33. |　© Leverages inc. 33 まとめ まとめ • Server Actions に気をつける ◦ サーバーにリクエストが到達していないときの挙動に気をつける • CSS in JS に気をつける ◦ App Router との相性はあまり良くないので気をつける • エラーハンドリング に気をつける ◦ 自動でエラーをキャッチしてくれない場合があるので気をつける
34. ご清聴ありがとうございました！