_app.js

import '../styles/globals.css'
import Layout from '../components/layout'

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <Layout>
        {/* <Component /> represents each route's content */}
        <Component {...pageProps} />
      </Layout>
    </div>
  )
}

export default MyApp

index.js

export default function Home() {
  return (
    <>
      <h1>This is the Home page</h1>
      <h2>This is the Next demo</h2>
      <h2>If you right click on this app, and choose 'View Page Source', you'll see that the HTML content includes this paragraph.</h2>
    </>
  )
}

layout.js

import Link from 'next/link';
import styles from './Layout.module.css';

export default function Layout({children}){
    return (
    <div className={styles.Layout}>
      {/* Navbar start */}
      <nav>
        <ul className={styles['nav-ul']}>
          <li className={styles['nav-li']}>
            <Link href="/"><a>Home</a></Link>
          </li>
          <li className={styles['nav-li']}>
            <Link href="/about"><a>About</a></Link>
          </li>
          <li className={styles['nav-li']}>
            <Link href="/contact"><a>Contact</a></Link>
          </li>
        </ul>
      </nav>
      {/* Navbar end */}
      {/* each route content is rendered below */}
      {children}
    </div>
    )
}