CODEWITHSUNDEEP
reactjsnext.js
Hashem Mashem
Hashem Mashem

Reputation: 477

How to define more layouts for subdirectories in NextJS?

I have the main layout that wraps whole app:

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  );
}

I want to have the main layout and another layout to wrap, for example localhost:3000/subdirectory/... subdirectory.

Upvotes: 1

Views: 1182

Answers (1)

Zia Yamin
Zia Yamin

Reputation: 1004

You can do it simply like below:

First, remove the layout from your _app.js

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
        <Component {...pageProps} />
    </>
  );
}

Second, create you first layout component:

const MainLayout = ({ children }) => {
  return (
    <>
      <main>{children}</main>
    </>
  );
};

export default MainLayout;

Then Second layout:

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

export default Dashboard ;

Then you can import your layout and use it like in your component:

import Dashboard from './Dashboard ';
export default function Card(){
  return(
     <Dashboard><div>your code</div><Dashboard>
  )
}

And:

import MainLayoutfrom './MainLayout';
export default function Card(){
  return(
     <MainLayout><div>your code</div><MainLayout>
  )
}

Upvotes: 1

Related Questions