How can I use two layouts in one Next.js project?

Question

I made a blog project, so I want an admin panel. I don't want to use the global layout in my admin area. How can I use two layouts in one project?

I tried to make a conditional call in _app.tsx but I could not create a loop in "Component".

Answer 1

Since you are using the pages folder, you can use what Next.js calls Per-Page Layouts. And because most pages would use the global Layout, you can do as below for your admin:

// pages/admin/index.js

import AdminLayout from "./_layout";

export default function Page() {
  return <></>;
}

Page.getLayout = function getLayout(page) {
  return <AdminLayout>{page}</AdminLayout>;
};

// pages/_app.js

import Layout from "./_layout";

export default function MyApp({ Component, pageProps }) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout;
  if (getLayout) {
    return getLayout(<Component {...pageProps} />);
  }

  // Otherwise use the global Layout
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

And for future people using the app directory, this thread would help.