如何在Next.js和TypeScript中使用每页布局的next-auth？
如何在Next.js和TypeScript中使用每页布局的next-auth？
提问于 2022-10-04 03:05:25
我现在拥有的代码如下所示，它遵循Next.js每页getLayout的教程(参见TypeScript部分)和NextAuth with TypeScript (或者应该说，尝试遵循.)：
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { SessionProvider } from "next-auth/react";
import { Session } from "next-auth";
import Header from "components/Header";
import { ReactElement, ReactNode } from "react";
import { NextPage } from "next";
type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode;
};
type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout;
};
function MyApp({ Component, pageProps }: AppPropsWithLayout) {
const getLayout = Component.getLayout || ((page: any) => page);
return getLayout(
<SessionProvider session={pageProps.session}>
<Header />
<Component {...pageProps} />
</SessionProvider>
);
}
export default MyApp;我一直在pageProps.session上得到错误的pageProps.session。我需要将TypeScript更改为什么，才能使其工作？
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-10-11 18:34:52
您可以将泛型类型添加到AppPropsWithLayout中，然后在MyApp的道具类型中使用它，并为session传递正确的类型。注意，这只适用于Next.js 12.3以后，因为只在https://github.com/vercel/next.js/pull/38867中添加了通过AppProps对pageProps类型的支持。
import type { Session } from "next-auth";
// No changes to this type
type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode;
};
// Add generic type
type AppPropsWithLayout<P> = AppProps<P> & {
Component: NextPageWithLayout<P>;
};
// Pass `{ session: Session; }` type as generic
function MyApp({ Component, pageProps }: AppPropsWithLayout<{ session: Session; }>) {
const getLayout = Component.getLayout || ((page: any) => page);
return
<SessionProvider session={pageProps.session}>
{getLayout(
<>
<Header />
<Component {...pageProps} />
</>
)}
</SessionProvider>
);
}顺便说一句，我避免将getLayout包装在会话提供程序周围，因为它可能会导致上下文问题。
Stack Overflow用户
发布于 2022-10-04 03:10:05
几天前我遇到了这个问题，我会尝试找到这个链接，但解决方案是：
function MyApp({ Component, pageProps, }: AppProps<{ session: Session; }>) {
return (
<SessionProvider session={pageProps.session}>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73942758
复制相关文章
相似问题
腾讯云开发者
