如何使用next.js在客户端路由的页面之间共享、读取和写入全局状态？ 我希望在服务器端呈现一个顶部页面，在客户端呈现全局状态，并与其他后续页面共享全局状态。

我创建了这样的目录

/页/

├── user-info-top.jsx（我的页面）

├── 编辑-user-info.jsx

├── confirm-edited-user-info.jsx

ssr用户信息顶部　（从服务器获取用户数据并在客户端以全局状态存储）

↓

csr编辑用户信息　（参考并编辑存储在用户信息页面的全局状态下的用户数据）

↓

csr确认已编辑的用户信息　（请参阅“编辑用户信息”中存储的全局状态下的“编辑用户数据”部分）

_app.jsx

const UserInfoContext=createContext（null）；
const UserInfoUnderEditContext=createContext（null）；
导出默认函数应用程序（{Component，pageProps}）{
//我想知道在这里有一个全球性的国家是最好的和常见的方式。
const[userInfo，setUserInfo]=useState（null）；
const[userInfoUnderEdit，setUserInfoUnderEdit]=useState（null）；
返回(
);
};
导出默认应用程序；

user-info-top.jsx

从“下一个/路由器”导入{useRouter}
const UserInfoTop=（道具）=>{
const{setUserInfo}=useContext（UserInfoContext）
useffect（（）=>{
setUserInfo（props.userInfo）
}，[props.userInfo，setUserInfo]）
返回(
{props.userInfo.id}
{props.userInfo.name}
{props.userInfo.address}
router.push（'/edit user info'）}
/>
);
};
导出默认UserInfoTop；
导出常量getServerSideProps=async（上下文）=>{
//从BFF后面的服务器获取用户数据
const response=等待获取(`https://.../user`);
const userInfo=wait response.json（）；
返回{
道具：{
用户信息，
};
};
};

编辑-user-info.jsx

const EditUserInfo=（道具）=>{
const{userInfo}=useContext（UserInfoContext）
const{setUserInfoUnderEdit}=useContext（UserInfoUnderEditContext）
const[userInfoLocal，setUserInfoLocal]=useState（userInfo）；
返回(
setUserInfoLocal({
…userInfoLocal，
名称：e.target.value，
})
} 
/>
setUserInfoLocal({
…userInfoLocal，
地址：e.target.value，
})
} 
/>
{
setUserInfoUnderEdit（userInfoLocal）；
router.push（'/confirm edited user info'）；
} 
/>
);
};
导出默认EditUserInfo；

confirm-edited-user-info.jsx

const ConfirmEditUserInfo=（道具）=>{
常量{userInfoUnderEdit}=useContext（UserInfoUnderEditContext）
返回(
请检查一下内容
{userInfoUnderEdit.name}
{userInfoUnderEdit.address}
{
const response=等待获取(`https://.../user`); 
router.push（'/user info top'）；
} 
/>
);
};
导出默认ConfirmEditUserInfo；

这样，它就如我所期望的那样工作了。 但我想知道这是最好的，最普通的方法。 我用谷歌搜索了一下，但找不到好答案