Home
Basics
Introduction Environment setup Project structure Pages CSS in NextJS JavaScript in NextJS Layouts Data Fetching Routing API Routes Metadata and SEO Environment Variables OptimizationsAdvanced
Dynamic Importing Blog using md files Authentication in NextJS Mongodb and NextJS Stripe and NextJSMiscellaneous
Deploying NextJS app on Heroku NextJS Templates NextJS Interview QnALayouts in NextJS
Layout allows you to reuse components to build a page. e.g. Every page has a header and footer common in them. So you can create Layout component which renders these common components along with main page component. Below code is in _App.tsx.
import Layout from '../components/layout'
export default function App({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
Below code is in Layout.tsx
import React from 'react'
import Header from './Header'
import Footer from './Footer'
export const Layout = ({ children }) => {
return (
<div className="container">
<Header/>
{children}
<Footer/>
</div>
)
}
Web development and Automation testing
solutions delivered!!