Next JS 13布局正在合并[重复]

q8l4jmvw 于 2023-06-22 发布在其他

关注(0)|答案(2)|浏览(123)

此问题已在此处有答案：

Exclude a page from the Next.js root layout in the app folder（1个答案）
7天前关闭
我试图创建一个不同的布局比在所有页面使用的一个管理部分，但相反，我看到他们结合。
这是我的文件结构：

简体中文
应用程序/
page.tsx
layout.tsx
管理员/
page.tsx
layout.tsx

我的意图是admin文件夹上的layout.tsx应该与src/app/layout.tsx上的不同，但相反，我看到他们两个。
根据NextJS文档，src/app/admin/layout.tsx应该自动应用于src/app/admin/page.tsx文件。
下面是/admin/layout.tsx文件的代码：

import AuthContext from '@/context/AuthContext'
import { Session } from 'next-auth'
import { headers } from 'next/headers'

async function getSession(cookie: string): Promise<Session> {
  const response = await fetch(`${process.env.NEXTAUTH_URL}/session`, {
    headers: {
      cookie,
    }
  })

  const session = await response.json()

  return Object.keys(session).length > 0 ? session : null
}

export const metadata = {
  title: 'My App',
  description: 'My App',
}

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const session = await getSession(headers().get('cookie') ?? '')
  return (
    <html lang="en">
      <body>
        <AuthContext session={session}>
            {children}
        </AuthContext>
      </body>
    </html>
  )
}

我应该更改什么才能使它工作？

next.js

来源：https://stackoverflow.com/questions/76478968/nextjs-13-layouts-are-being-combined

2条答案

按热度按时间

alen0pnh1#

您没有正确地使用getLayout模式
在管理页面中定义getLayout函数

// src/app/admin/page.tsx
import AdminLayout from './layout'

export default function AdminPage() {
  // Your admin page component code
}

AdminPage.getLayout = function getLayout(page) {
  return <AdminLayout>{page}</AdminLayout>
}

类似地，在主应用页面中定义一个getLayout函数：

// src/app/page.tsx
import AppLayout from './layout'

export default function AppPage() {
  // Your app page component code
}

AppPage.getLayout = function getLayout(page) {
  return <AppLayout>{page}</AppLayout>
}

然后使用getLayout函数

// pages/_app.js
function MyApp({ Component, pageProps }) {
  const getLayout = Component.getLayout || ((page) => page)

  return getLayout(<Component {...pageProps} />)
}

export default MyApp

赞(0）回复(0）举报 2023-06-22

balp4ylt2#

看看你的代码，你的问题可能是你的嵌套布局的名称/admin/layout.tsx
尝试将export default async function RootLayout({更改为export default async function AdminLayout({
希望这能解决你的问题

赞(0）回复(0）举报 2023-06-22