useSession和SessionProvider的Next.js 13和next-auth问题

我试图使一个登录页面。在我的页面。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>
  );
}
`
this is the login page.tsx file:

`"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代码添加到根布局中，但我没有任何运气

第一个问题是你如何构建布局的方式不被识别。

export default function Layout({ children, session }: Props) {
  return (
    <html lang="en">
      <head />
      <body>
        {/* after body element place SessionProvider */}
        <SessionProvider>
          <div className="mx-auto">
            {/* then the rest of jsx or components here */}
          </div>
        </SessionProvider>
      </body>
    </html>
  );
}

useSession是一个钩子，钩子只能在客户端组件中使用。您可以通过在文件开头添加use client指令将组件转换为客户端组件。
或者在服务器组件中，可以使用getServerSession。

import { getServerSession } from 'next-auth'
import { NextAuthOptions } from 'next-auth'

export const authOptions: NextAuthOptions = {
  // your options here
}

const session = await getServerSession(authOptions)

useSession和SessionProvider的Next.js 13和next-auth问题

1条答案

相关问题

热门标签

最新问答