您所讨论的内容在Next.js中称为每页布局。它的工作原理如下，正如您在文档中所读到的：
如果需要多个布局，可以在页面中添加属性getLayout，以便返回布局的React组件。这允许您在每页的基础上定义布局。由于我们返回的是函数，因此如果需要，可以使用复杂的嵌套布局。

// pages/index.js

import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'

export default function Page() {
  return (
    /** Your content */
  )
}

Page.getLayout = function getLayout(page) {
  return (
    <Layout>
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}

// pages/_app.js

export default function MyApp({ Component, pageProps }) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout || ((page) => page)

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

以上是针对/页面的，但是逻辑对于任何路径都是相同的，只要修改导入和布局名称，就可以很好地运行了。