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

目录

官网解释

直接上代码使用方法展示

1.page页面​编辑

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

效果展示

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

无getLayout展示默认布局

官网解释

直接上代码使用方法展示

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;

效果展示

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