Nextjs 13实验应用程序目录下一个auth不工作/给予一个会话?

juzqafwq  于 2023-05-28  发布在  其他
关注(0)|答案(1)|浏览(152)

你好,我正在学习下一个js 13,而不知道下一个js 12。我想用下一个js auth 4做点什么。
file structure
你可以看到这里是我的文件结构。我正在使用next js的实验性app folder组件。我被告知不要为此使用页面,但我遇到了一个问题。这段代码直接来自下一个js框,但在下一个auth中,它说我需要将整个应用程序 Package 在会话提供程序中。我在这里对堆栈使用的布局文件。但是在这个建议中,我没有一个会话给予我的会话提供者!
请参阅:rootlayout.jsx

export default function RootLayout({ children }) {
  
  return (
    <html lang="en">
    <head>
      <meta charSet="UTF-8" />
      <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Testing code</title>
    </head>
    <body className={inter.className}>
      <Providers>
        {children}
      </Providers>
    </body>
    </html>
  )
}

provider.jsx

'use client'
import { SessionProvider } from "next-auth/react"


const Providers = ({children}) => {
    return ( 
        <>
            <SessionProvider>
                {children}
            </SessionProvider>
        </>
     );
}
 
export default Providers;

会话提供者由于根布局而没有获得会话。
jsx会给予它一个会话。
如果我添加了一个pages文件夹,它可能会干扰项目,但我如何做/修复这个?

pdtvr36n

pdtvr36n1#

我在上面的代码中看到了一些问题。
1.文件夹结构问题它应该是这样的

app/api/auth/[...nextauth]/route.js

[... nextauth]-是nextjs用于动态路由的文件夹
example- localhost:3000/API/auth/callback

供参考-https://next-auth.js.org/getting-started/example
2.provider.jsx

'use client';

import { SessionProvider } from 'next-auth/react';

const Provider = ({ children, session }) => {
    return <SessionProvider session={session}>{children}</SessionProvider>;
};

export default Provider;

1.在上面共享的文件夹结构中,它提到了layout.jsx和page.jsx,这是正确的,但在问题中,你提到了rootLayout.jsx,这是不正确的。我不知道你用的是哪一个,但正确的方法是使用

layout.jsx

export const metadata = {
    title: 'Promptopia',
    description: 'Dsicover & Share AI Prompts',
};

const RootLayout = ({ children }) => {
    return (
        <html lang="en">
            <body>
                <Provider> 
                    {children}
                </Provider>
            </body>
        </html>
    );
};

export default RootLayout;

注意:请导入layout.jsx中使用的提供程序
您不必从rootLayout手动发送会话,Nextjs会自动处理

相关问题