Next.js中如何在Page.getLayout布局中实现页面专属插槽？

方案一：在getLayout中使用内部组件包裹（推荐） #

直接在getLayout函数内定义React组件，在组件内部使用useRouter等Hooks，完美规避函数级无法使用Hooks的限制，且无需拆分组件：

function TestPage(props) {
  return (
    <Box>
      QWe
    </Box>
  )
}

TestPage.getLayout = (page) => {
  // 定义内部组件，在其中使用Hooks
  const LayoutWithHooks = () => {
    const router = useRouter()

    return (
      <AuthLayout
        header={
          <Header 
            flowTitle="Contacts" 
            pageTitle="All Content"
            pageLeft={<Button onClick={() => router.back()}>All Policies</Button>}
            pageRight={<Button variant="outlined">Request Improvement</Button>}
          />
        }
      >
        {page}
      </AuthLayout>
    )
  }

  return <LayoutWithHooks />
}

export default TestPage

方案二：通过页面组件暴露头部配置 #

在页面组件内部利用Hooks生成头部内容，挂载到组件本身作为属性，再在getLayout中引用：

function TestPage(props) {
  const router = useRouter()

  // 在页面组件内部生成头部内容，可直接使用Hooks
  TestPage.pageHeader = (
    <Header 
      flowTitle="Contacts" 
      pageTitle="All Content"
      pageLeft={<Button onClick={() => router.back()}>All Policies</Button>}
      pageRight={<Button variant="outlined">Request Improvement</Button>}
    />
  )

  return (
    <Box>
      QWe
    </Box>
  )
}

TestPage.getLayout = (page) => {
  return (
    <AuthLayout
      header={TestPage.pageHeader}
    >
      {page}
    </AuthLayout>
  )
}

export default TestPage

方案三：修改_app.js传递页面Props（适配复杂场景） #

如果需要在getLayout中使用页面Props或路由信息，可修改_app.js将pageProps传递给getLayout：

// _app.js
function MyApp({ Component, pageProps }) {
  const getLayout = Component.getLayout || ((page) => page)
  // 传递pageProps给getLayout
  return getLayout(<Component {...pageProps} />, pageProps)
}

export default MyApp

然后在页面的getLayout中接收第二个参数，结合页面内的Hooks使用：

function TestPage(props) {
  const router = useRouter()
  return <Box>QWe</Box>
}

TestPage.getLayout = (page, pageProps) => {
  const LayoutWrapper = () => {
    const router = useRouter()
    return (
      <AuthLayout
        header={
          <Header 
            flowTitle="Contacts" 
            pageTitle={pageProps?.pageTitle || "All Content"}
            pageLeft={<Button onClick={() => router.back()}>All Policies</Button>}
            pageRight={<Button variant="outlined">Request Improvement</Button>}
          />
        }
      >
        {page}
      </AuthLayout>
    )
  }
  return <LayoutWrapper />
}

export default TestPage

内容的提问来源于stack exchange，提问作者SupaGu