Next.js 的<Main /> 组件详解和使用说明

25 min read

Next.js 的 <Main /> 组件是一个专门用于包含页面主体内容的组件。该组件在 Next.js 中非常常见，它通常在每个页面的布局组件中使用。通过使用 <Main /> 组件，我们可以确保每个页面的主体内容都被正确地包含在布局中。

下面是一个简单的示例，展示了如何在一个布局组件中使用 <Main /> 组件：

import React from 'react';
import Head from 'next/head';
import { Main } from 'next/document';

const Layout = ({ children }) => {
  return (
    <>
      <Head>
        <title>My App</title>
      </Head>
      <header>Header</header>
      <Main>
        {children}
      </Main>
      <footer>Footer</footer>
    </>
  );
};

export default Layout;

在上面的示例中，我们定义了一个 Layout 组件，该组件包含 <header> 和 <footer>，以及一个 <Main /> 组件，该组件包含了页面的主体内容。我们可以在需要使用该布局的页面中导入该组件，如下所示：

import Layout from '../components/Layout';

const IndexPage = () => {
  return (
    <Layout>
      <p>Hello World!</p>
    </Layout>
  );
};

export default IndexPage;

在上面的示例中，我们将 <p> 元素作为子元素传递给 <Layout> 组件，该元素最终会被包含在 <Main /> 组件中。

总结来说，<Main /> 组件是一个用于包含页面主体内容的组件，通常在 Next.js 的布局组件中使用。通过使用该组件，我们可以确保每个页面的主体内容都被正确地包含在布局中。