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?
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;