Next.jsのapp directoryでProviderを設定する

React

2023.04.04

Next.js13のβ機能であるapp directoryを試しています。

以前のバージョンでは、_app.tsxにProvider系（たとえばReact QueryのQueryClientProviderだったり、RecoilのRecoilRoot）のコンポーネントを全部書けば良かったのですが、app directoryだと_app.tsxが存在しません。

なので以下のように分離して書くと良いらしいです。

このページ内でも書かれていますが、app directory配下では、すべてのコンポーネントがサーバーコンポーネントとしてレンダリングされるので、useEffectみたいなクライアント独自の記法は全部使えません。

クライアントコンポーネントの機能を使いたい場合は、ファイルの先頭に

'use client';

と書く必要があるそうです。

「サーバーコンポーネントって何？クライアントコンポーネントって何？」って感じの人は
「Streaming HTML」とか「Selective Hydration」などの意味が分かれば理解できるようになるはずです。

以下のページがかなり分かりやすいです。

というかこの「Streaming HTML」とか「Selective Hydration」とかマジでやばいですよね。

マウスをクリックした箇所とかを優先的にハイドレートするとかマジでやない。
パフォーマンスのためにここまでやんのかよ感。

Reactは本当に素晴らしいです。

おわり