如何定义不同的布局在Next.js的页面文件夹内的不同路由?

Question

我想在我的pages目录中实现基于布局的路由。我正在寻找一种方法来使用类似于_app.tsx文件的东西，但仅适用于特定文件夹内的文件。

这将类似于Remix路由样式的功能，其中有一个文件夹，如panel和一个名为panel.tsx的文件，将文件包装在"面板"内。有布局的文件夹

我如何在Next.jspages目录中实现类似的东西?

我想要的:

pages/
panel/
index.tsx
dashboard.tsx
panel.tsx

panel.tsx文件的功能就像新的app目录的布局，基本上我想找到一种方法来包装文件夹内的文件，就像Remix或新的app目录一样

Answer 1

你所说的是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} />)
}

以上是针对/页面的，但逻辑对于任何路由都是相同的。只要调整你的导入和布局名称，你就可以开始了。