Tengo dos diseños nextjs
Diseño principal
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} </> ) }y 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> </> ) }Tengo lo siguiente en mi _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;en el archivo de índice principal [página de inicio] he colocado lo siguiente en la parte inferior
export default function Home() { ... content }; Home.Layout = MainLayout;Entonces, en teoría, esta página debería usar MainLayout, sin embargo, aparece el siguiente error
Module parse failed: Identifier 'MainLayout' has already been declared¿Qué estoy haciendo mal aquí? Quiero poder decirle a cada página qué diseño usar.
Para empezar, movería la carpeta de components fuera de la carpeta de pages . También pondría layouts en su propia carpeta fuera de la carpeta de components (pero no en la carpeta de pages ).
En _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 /> </> ); } En 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;