English 中文(简体)
在根本布局中使用反应堆服务器部件,使我的所有网页都充满活力地放到下JS。
原标题:Using a React Server Component in the root layout causes all my pages to be dynamically rendered in NextJS
  • 时间:2024-02-11 14:47:09
  •  标签:
  • next-auth

我有根基。 我试图通过把我的全书与<代码>和t;SessionProvider session={session}>部分结合起来。 这在当地进行,但是为了把错误变成错误而进行部署。

<编码> 错误: 在霍比计划中的部署中,最多只能增加12个无服务器功能。 设立一个小组(Pro计划),以部署更多的人员。 学习: https://vercel.link/Function-count-limit

我注意到,这是因为,我以身作则,生动地把服务器会议放在这里,这是以下守则。

import { LayoutLinks } from "@/components/LayoutLinks";
import Nav from "@/components/Nav";
import SessionProvider from "@/components/auth/ClientSessionProvider";
import { GlobalDataProvider } from "@/hooks/useGlobalData";
import { Metadata } from "next";
import { getServerSession } from "next-auth";
import { Inter } from "next/font/google";
import { Toaster } from "react-hot-toast";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Payroll system",
  description: "Payroll System",
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await getServerSession();

  return (
    <html lang="en">
      <body className={inter.className}>
        <SessionProvider session={session}>
          <GlobalDataProvider>
            <Toaster />
            <main className="min-h-screen flex flex-col">
              <Nav />
              <div className="flex flex-grow">
                <LayoutLinks /> {children}
              </div>
            </main>
          </GlobalDataProvider>
        </SessionProvider>
      </body>
    </html>
  );
}

现在记住,我没有办法不通过会议反对供应商部分。 未按要求(即......)标明。 当一胎盘提供时,TS并不错误。 但我可以成功地从前线标出。 它像前线人一样,从未知道用户是否签字,以便把用户重新定位到页上。

我试图采取非常平坦的做法,只把需要与供应商举行会议的构成部分 sur为.。 我首先试图把我身边的单一情况部分 out开。

import { getServerSession } from "next-auth";
import Image from "next/image";
import globe from "../public/globe.svg";
import logo from "../public/logo.svg";
import notificationBell from "../public/notification-bell.svg";
import { ProfileInfo } from "./ProfileInfo";
import SessionProvider from "./auth/ClientSessionProvider";

const Nav = async () => {
  const session = await getServerSession();
  return (
    <div className="flex justify-between items-center py-3 bg-white px-12">
      <div className="flex items-center">
        <Image src={logo} className="object-cover mr-2" alt="logo" />
        <p className="font-semibold montserrat">HRM</p>
      </div>
      <div className="flex gap-x-6 items-center">
        <div className="flex gap-x-2">
          <Image src={globe} alt="Globe" />
          <p>EN</p>
        </div>
        <Image src={notificationBell} alt="Globe" />
        <SessionProvider session={session}>
          <ProfileInfo />
        </SessionProvider>
      </div>
    </div>
  );
};

export default Nav;

这也不可行。 我认为,其原因是“滚动”(Nav)构成部分属于布局部分。

现在,我的问题是。

www.un.org/Depts/DGACM/index_spanish.htm 如何在会议上顺便向会议提供方转达? 难道能够用我们过去在使用效果时所用的同样方式来决定本届会议吗? 是否有办法选择不适用RSC ? 我有志不.地提升我的计划。

www.un.org/Depts/DGACM/index_spanish.htm 还有一种办法可以简单地与会议提供商谈我的全貌? 因此,只要不使用<代码>Layout.tsx即可进入会议。

请提供帮助。

PS:我确实试图创建一种HOC,其中哪类是反应服务器组成部分的抽象内容,但不幸的是,这并不奏效。 如果一名科索沃安全局坐在我所有的网页上,就会发现lam死迹象。

“我平均记录的形象”</a

问题回答

Had the same issue 5 min ago. mennaged to fix is and now my build report looks like this:

Route (app)                              Size     First Load JS
┌ λ /                                    22.8 kB         132 kB
├ ○ /_not-found                          875 B          81.5 kB
├ λ /api/auth/[...nextauth]              0 B                0 B
├ ○ /chat                                150 B          80.8 kB
├ ○ /dashboard                           23.6 kB         133 kB
├ ○ /error/register-first                176 B          87.8 kB
├ ○ /mailbox                             150 B          80.8 kB
├ ○ /profile                             150 B          80.8 kB
└ ○ /settings                            150 B          80.8 kB
+ First Load JS shared by all            80.6 kB
  ├ chunks/472-80f1176fdc677c8c.js       27.5 kB
  ├ chunks/fd9d1056-8f5a27328eb1acae.js  51.1 kB
  ├ chunks/main-app-471080d33f00ab88.js  230 B
  └ chunks/webpack-ab36b6b20a4f1ea6.js   1.82 kB

我的定点与你一样。 因此,我现在要做的是:

a. 提供/提供/提供/提供/提供/提供 (obv, the path is not metter)

 use client ;

import { SessionProvider } from  next-auth/react ;

const Provider = ({ children }: { children: React.ReactNode }) => {
  return <SessionProvider>{children}</SessionProvider>;
};

export default Provider;

具备布局。 ts:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning className={`${inter.variable} `}>
      <body>
        <ThemeProvider>
          <SessionProvider>
            <NavBar />
            {children}
          </SessionProvider>
          <Toaster expand={true} />
          <ModalProvider />
        </ThemeProvider>
      </body>
    </html>
  );
}

另外,我还在使用中风

export { default } from  next-auth/middleware ;

export const config = { matcher: [ /communication ,  /dashboard ] };

具有礼仪链接+电子邮件核查。 罚款





相关问题
类型:植被 主管并非下至下级的职能。

接下来的13次,我正在下台工作。 我有错误类型:植被 当我利用ServerSession(req, res, authOptions)对APIC进行核实时,负责人不能发挥职能。

How to fix api/auth/error issue of next-auth in production?

I have set the environment variable in Vercel: NEXTAUTH_URL=https://example.vercel.app (production) NEXTAUTH_URL=http://localhost:3000 (development) Authorized redirect URL in Google provider GCP ...

NextAuth session objects always return null

I m using useSession and getServerSession to get session data. but session object is always returning null. I expect session object like this ({user {name: "demo_user".....etc} ,{expires: &...

热门标签