Shared components is to organize pages together.
components/Layout.js
//components/Layout.js
import Link from "next/link";
import Head from "next/head";
const Layout = ({ children, title }) => {
return <div className="p-3">
<Head>
<title>{title} - Cairocoders</title>
</Head>
<h3>Next.js Simple Shared components </h3>
<br />
<Link href="/">
<a style={{ marginRight: 15 }}>Home</a>
</Link>
<Link href="/about">
<a style={{ marginRight: 15 }}>About</a>
</Link>
<Link href="/contact">
<a>Contact</a>
</Link>
<h1>{title}</h1>
{children}
<div style={{ marginTop: 30 }}>
© {new Date().getFullYear()}
</div>
</div>
}
export default Layout;
pages/index.js
//pages/index.js import Layout from "../components/Layout"; const Index = () => <Layout title="Home"> <p>Welcome to the Home page!</p> </Layout> export default Index;pages/about.js
//pages/about.js import Layout from "../components/Layout"; const About = () => <Layout title="About"> <p>This is About page!</p> </Layout> export default About;pages/contact.js
//pages/contact.js import Layout from "../components/Layout"; const Contact = () => <Layout title="Contact"> <p>This is Contact page!</p> </Layout> export default Contact;
