CODEWITHSUNDEEP
reactjsnext.js
Ramiro Herrera
Ramiro Herrera

Reputation: 2949

Persist a navbar in Next.js with custom `App`

I'm learning Next.js and stumbled upon this issue. Back in the old ways, this is how you would use the navbar across all pages

return (
    <Container>
        <Navbar />
        <Component {...pageProps}/>
    </Container>

   )

but now the documentation is written using functional components https://nextjs.org/docs/advanced-features/custom-app. I'm trying something like this but so far it doesn't work

  return (
    <>
      <Navbar />
      <Component {...pageProps} />
    </>
  );
 }

Does anyone have any idea of how to make this work?

Upvotes: 0

Views: 2797

Answers (1)

Mark Challender
Mark Challender

Reputation: 11

Ignore my last response, this will cause an unnecessary render, use:

import Navbar from "../components/Navbar";
function MyApp({ Component, pageProps }) {
  return (
    <>
    <Navbar />
    <Component {...pageProps} />
    </>
  );
}

Upvotes: 1

Related Questions