Create a Shared Layout Component

Next.js

React

JavaScript

Technical Specification

Create a layout component that wraps pages with a navbar and footer.

Input/Output Samples

Input:Wrap /about & /contact

Output:Both share same navbar/footer

Optimal Logic Path

function Layout({ children }) {
  return (
    <>
      <header>Navbar</header>
      <main>{children}</main>
      <footer>Footer</footer>
    </>
  );
}

export default function About() {
  return (
    <Layout>
      <h1>About</h1>
    </Layout>
  );
}

Architectural Deep-Dive

Layouts prevent repeating common UI like navbars or footers across many pages.