How to not render Layout component on NextJS login page

Question

How can exclude render of Layout component when the route is /login, /register etc... in NextJS?

const MyApp = ({ Component, pageProps }) => {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
};

What I have done so far inside Layout.js

const router = useRouter();

if (router.pathname.includes('/login')) return children;
if (router.pathname.includes('/register')) return children;

EDIT: the above solution works, just wanted to know if nextjs routing provides a "good practice" way to solve this problem

Answer 1

Follow these steps to exclude a specific component from layout. This will exclude the dashboard component from the layout.

1. Add "Dashboard.getLayout" function in the component you want to exclude.

 const Dashboard = ({ children }) => {
return (
  <>
  <DashboardContent children={''}/>
  </>
);
};

export default Dashboard;

Dashboard.getLayout = function PageLayout(page) {
return (
    <>
        {page}
    </>
)
}

2. Add below code in your _app.js component file.

export default function App({ Component, pageProps }: AppProps) {
if (Component.getLayout) {
return Component.getLayout(
      <Component {...pageProps} />
    )
}
return <Component {...pageProps} />
}