How to add Component on each side using Next.js?

Freestyle09 :

I want to have Component Header on each side and in React you can simply achieve this with passing Component before <Switch> from react-router-dom and how can be done this with Next.js?

I was trying to follow this tutorial but no results: https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/

I was trying also to implement that advancted stuff from Next.js documentation https://nextjs.org/docs/advanced-features/custom-app

pages/index.js

const Home = ({ products }) => {
  useEffect(() => {
    console.log(products);
  }, []);
  return (
    <div className="container">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Advantages></Advantages>
      <Recommend products={products}></Recommend>
    </div>
  );
};

I want to add one Header component that should be visible on each side in my application. Can I do this with Next.js??

bcjohn :

I guest you want a layout all of your page? If so, with-app-layout which is a official example you can reference.

How to add Component on each side using Next.js?

Guess you like