Как в nextjs сделать мастер-страницу?

Question

[lucky4]

Пересобираю приложение с cra на nextjs фреймворк.

И сейчас проблема с которой я столкнулся эта переход react-route-dom для nextjs.
К примеру, есть app.js в cra где находится, к примеру, header + main-page + footer.
Header и footer, одинаковый на всех страницах. А вот main page должна изменяться.

Как это реализуется в nextjs? Возможно, надо как-то делать мастер-страницу(к примеру как в nodejs с engine templates или как в .net razor)?

Answer 1

[hzzzzl]

у некста есть _app.js, в который будут завернуты все страницы, вот в этот файл можно положить общие элементы, например

// /pages/_app_.js
import React from 'react'
import App from 'next/app'
import SiteLayout from './components/SiteLayout'

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return (
      <SiteLayout>
        <Component {...pageProps}></Component>
      </SiteLayout>
    )
  }
}

export default MyApp

https://adamwathan.me/2019/10/17/persistent-layout...