Next.js多页布局getLayout使用方法

目录

官网解释

直接上代码使用方法展示

1.page页面​编辑

2._app.js页面,也放在pages中​编辑

效果展示

有getLayout展示getLayout返回的页面布局

无getLayout展示默认布局

---

官网解释

如果需要多个布局，可以添加一个属性getLayout添加到您的页面，允许您为布局返回React组件。这允许您定义上的布局每页基础。因为我们返回的是一个函数，所以如果需要的话，我们可以使用复杂的嵌套布局。

直接上代码使用方法展示

1.page页面

export default function Home() {
    return (
      <div>
        <h1>Welcome to the Homepage</h1>
        <p>This is the main content of the homepage.</p>
      </div>
    );
  }
  
  Home.getLayout = function getLayout() {
    // 可以在这里自定义特定的布局结构
    return (
      <h1>Welcome to the getLayout</h1>
    );
  }
  
  

2._app.js页面,也放在pages中

// pages/_app.js

import Home from './app'; // 导入首页组件

function MyApp({ Component}) {
    const getLayout = Component.getLayout || (() => <Component />);

    return getLayout();
}

export default MyApp;

这样我们就已经搭建完成了,注意_app.js里面是固定写法,我们只需要在上面import我们的pages页面即可,这样他就可以去查看我们是否挂在了getLayout,若有就使用它，没有就用默认的
 

• _app.js 中定义的全局布局逻辑将会影响整个应用程序中的页面渲染和布局结构。

效果展示

有getLayout展示getLayout返回的页面布局

export default function Home() {
    return (
      <div>
        <h1>Welcome to the Homepage</h1>
        <p>This is the main content of the homepage.</p>
      </div>
    );
  }
  
  Home.getLayout = function getLayout() {
    // 可以在这里自定义特定的布局结构
    return (
      <h1>Welcome to the getLayout</h1>
    );
  }

无getLayout展示默认布局

export default function Home() {
    return (
      <div>
        <h1>Welcome to the Homepage</h1>
        <p>This is the main content of the homepage.</p>
      </div>
    );
  }
  
  // Home.getLayout = function getLayout() {
  //   // 可以在这里自定义特定的布局结构
  //   return (
  //     <h1>Welcome to the getLayout</h1>
  //   );
  // }