next.jsでクライアントサイドでのページ遷移時にStateをページ間で共有したい

Question

サーバーサイドレンダリングでサーバーから取得したデータをStateに保持、それ以降のページで保持したStateを読み、更新したい。

下記のような状態です。(ssr→サーバーサイドレンダリング csr→クライアントサイドレンダリング)

./pages/
├── user-info-top.jsx (会員Topページ)
├── edit-user-info.jsx (会員情報編集ページ)
├── confirm-edited-user-info.jsx (会員情報編集内容確認ページ)

ssr 会員Topページ　(ここでUserデータをサーバーから取得し会員情報Stateに保持)
↓
csr 会員情報編集ページ　(ここで会員Topページで保持していた会員情報Stateを参照し、編集する)
↓
csr 会員情報編集内容確認ページ　(ここで会員情報編集ページで保持していた会員情報編集Stateを参照し、編集する)

_app.jsにしかStateを保持できない？ ベストなStateの置き場所がわからない。

該当のソースコード

_app.jsx

const UserInfoContext = createContext(null);
const UserInfoUnderEditContext = createContext(null);

export default function Application({ Component, pageProps }) {

// ここにGlobalStateを保持するのがベストなのか迷っています。
const [userInfo, setUserInfo] = useState(null);
const [userInfoUnderEdit, setUserInfoUnderEdit] = useState(null);

  return (
     <UserInfoContext.Provider value={{ userInfo, setUserInfo }}>
       <UserInfoUnderEditContext.Provider value={{ userInfoUnderEdit, setUserInfoUnderEdit }}>
         <Component {...pageProps} />
       </UserInfoUnderEditContext>
     </UserInfoContext>
  );
};

export default Application;

user-info-top.jsx

import { useRouter } from 'next/router'

const UserInfoTop = (props) => {

  const { setUserInfo } = useContext(UserInfoContext)

  useEffect(() => {
    setUserInfo(props.userInfo)
  }, [props.userInfo, setUserInfo])

  return (
     <div>
       <div>{props.userInfo.id}</div>
       <div>{props.userInfo.name}</div>
       <div>{props.userInfo.address}</div>
       <input
         type="button" 
         value="会員情報を編集する" 
         onClick={() => router.push('/edit-user-info')} 
       />
     </div>
  );
};

export default UserInfoTop;

export const getServerSideProps = async (context) => {

  // BFFの背後にあるサーバーからuserデータを取得
  const response = await fetch(`https://.../user`);
  const userInfo = await response.json();

  return {
    props: {
      userInfo,
    };
  };
};

edit-user-info.jsx

const EditUserInfo = (props) => {

  const { userInfo } = useContext(UserInfoContext)
  const { setUserInfoUnderEdit } = useContext(UserInfoUnderEditContext)

  const [userInfoLocal, setUserInfoLocal] = useState(userInfo);

  return (
     <div>
       <input 
         type="text" 
         value={userInfoLocal.name} 
         onChange={(e) => 
           setUserInfoLocal({
             ...userInfoLocal, 
             name: e.target.value,
           })
         } 
       />
       <input 
         type="text" 
         value={userInfoLocal.address} 
         onChange={(e) => 
           setUserInfoLocal({
             ...userInfoLocal, 
             address: e.target.value,
           })
         } 
       />

       <input 
         type="button" 
         value="保存する"
         onChange={() => {
           setUserInfoUnderEdit(userInfoLocal);
           router.push('/confirm-edited-user-info');
         } 
       />
     </div>
  );
};

export default EditUserInfo;

confirm-edited-user-info.jsx

const ConfirmEditUserInfo = (props) => {

  const { userInfoUnderEdit } = useContext(UserInfoUnderEditContext)

  return (
     <div>
       <div>以下の内容で保存します。よろしいですか？</div>
       <div>{userInfoUnderEdit.name}</div>
       <div>{userInfoUnderEdit.address}</div>

       <input 
         type="button" 
         value="決定"
         onChange={async () => {
           const response = await fetch(`https://.../user`); // 保存処理
           router.push('/user-info-top');
         } 
       />
     </div>
  );
};

export default ConfirmEditUserInfo;

試したこと

上記のソースコードで問題なく動きはしました。
ただ、ssrで表示した会員Topページ以降のcsrのページで使用するstateの置き場所が_app.jsでいいのかどうか迷っています。
googleで検索してもベストプラクティスが見当たらなかったので質問させていただきました。

Answer 1

stateの置き場所ですが、親コンポーネントに置くのがセオリーだったはずです。なぜなら、Reactでは親から子への値受け渡しは可能ですが、子から親への値受け渡しは不可能（イベントなどは可能）で、親に置いたstateを子にメソッドごと値をバインドしていく仕組みだからです（Reactという名前の由来だった気がします）。なので、下手に子コンポーネントに置くと、あとあとややこしくなるのではないかと思います（明らかに子から孫への伝播しか用いないstateなら問題ないですが）。

参考までにVueは子から親への変数やりとりが可能（Vueはどちらかというとデータそのものを同期処理させる）です。またAngularもあれはビューとデータが独立しているので、コンポーネント間を自由に行き交いさせることができます。