Soy nuevo en Reactjs (Nextjs), quiero crear un archivo de "encabezado" y "pie de página" para poder usar este archivo en todas las páginas, así que quiero saber cómo puedo hacer esto y cuál es la mejor opción.
Aquí está mi diseño.js
import React, { Component } from 'react'; import Header from './Header'; class Layout extends Component { render () { const { children } = this.props return ( <div className='layout'> <Header /> {children} </div> ); } }o hay alguna otra manera, ¿Cómo puedo hacer esto? Gracias de antemano.
Consulte esta documentación para conocer la función de diseño básico en NextJs
Primero cree el componente de diseño
import Header from './header' import Footer from './footer' export default function Layout({ children }) { return ( <> <Header/> <main>{children}</main> <Footer /> </> ) }Importe y use el componente < Diseño > en el archivo de entrada,
// pages/_app.js import Layout from '../components/layout' export default function MyApp({ Component, pageProps }) { return ( <Layout> {/* All your page components */} </Layout> ) }Esto envolverá los componentes de su página en el encabezado y pie de página incluidos en el diseño.
Primero cree su encabezado y pie de página, luego, si está utilizando React.js, vaya a la aplicación y coloque el encabezado y el pie de página como se muestra a continuación:
const App = () => { return ( <> <Header /> // your routes go here <Footer /> </> ) }Para Next.js, vaya a _app.tsx/jsx, el punto de entrada de todas sus páginas
export default function MyApp({ Component, pageProps }) { return ( <> <Header /> <Component {...pageProps} /> <Footer /> </> ); }si desea hacer diferentes diseños o aislar ese diseño en un componente separado, puede hacerlo.