Добавление компонента-оболочки в приложение Next.js

Как использовать компонент-оболочку и добавить к нему общую боковую панель или заголовок

Все страницы вашего сайта выглядят более или менее одинаково. Есть хром, общий базовый слой, и вы просто хотите изменить то, что внутри.

Есть панель навигации, боковая панель, а затем собственно содержимое.

Как построить такую систему в Next.js?

Есть 2 способа. Один используетКомпонент высшего порядка, создав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()бы.

Чтобы избежать излишнего усложнения нашей кодовой базы, альтернативным подходом является использование 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>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


Больше следующих руководств: