Next.jsアプリにラッパーコンポーネントを追加する

ラッパーコンポーネントを使用して、それに共通のサイドバーまたはヘッダーを追加する方法

あなたのサイトのすべてのページは多かれ少なかれ同じに見えます。クローム、共通のベースレイヤーがあり、中身を変更したいだけです。

ナビゲーションバー、サイドバー、そして実際のコンテンツがあります。

Next.jsでそのようなシステムをどのように構築しますか?

2つの方法があります。 1つは使用しています高階コンポーネント、作成することにより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>Heres a page!</p>

export default withLayout(Page)

しかし、これは電話をかける必要がない単純な場合にのみ機能することがわかりましたgetInitialProps()ページ上。

どうして?

なぜならgetInitialProps()ページコンポーネントでのみ呼び出されます。しかし、ページから高階コンポーネントwithLayout()をエクスポートすると、Page.getInitialProps()は呼び出されません。withLayout.getInitialProps()だろう。

コードベースを不必要に複雑にすることを避けるために、別のアプローチは小道具を使用することです。

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

そして今、私たちのページでは次のように使用しています。

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

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

このアプローチにより、getInitialProps()ページコンポーネント内から、コンポーネントJSXを内部に書き込む必要があるという唯一の欠点がありますcontent小道具:

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

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

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

私の無料ダウンロードNext.jsハンドブック


その他の次のチュートリアル: