ato*_*-ag 14 authentication server-side-rendering next.js next-auth
我正在尝试制作一个登录页面。在我的 page.tsx 文件上，我收到两个错误之一，具体取决于我是否包含“使用客户端”；在我的代码的顶部。如果我没有“使用客户端”；我收到此错误：
Error: React Context is unavailable in Server Components
如果我确实使用“使用客户端”；我收到此错误：
Error: [next-auth]: useSession must be wrapped in a <SessionProvider />
这是我的layout.tsx 文件：
import Image from 'next/image'
import { SessionProvider } from "next-auth/react";
import { ReactNode } from "react";
import React from 'react';
import "./globals.css";
import Link from "next/link";
type Props = {
children: ReactNode;
session: any;
};
export default function Layout({ children, session }: Props) {
return (
<html lang="en">
<head />
<body>
<div className="mx-auto">
<div className="flex flex-row flex-wrap">
<aside className="w-full sm:w-1/3 md:w-1/5 xl:w-1/6 border-r-2 border-[#F845C6]">
<div className="sticky top-0 p-4 w-full">
<ul className="flex flex-col overflow-hidden">
<li className="m-5 text-center">
<Link href="login">LOGO</Link>
</li>
<li className="m-5 text-center">
<Link href="/">Dashboard</Link>
</li>
<li className="m-5 text-center">
<Link href="tasks">Tasks</Link>
</li>
<li className="m-5 text-center">
<Link href="reporting">Reporting</Link>
</li>
</ul>
</div>
</aside>
<div className="w-full sm:w-2/3 md:w-4/5 xl:w-5/6">{children}</div>
</div>
</div>
</body>
</html>
);
}
export function getLayout(page: any) {
const { session } = page.props;
return (
<SessionProvider session={session}>
<Layout session={session}>{page}</Layout>
</SessionProvider>
);
}
这是登录 page.tsx 文件：
"use client";
import React from 'react'
import { useSession, signIn, signOut } from 'next-auth/react'
import { getLayout } from '../components/Layout'
export default function Login() {
const { data: session } = useSession();
console.log(session);
if (session) {
return (
<div style={{ fontFamily: 'sans-serif', margin: '10px 20px' }}>
<p>Welcome, {session.user.name}</p>
<img src={session.user.image} alt="" style={{ borderRadius: '15px', width: '80px', margin: '10px' }} />
<button onClick={() => signOut()}>Sign out</button>
</div>
);
} else {
return (
<div>
<p>Please sign in</p>
<button onClick={() => signIn("google", { callbackUrl: '/account' })}>Sign in with Google</button>
</div>
);
}
}
Login.getLayout = function getLayout(page: any) {
return getLayout(page);
};
我正在尝试从较旧的项目转移到使用应用程序目录的项目。我尝试将原始 _app.js 文件中的 SessionProvider 代码添加到根布局中，但我没有任何运气
Jos*_*oyd 26
对于遇到此页面的其他人，如果您从未解决问题，则只需将 SessionProvider 包装在服务器渲染布局中使用的客户端组件中，而不是直接应用于布局中。
制作一个提供者文件：
"use client";
import { SessionProvider } from "next-auth/react";
type Props = {
children?: React.ReactNode;
};
export const NextAuthProvider = ({ children }: Props) => {
return <SessionProvider>{children}</SessionProvider>;
};
然后在根布局中使用它，如下所示：
type Props = {
children: ReactNode;
};
export default function RootLayout({ children }: Props) {
...
return (
...
<NextAuthProvider>
...
{children}
...
</NextAuthProvider>
...
);
}
这将使您能够访问站点上所有客户端组件中的会话上下文，这通常是您想要的。
您可以通过两行从客户端组件重新导出 SessionProvider：
"use client";
export { SessionProvider } from "next-auth/react";
这也适用于您想要转换为客户端组件的其他第三方组件。
| 归档时间： |
|
| 查看次数： |
15197 次 |
| 最近记录： |