How to make a master page in nextjs?

Question

React

I am rebuilding the application from cra to nextjs framework.

And now the problem I'm facing is the transition of react-route-dom to nextjs.
For example, there is app.js in cra where, for example, header + main-page + footer is located.
Header and footer, the same on all pages. But the main page should change.

How is this implemented in nextjs? Perhaps you need to somehow make a master page (for example, like in nodejs with engine templates or like in .net razor)?

Answer 1

next has _app.js , in which all pages will be wrapped, here you can put common elements in this file, for example

// /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...