javascript - 文件夹共享容器中的 Nextjs 页面

Question

NextJS中有没有办法让一个文件夹中的所有页面共享一个容器？<​​/p>

我想它看起来像这样:

// pages/folder/index.js
export default function Container({ children }) {
    return <Container>{children}</Container>
}

// pages/folder/child.js
export default function Child() {
    return <Child />
}

Answer 1

我相信您正在寻找的是 Layouts .

// components/layout.js

import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

与自定义应用程序的单一共享布局

// pages/_app.js

import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

每页布局

// 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} />)
}