Next.js 是 vercel 开发的基于 React 的全栈框架，可以实现网页预渲染等功能。

与整个应用程序加载在客户端上的传统 React 应用程序不同，Next.js 允许在服务器上呈现网页，这对于性能和 SEO 非常有用。您可以在此处了解有关 Next.js 的更多信息。

布局组件：布局组件用于您想要在多个页面之间共享的网站部分，例如导航栏、页脚等。我们还可以通过此组件管理 Next 应用程序的初始状态，因为它在每个页面上加载并换行顶级应用程序容器。

如何创建布局组件？

步骤 1：使用以下命令创建一个新的 Next.js 应用程序：

npx create-next-app gfg

 项目结构：

我们将构建一个带有导航栏和页脚的简单应用程序布局，并查看我们的布局组件如何显示在所有页面上。

第 2 步：我们首先通过删除所有样板代码来清理 index.js 文件。

  • /pages/index.js

import React from 'react'

const HomePage = () => {

  return (

    <div>Hello Geeks!</div>

  )

}

export default HomePage

步骤 3：在根目录中创建一个名为 Components 的新文件夹，并在该文件夹中创建一个名为 Layout.jsx 的新文件。

第 4 步：在我们的布局文件中，我们现在可以添加导航栏和页脚组件。我们将创建导航栏和页脚的子组件。您可以为这些组件创建单独的文件，但为了简单起见，我们将在同一文件中创建它们。布局将接受一个名为“children”的默认属性，该属性将包含包裹在 Layout 组件之间的内容。

  •  /组件/布局.jsx

import React from "react"``;

const Header = () => {

  return <h3>This is Header</h3>;

};

const Footer = () => {

  return <h3>This is Footer</h3>;

};

const Layout = ({ children }) => {

  return (

    <>

      <Header />

      {children}

      <Footer />

    </>

  );

};

export default Layout;

步骤 5：在 /pages/_app.js 文件中导入布局组件并包装顶级组件，该组件作为子组件传递给布局组件。

  • /pages/_app.js

import '../styles/globals.css'

import Layout from '../components/Layout'

function MyApp({ Component, pageProps }) {

  return (

    <Layout>

    <Component {...pageProps} />

    </Layout>

  )

}

export default MyApp

第 6 步：我们可以创建一个虚拟页面，以确保我们的布局组件在所有页面上都可见。在页面目录中创建一个名为 test.jsx 的新文件。

  • /pages/test.jsx

import React from 'react'

const Test = () => {

  return (

    <div>This is a dummy page</div>

  )

}

export default Test

步骤 7：使用以下命令运行您的下一个应用程序。

npm run dev

“这门课程充满了令人惊叹且组织良好的内容！本课程基于项目的方法可以更好地更快地理解概念。此外，现场课程的讲师非常优秀且知识渊博。”- Tejas |德意志银行

通过我们改进的全栈开发计划：掌握 Node.js 和 React，使您能够创建动态 Web 应用程序。

因此，只有参加我们的全栈开发课程才能为加薪做好准备。