Render nextjs page using layout - has already been declared error-CodePudding

I have two nextjs layouts

MainLayout

import Navigation from '../Navigation';

export default function MainLayout({ children }) {
  return (
    <>
      <Navigation
        links={[
          {
            href: '/about',
            label: 'About'
          },
          {
            href: '/contact-us',
            label: 'Contact'
          },
          {
            href: '/faq',
            label: 'FAQ'
          },
          {
            href: '/dashboard',
            label: 'Dashboard'
          }
        ]}
      />

      {children}
    </>
  )
}

and DashboardLayout

import Sidebar from '../Dashboard/Sidebar';
import Navigation from '../Dashboard/Navigation';

export default function DashboardLayout({ children }) {
  return (
    <>
      <Sidebar />

      <div className="lg:ml-64">
        <Navigation />

        {children}
      </div>
    </>
  )
}

I have the following in my _app.js

import Head from 'next/head';
import { Provider } from 'next-auth/client';

// assets
import '../styles/global.css';
import '../javascripts/app.js';

// components
import MainLayout from './components/Layouts/MainLayout';
import DashboardLayout from './components/Layouts/DashboardLayout';
import Footer from './components/Footer';

function MyApp({ Component, pageProps }) {
  const Layout = Component.MainLayout || DashboardLayout;

  return (
    <>
      <Head>
        <meta name="theme-color" content="#1E40AF" />
      </Head>

      <section className="flex flex-col min-h-screen">
        <Provider session={pageProps.session}>
          <Layout>
            <Component {...pageProps} className="flex-1" />
          </Layout>
        </Provider>
      </section>

      <Footer />
    </>
  );
}

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

export default MyApp;

in the main index file [homepage] I have placed the following at the bottom

export default function Home() {
  ... content
};

Home.Layout = MainLayout;

So in theory this page should be using the MainLayout, however, I get the following error

Module parse failed: Identifier 'MainLayout' has already been declared

What am I doing wrong here, I want to be able to tell each page what layout to use?

CodePudding user response：

To start, I'd move your components folder outside of your pages folder. I would also put layouts in its own folder outside of the components folder (but not in the pages folder).

In _app.js:

import Head from 'next/head';
import { Provider } from 'next-auth/client';

// assets
import '../styles/global.css';
import '../javascripts/app.js';

// components
import DashboardLayout from '../layouts/DashboardLayout';
import Footer from '../components/Footer';

export default function MyApp({ Component, pageProps }) {
  // if you do not assign a layout in a component, DashboardLayout will be used
  const Layout = Component.Layout || DashboardLayout;

  return (
    <>
      <Head>
        <meta name="theme-color" content="#1E40AF" />
      </Head>

      <section className="flex flex-col min-h-screen">
        <Provider session={pageProps.session}>
          <Layout>
            <Component {...pageProps} className="flex-1" />
          </Layout>
        </Provider>
      </section>

      <Footer />
    </>
  );
}

In index.js:

// import the layout you wish to use for this component
import MainLayout from '../layouts/MainLayout';

export default function Home() {
  return(
    <div>Hello world</div>
  )
};

// assign imported layout
Home.Layout = MainLayout;