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