In case, you need to hide some component in react.js or next.js

Layout.js

import React from 'react';
import { useRouter } from 'next/router';

import Nav from './Nav';
import Header from './Header';
import Footer from './Footer';

const Layout = ({ children }) => {
  const router = useRouter();

  const { pathname } = router;
  const noHeader = ['/login', '/register'];

  return (
    <div>
      <Nav />
      <div className="flex flex-col h-screen">
        {noHeader.includes(pathname) ? null : <Header />}
        <main className="mb-auto">{children}</main>
        <Footer />
      </div>
    </div>
  );
};

export default Layout;

This is gold!
Thank you.

Thank you very much, you really helped me