static header and footer were being re-rendered on every route change

components/Container.module.scss

@@ -1,5 +0,0 @@
-.container {
-  max-width: 865px;
-  margin: 0 auto;
-  display: block;
-}

components/Container.tsx

@@ -1,26 +0,0 @@
-import { NextSeo } from "next-seo";
-
-import styles from "./Container.module.scss";
-
-type Props = {
-  title?: string;
-  description?: string;
-  children: unknown;
-};
-
-const Container = ({ title, description, children }: Props) => {
-  return (
-    <>
-      <NextSeo
-        title={title}
-        description={description}
-        openGraph={{
-          title: title,
-        }}
-      />
-      <div className={styles.container}>{children}</div>
-    </>
-  );
-};
-
-export default Container;

components/Layout.module.scss

@@ -5,6 +5,12 @@
   background-color: var(--background-inner);
 }
 
+.container {
+  max-width: 865px;
+  margin: 0 auto;
+  display: block;
+}
+
 @media screen and (max-width: 768px) {
   .main {
     padding: 1.25em;

components/Layout.tsx

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

components/page-header/ThemeToggle.tsx

@@ -9,7 +9,10 @@ const ThemeToggle = ({ className = "" }) => {
   // avoid hydration mismatch:
   // https://github.com/pacocoursey/next-themes#avoid-hydration-mismatch
   useEffect(() => setMounted(true), []);
-  if (!mounted) return null;
+  if (!mounted) {
+    // always return one of the bulbs just so there are never flashing layout shifts
+    return <BulbOffIcon className={`icon ${className}`} />;
+  }
 
   return (
     <button