move <Layout> to _app.tsx so it's not rerendered

components/Layout.tsx

@@ -1,26 +1,15 @@
-import { NextSeo } from "next-seo";
+import Header from "./page-header/Header";
+import Footer from "./page-footer/Footer";
 
 import styles from "./Layout.module.scss";
 
-type Props = {
-  title?: string;
-  description?: string;
-  children: unknown;
-};
-
-const Layout = ({ title, description, children }: Props) => (
+const Layout = ({ children }) => (
   <>
-    <NextSeo
-      title={title}
-      description={description}
-      openGraph={{
-        title: title,
-      }}
-    />
-
+    <Header />
     <main className={styles.main}>
       <div className={styles.container}>{children}</div>
     </main>
+    <Footer />
   </>
 );
 

pages/_app.tsx

@@ -3,8 +3,7 @@ import { useRouter } from "next/router";
 import { ThemeProvider } from "next-themes";
 import { DefaultSeo, SocialProfileJsonLd } from "next-seo";
 import * as Fathom from "fathom-client";
-import Header from "../components/page-header/Header";
-import Footer from "../components/page-footer/Footer";
+import Layout from "../components/Layout";
 import * as config from "../lib/config";
 import type { AppProps } from "next/app";
 
@@ -184,9 +183,9 @@ const App = ({ Component, pageProps }: AppProps) => {
       />
 
       <ThemeProvider>
-        <Header />
+        <Layout>
           <Component {...pageProps} />
-        <Footer />
+        </Layout>
       </ThemeProvider>
     </>
   );

pages/birthday.tsx

@@ -1,4 +1,4 @@
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
 import Video from "../components/video/Video";
@@ -7,10 +7,15 @@ import { TapeIcon } from "../components/icons";
 import thumbnail from "../public/static/images/birthday/thumb.png";
 
 const Birthday = () => (
-  <Layout
+  <>
+    <NextSeo
       title="🎉 Cranky Birthday Boy on VHS Tape 📼"
       description="The origin of my hatred for the Happy Birthday song."
-  >
+      openGraph={{
+        title: "🎉 Cranky Birthday Boy on VHS Tape 📼",
+      }}
+    />
+
     <PageTitle
       title={
         <>
@@ -38,7 +43,7 @@ const Birthday = () => (
         controls={true}
       />
     </Content>
-  </Layout>
+  </>
 );
 
 export default Birthday;

pages/cli.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
 import { BotIcon } from "../components/icons";
@@ -7,7 +7,15 @@ import { BotIcon } from "../components/icons";
 import cliImg from "../public/static/images/cli/screenshot.png";
 
 const CLI = () => (
-  <Layout title="CLI" description="AKA, the most useless Node module ever published, in history, by anyone, ever.">
+  <>
+    <NextSeo
+      title="CLI"
+      description="AKA, the most useless Node module ever published, in history, by anyone, ever."
+      openGraph={{
+        title: "CLI",
+      }}
+    />
+
     <PageTitle
       title={
         <>
@@ -82,7 +90,7 @@ const CLI = () => (
         </a>
       </p>
     </Content>
-  </Layout>
+  </>
 );
 
 export default CLI;

pages/contact.tsx

@@ -1,10 +1,18 @@
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import PageTitle from "../components/page/PageTitle";
 import ContactForm from "../components/contact/ContactForm";
 import { MailIcon, LockIcon } from "../components/icons";
+import Content from "../components/Content";
 
 const Contact = () => (
-  <Layout title="Contact Me">
+  <>
+    <NextSeo
+      title="Contact Me"
+      openGraph={{
+        title: "Contact Me",
+      }}
+    />
+
     <PageTitle
       title={
         <>
@@ -12,7 +20,8 @@ const Contact = () => (
         </>
       }
     />
-    <div>
+    <Content>
+      <div className="wrapper">
         <p>
           Fill out this quick form and I'll get back to you as soon as I can! You can also{" "}
           <a href="mailto:jake@jarv.is">email me directly</a>, send me a{" "}
@@ -34,15 +43,15 @@ const Contact = () => (
         </p>
         <ContactForm />
       </div>
+    </Content>
+
     <style jsx>{`
-      div {
+      .wrapper {
         max-width: 600px;
         margin: 0 auto;
-        font-size: 0.9em;
-        line-height: 1.7;
       }
 
-      code {
+      .wrapper code {
         background: none;
         border: 0;
         padding: 0;
@@ -50,7 +59,7 @@ const Contact = () => (
         white-space: normal;
       }
     `}</style>
-  </Layout>
+  </>
 );
 
 export default Contact;

pages/hillary.tsx

@@ -1,4 +1,4 @@
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
 import Video from "../components/video/Video";
@@ -6,10 +6,15 @@ import Video from "../components/video/Video";
 import thumbnail from "../public/static/images/hillary/thumb.png";
 
 const Hillary = () => (
-  <Layout
+  <>
+    <NextSeo
       title="My Brief Apperance in Hillary Clinton's DNC Video"
       description="My brief apperance in one of Hillary Clinton's 2016 DNC convention videos on substance abuse."
-  >
+      openGraph={{
+        title: "My Brief Apperance in Hillary Clinton's DNC Video",
+      }}
+    />
+
     <PageTitle title="My Brief Apperance in Hillary Clinton's DNC Video" />
     <Content>
       <Video
@@ -39,6 +44,7 @@ const Hillary = () => (
         }}
         controls={true}
       />
+
       <p className="copyright">
         Video is property of{" "}
         <a href="https://www.hillaryclinton.com/" target="_blank" rel="noopener noreferrer">
@@ -54,6 +60,8 @@ const Hillary = () => (
         </a>
         . &copy; 2016.
       </p>
+    </Content>
+
     <style jsx>{`
       .copyright {
         text-align: center;
@@ -67,8 +75,7 @@ const Hillary = () => (
         font-weight: 700;
       }
     `}</style>
-    </Content>
-  </Layout>
+  </>
 );
 
 export default Hillary;

pages/index.tsx

@@ -1,7 +1,6 @@
 import Link from "next/link";
 import isAbsoluteUrl from "is-absolute-url";
 import { colord } from "colord";
-import Layout from "../components/Layout";
 import { WaveIcon, LockIcon } from "../components/icons";
 
 type ColorLinkProps = {
@@ -40,7 +39,7 @@ const ColorLink = ({ href, title, lightColor, darkColor, external = false, child
 };
 
 const Index = () => (
-  <Layout>
+  <>
     <h1>
       Hi there! I'm Jake.{" "}
       <span className="wave">
@@ -376,7 +375,7 @@ const Index = () => (
         }
       }
     `}</style>
-  </Layout>
+  </>
 );
 
 export default Index;

pages/leo.tsx

@@ -1,4 +1,4 @@
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
 import Video from "../components/video/Video";
@@ -7,10 +7,14 @@ import thumbnail from "../public/static/images/leo/thumb.png";
 
 const Leo = () => (
   <>
-    <Layout
+    <NextSeo
       title='Facebook App on "The Lab with Leo Laporte"'
       description="Powncer app featured in Leo Laporte's TechTV show."
-    >
+      openGraph={{
+        title: 'Facebook App on "The Lab with Leo Laporte"',
+      }}
+    />
+
     <PageTitle title='Facebook App on "The Lab with Leo Laporte"' />
     <Content>
       <Video
@@ -40,6 +44,7 @@ const Leo = () => (
         }}
         controls={true}
       />
+
       <p className="copyright">
         Video is property of{" "}
         <a
@@ -55,6 +60,8 @@ const Leo = () => (
         </a>
         . &copy; 2007 G4 Media, Inc.
       </p>
+    </Content>
+
     <style jsx>{`
       .copyright {
         text-align: center;
@@ -68,8 +75,6 @@ const Leo = () => (
         font-weight: 700;
       }
     `}</style>
-      </Content>
-    </Layout>
   </>
 );
 

pages/license.tsx

@@ -1,10 +1,17 @@
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
 import { LicenseIcon } from "../components/icons";
 
 const License = () => (
-  <Layout title="License">
+  <>
+    <NextSeo
+      title="License"
+      openGraph={{
+        title: "License",
+      }}
+    />
+
     <PageTitle
       title={
         <>
@@ -459,7 +466,7 @@ const License = () => (
         </p>
       </blockquote>
     </Content>
-  </Layout>
+  </>
 );
 
 export default License;

pages/notes/[slug].tsx

@@ -1,7 +1,6 @@
 import { MDXRemote } from "next-mdx-remote";
 import { serialize } from "next-mdx-remote/serialize";
 import { NextSeo, ArticleJsonLd } from "next-seo";
-import Layout from "../../components/Layout";
 import Content from "../../components/Content";
 import Meta from "../../components/notes/Meta";
 import mdxComponents from "../../components/mdxComponents";
@@ -53,14 +52,12 @@ const Note = ({ frontMatter, source }) => (
       publisherLogo={`${config.baseUrl}/static/images/me.jpg`}
     />
 
-    <Layout>
     <Meta {...frontMatter} />
     <Content>
       <div className="markdown">
         <MDXRemote {...source} components={mdxComponents} />
       </div>
     </Content>
-    </Layout>
   </>
 );
 

pages/notes/index.tsx

@@ -1,13 +1,21 @@
+import { NextSeo } from "next-seo";
 import { format } from "date-fns";
-import Layout from "../../components/Layout";
 import List from "../../components/notes/List";
 import { getAllNotes } from "../../lib/parse-notes";
 import type { GetStaticProps } from "next";
 
 const Notes = ({ notesByYear }) => (
-  <Layout title="Notes" description="Recent posts by Jake Jarvis.">
+  <>
+    <NextSeo
+      title="Notes"
+      description="Recent posts by Jake Jarvis."
+      openGraph={{
+        title: "Notes",
+      }}
+    />
+
     <List notesByYear={notesByYear} />
-  </Layout>
+  </>
 );
 
 export const getStaticProps: GetStaticProps = async () => {

pages/previously.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
 
 import Image from "next/image";
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
 import { FloppyIcon, SirenIcon } from "../components/icons";
@@ -22,10 +22,14 @@ import img_2018_04 from "../public/static/images/previously/2018_04.png";
 
 const Previously = () => (
   <>
-    <Layout
+    <NextSeo
       title="Previously on..."
       description="An incredibly embarrassing and somewhat painful down of this site's memory lane..."
-    >
+      openGraph={{
+        title: "Previously on...",
+      }}
+    />
+
     <PageTitle
       title={
         <>
@@ -197,7 +201,7 @@ const Previously = () => (
         </figcaption>
       </figure>
     </Content>
-    </Layout>
+
     <style jsx global>{`
       body {
         font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", "Inter", sans-serif;

pages/privacy.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
 import { PrivacyIcon } from "../components/icons";
@@ -8,7 +8,14 @@ import { PrivacyIcon } from "../components/icons";
 import faunaImg from "../public/static/images/privacy/fauna_hits.png";
 
 const Privacy = () => (
-  <Layout title="Privacy">
+  <>
+    <NextSeo
+      title="Privacy"
+      openGraph={{
+        title: "Privacy",
+      }}
+    />
+
     <PageTitle
       title={
         <>
@@ -211,7 +218,7 @@ const Privacy = () => (
         , for what it's worth. (A few cents, probably... 💰)
       </p>
     </Content>
-  </Layout>
+  </>
 );
 
 export default Privacy;

pages/projects.tsx

@@ -1,12 +1,19 @@
 import { graphql } from "@octokit/graphql";
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import PageTitle from "../components/page/PageTitle";
 import RepoCard from "../components/projects/RepoCard";
 import { ProjectsIcon } from "../components/icons";
 import type { GetStaticProps } from "next";
 
 const Projects = ({ repos }) => (
-  <Layout title="Projects">
+  <>
+    <NextSeo
+      title="Projects"
+      openGraph={{
+        title: "Projects",
+      }}
+    />
+
     <PageTitle
       title={
         <>
@@ -43,6 +50,7 @@ const Projects = ({ repos }) => (
       <a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener noreferrer">
         View more on GitHub...
       </a>
+
       <style jsx>{`
         p {
           text-align: center;
@@ -50,7 +58,7 @@ const Projects = ({ repos }) => (
         }
       `}</style>
     </p>
-  </Layout>
+  </>
 );
 
 export const getStaticProps: GetStaticProps = async () => {

pages/uses.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
 import { LaptopIcon } from "../components/icons";
@@ -8,7 +8,15 @@ import { LaptopIcon } from "../components/icons";
 import desktopImg from "../public/static/images/uses/bigsur.png";
 
 const Uses = () => (
-  <Layout title="/uses" description="Things I use daily.">
+  <>
+    <NextSeo
+      title="/uses"
+      description="Things I use daily."
+      openGraph={{
+        title: "/uses",
+      }}
+    />
+
     <PageTitle
       title={
         <>
@@ -1070,7 +1078,7 @@ const Uses = () => (
         </li>
       </ul>
     </Content>
-  </Layout>
+  </>
 );
 
 export default Uses;