I've created a very simple Next.js-project with two pages.

Both pages include a basic layout ponent:

// Page Component  

render() {
  return (
    <PageLayout>
      This is page A
    </PageLayout>
  );
}

And PageLayout looks something like this:

// PageLayout

render() {
  return (
    <div>
      <Header />
      {this.props.children}
    </div>
  );
}

So both pages use PageLayout to render a basic template that also includes the same Header on both pages.

My problem is that the Header ponent is re-created when navigating between the two pages. I think this is bad not only from a performance point of view, but also because in this case all DOM-Nodes and all React ponents loose their local state.

So I would like to know if there is something I am missing or how we can create shared ponents between pages that are reused properly (at least if their state did not change, of course).

I've created a very simple Next.js-project with two pages.

Both pages include a basic layout ponent:

// Page Component  

render() {
  return (
    <PageLayout>
      This is page A
    </PageLayout>
  );
}

And PageLayout looks something like this:

// PageLayout

render() {
  return (
    <div>
      <Header />
      {this.props.children}
    </div>
  );
}

So both pages use PageLayout to render a basic template that also includes the same Header on both pages.

My problem is that the Header ponent is re-created when navigating between the two pages. I think this is bad not only from a performance point of view, but also because in this case all DOM-Nodes and all React ponents loose their local state.

So I would like to know if there is something I am missing or how we can create shared ponents between pages that are reused properly (at least if their state did not change, of course).

• javascript
• reactjs
• next.js

Share Improve this question Follow edited Apr 5, 2018 at 17:17 K. D. asked Apr 5, 2018 at 17:12 K. D.K. D. 4,2491212 gold badges5252 silver badges7373 bronze badges 1

• I'm pretty sure you can't (by my experience with nextjs). If you don't want to lose the state in Header then you need to store it e.g. in redux. – Tomasz Mularczyk Commented Apr 5, 2018 at 17:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You have Two pages with mon ponent:

Page A:

<A>
  <Common />
</A>

Page B:

<B>
  <Common />
</B>

From the React documentation:

Whenever the root elements have different types, React will tear down the old tree and build the new tree from scratch. Going from <a> to <img>, or from <Article> to <Comment>, or from <Button> to <div> - any of those will lead to a full rebuild.

This is why you lose the state in Common (Header) ponent. Like I suggested in the ment you would have to use an external state like redux.

You have to create a ponent with the name of layout

// ponents/layout.js

import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

And then rap your _app.js ponent like this

// pages/_app.js

import Layout from '../ponents/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

for more read https://nextjs/docs/basic-features/layouts