Next.js 布局

您是否厌倦了手动更新Web应用程序中每个页面的布局？别担心！使用Next.js布局，您可以轻松创建和应用一致的布局组件，覆盖整个Web应用程序或特定部分。Next.js是基于React的框架。它具有为Windows、Linux和Mac等不同平台开发美观的Web应用程序的能力。Next.js最强大的功能之一是使用布局来为应用程序创建可重用的模板。在本文中，我们将看到Next.js布局。

什么是Next.js中的布局？

Next.js中的布局是一个高阶组件（HOC），包装您的应用程序页面。它允许您定义一致的结构和外观，以实现所有页面的一致用户体验，从而更容易地维护。布局是在构建较大的应用程序时重用代码和节省时间的好方法。

使用Next.js布局的好处：

布局在构建任何Web应用程序时都非常有益。以下是Next.js在布局中提供的一些好处：

一致性 ：在应用程序中使用布局可以确保所有页面具有一致的结构和外观，这使得用户更容易浏览您的应用程序并理解其目的。
可复用性 ：布局有助于在构建较大的应用程序时重用代码和节省时间。如果您创建了一个单个布局组件，并在多个页面中使用它，您可以避免重复代码，并减少错误的风险。
可扩展性 ：随着您的应用程序的增长，布局使得更容易管理页面的结构和外观。通过定义布局，您可以快速更新应用程序中所有页面的结构和外观。

语法：

const Layout = ({ children }) => {
  return (
    <div>
      <header>Your header</header>
      <main>{children}</main>
      <footer>Your footer</footer>
    </div>
  )
}

先决条件： 在Next.js中创建布局之前，请确保您已经创建了一个Next.js项目。请查看NextJS介绍。

创建Next.js布局的步骤：

步骤1： 首先，我们需要在components文件夹中创建一个新文件，并将其命名为“Layout.js”

import React from 'react'
  
const Layout = ({ children }) => { 
    return ( 
        <div> 
            <header>Navbar</header> 
            <main>{children}</main> 
            <footer>Footer</footer> 
        </div> 
    ) 
} 
  
export default Layout;

在这个文件中，我们定义了一个布局组件，它包括一个头部、一个主要部分和一个尾部。children属性被用来传递被布局包裹的页面内容。

步骤2: 使用自定义应用的单一共享布局

在单个页面上设置布局: 创建了一个布局组件后，它现在可以在页面上使用。我们可以导入它并将其用于页面组件。例如，如果我们有一个名为 “About.js” 的页面，我们可以将其与下面的布局组件包裹起来：

//pages/About.js 
  
import React from 'react'
import Layout from '../components/Layout'
  
const About = () => { 
  return ( 
    <Layout> 
      <h1>About page</h1> 
      <p>This is the about page content.</p> 
    </Layout> 
  ) 
} 
  
export default About

在上面的代码中，关于页面组件被包裹在布局组件中。页面的内容通过children属性传递给布局组件。

为所有页面设置默认布局： 如果您只想在整个应用程序中设置一个布局，可以在pages目录中创建一个_app.js文件，并定义默认的布局组件，如下所示：

// pages/_app.js 
  
import Layout from '../components/layout'
  
function MyApp({ children, Component }) { 
    return ( 
        <Layout> 
            <Component {...pageProps} /> 
        </Layout> 
    ); 
} 
  
export default MyApp;

在上述代码中，MyApp组件被用作应用程序中所有页面的包装器。Component属性表示当前正在渲染的页面，pageProps属性包含传递给页面的任何初始props。

示例：下面的示例演示了如何创建一个布局并与其他页面一起使用。

在下面的示例中，我们在layout.js文件中创建了一个布局组件。创建完成后，我们将该组件导出以在其他页面中使用。在pages文件夹中的_app.js文件中，我们通过导入它并将布局组件包裹在About.js组件中来添加我们的布局组件。

//pages/_app.js 
  
import "../styles/globals.css"; 
import Layout from '../components/layout'
import About from "./About"; 
  
function MyApp({ Component, pageProps }) { 
    return ( 
        <Layout> 
            <About /> 
        </Layout> 
    ); 
} 
  
export default MyApp;

//pages/About.js

//pages/About.js 
  
import React from 'react'
  
function About() { 
    return ( 
        <div style={{ textAlign: 'center' }}> 
            <h1>Welcome to GeeksforGeeks About Page</h1> 
        </div> 
    ) 
} 
  
export default About

//components/layout.js

//components/layout.js 
  
import React from 'react'
  
const Layout = ({ children }) => { 
    return ( 
        <div> 
            <header style={{  
                backgroundColor: 'green',  
                color: 'white',  
                padding: 10  
            }}> 
                Navbar 
            </header> 
              
            <main>{children}</main> 
              
            <footer style={{  
                backgroundColor: 'black',  
                color: 'white',  
                padding: 10,  
                position: 'fixed',  
                bottom: 0,  
                width: '100%' 
            }}> 
                Footer 
            </footer> 
        </div> 
    ) 
} 
  
export default Layout;

运行步骤：

步骤1： 在您的项目目录中运行以下命令：