在我的next.js应用程序中，我使用cookie存储了来自OAuth2提供商的哈希令牌。用户完成该过程后，他们将登录并存储cookie。
这个登录按钮位于我制作的Navbarreact组件中，并通过_app.js在每个页面上呈现。它包括一个条件呈现系统，因此如果cookie有效，它将不会呈现登录系统。在我意识到我无法做我想做的事情之前，我正计划使用getServerSideProps()来做这件事。然而，我意识到这是行不通的。我该怎么做？
这是我的Navbar.jsx文件：
import Link from 'next/link';
import { useRouter } from 'next/router';
import axios from 'axios';
import { doOAuthWork } from '../lib/handleDiscordOAuth2';
function returnLoginInfor(parsed) {
}
const Nav = ({ parsed }) => (
<div className="navbar z-10 top-0 fixed shadow-lg bg-neutral text-neutral-content inset-x-0 bg-opacity-80 backdrop-filter backdrop-blur-lg">
<div className="px-2 mx-2 navbar-start">
<span className="text-lg font-bold">
Status+
</span>
</div>
<div className="hidden px-2 mx-2 navbar-center lg:flex">
<div className="flex items-stretch">
<div className="btn btn-ghost btn-sm rounded-btn">
<Link href="/">
Home
</Link>
</div>
<div className="btn btn-ghost btn-sm rounded-btn">
<Link href="/">
Status
</Link>
</div>
<div className="btn btn-ghost btn-sm rounded-btn">
<Link href="/">
Dashboard
</Link>
</div>
</div>
</div>
<div className="navbar-end">
{doOAuthWork()}
</div>
</div>
);
export default Nav;
(完整免责声明，尚未完成功能(
这是我的_app.js:
import 'tailwindcss/tailwind.css';
import Head from 'next/head';
import { CookiesProvider } from 'react-cookie';
import Nav from '../components/Nav';
import discordOAuth2 from '../lib/handleDiscordOAuth2';
function MyApp({ Component, pageProps }) {
return (
<CookiesProvider>
{' '}
<>
<Head>
<title>Next and MDX Blog</title>
</Head>
<div className="container-fluid mx-auto w-full scrollhost" id="container4">
<Nav> </Nav>
<main className="scrollhost" id="container2">
<Component {...pageProps} />
</main>
</div>
</>
</CookiesProvider>
);
}
export default MyApp;
我该怎么做？做这件事的正确方法是什么？
提前感谢。：｝
(我在这里有点迟钝，所以请耐心等待！(
编辑：这里仍然有这个问题，我重读了文档，不确定做这件事的正确方法是什么。
您可以在_appjs中调用一个api，并将其传递给您的组件
每次都会调用_app.js中调用的api。
下面是示例代码。
import 'tailwindcss/tailwind.css';
import Head from 'next/head';
import { CookiesProvider } from 'react-cookie';
import Nav from '../components/Nav';
import discordOAuth2 from '../lib/handleDiscordOAuth2';
function MyApp({ Component, pageProps, apiData }) {
return (
<CookiesProvider>
{' '}
<>
<Head>
<title>Next and MDX Blog</title>
</Head>
<div className="container-fluid mx-auto w-full scrollhost" id="container4">
<Nav apiData={apiData}> </Nav>
<main className="scrollhost" id="container2">
<Component {...pageProps} />
</main>
</div>
</>
</CookiesProvider>
);
}
MyApp.getInitialProps = async () => {
const apiData = await getApiData();
return { apiData };
};
export default MyApp