在你的Next.js应用程序中添加一个封装组件

如何使用包装组件并为其添加一个普通的侧边栏或页眉

你网站上的所有页面看起来都差不多。有一个chrome，一个共同的基础层，而你只是想改变里面的内容。

有一个导航栏，一个侧边栏，然后是实际内容。

你如何在Next.js中建立这样的系统？

有两种方法。一种是使用高阶组件，通过创建一个components/Layout.js 组件。

export default Page => {
  return () => (
    <div>
      <nav>
        <ul>....</ul>
      </nav>
      <main>
        <Page />
      </main>
    </div>
  )
}

在那里，我们可以为标题和/或侧边栏导入单独的组件，我们还可以添加我们需要的所有CSS。

你可以像这样在每个页面上使用它。

import withLayout from '../components/Layout.js'

const Page = () => <p>Here's a page!</p>

export default withLayout(Page)

但我发现这只适用于简单的情况，你不需要在一个页面上调用getInitialProps() 。

为什么呢？

因为getInitialProps() 只在页面组件上得到调用。但如果我们从一个页面导出高阶组件withLayout()，Page.getInitialProps() ，就不会被调用。withLayout.getInitialProps() 就会。

为了避免不必要地使我们的代码库复杂化，另一种方法是使用props。

export default props => (
  <div>
    <nav>
      <ul>....</ul>
    </nav>
    <main>
      {props.content}
    </main>
  </div>
)

并在我们的页面中像这样使用它。

import Layout from '../components/Layout.js'

const Page = () => (
  <Layout content={(
    <p>Here's a page!</p>
  )} />
)

这种方法让我们在页面组件中使用getInitialProps() ，唯一的缺点是必须把组件的JSX写在content 道具里面。

import Layout from '../components/Layout.js'

const Page = () => (
  <Layout content={(
    <p>Here's a page!</p>
  )} />
)

Page.getInitialProps = ({ query }) => {
  //...
}