From 2c74527bcaef16afc5f679fb675568bc33023a15 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Thu, 10 Nov 2022 16:24:11 -0600
Subject: [PATCH] Update to Next 13 and all other dependencies. Fix Link tag,
 Script tag, Image tag, and custom Nav Link tag.

---
 components/Footer.js  |  4 +---
 components/Header.js  |  4 +---
 components/Nav.js     | 28 +++++++---------------------
 components/NavLink.js | 15 +++++----------
 components/Page.js    |  8 +-------
 pages/_app.js         |  3 ++-
 pages/_document.js    | 24 ++++++++++++++++++------
 pages/photos.js       |  2 +-
 8 files changed, 36 insertions(+), 52 deletions(-)

diff --git a/components/Footer.js b/components/Footer.js
index 215d2c6..245d863 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -54,9 +54,7 @@ export default function Footer() {
     <FooterStyles>
       <div>
         <h2>
-          <Link href="/">
-            <a>N & N</a>
-          </Link>
+          <Link href="/">N & N</Link>
         </h2>
         {user && user.isLoggedIn === true ? (
           <>
diff --git a/components/Header.js b/components/Header.js
index 86c3391..f215379 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -31,9 +31,7 @@ const Header = () => {
     <HeaderStyles>
       <div>
         <Link href="/">
-          <a>
-            <h1 className="center">Name & Name</h1>
-          </a>
+          <h1 className="center">Name & Name</h1>
         </Link>
         {user && user.isLoggedIn === true && !pastWeddingDate ? (
           <>
diff --git a/components/Nav.js b/components/Nav.js
index cc10a97..ddc4fbf 100644
--- a/components/Nav.js
+++ b/components/Nav.js
@@ -4,27 +4,13 @@ import NavStyles from './styles/NavStyles';
 export default function Nav() {
   return (
     <NavStyles>
-      <NavLink href="/">
-        <a>Home</a>
-      </NavLink>
-      <NavLink href="/story">
-        <a>Our Story</a>
-      </NavLink>
-      <NavLink href="/party">
-        <a>Wedding Party</a>
-      </NavLink>
-      <NavLink href="/photos">
-        <a>Photos</a>
-      </NavLink>
-      <NavLink href="/travelstay">
-        <a>Travel & Stay</a>
-      </NavLink>
-      <NavLink href="/qanda">
-        <a>Q & A</a>
-      </NavLink>
-      <NavLink href="/rsvp">
-        <a>RSVP</a>
-      </NavLink>
+      <NavLink href="/">Home</NavLink>
+      <NavLink href="/story">Our Story</NavLink>
+      <NavLink href="/party">Wedding Party</NavLink>
+      <NavLink href="/photos">Photos</NavLink>
+      <NavLink href="/travelstay">Travel & Stay</NavLink>
+      <NavLink href="/qanda">Q & A</NavLink>
+      <NavLink href="/rsvp">RSVP</NavLink>
     </NavStyles>
   );
 }
diff --git a/components/NavLink.js b/components/NavLink.js
index 60a42f7..272ec49 100644
--- a/components/NavLink.js
+++ b/components/NavLink.js
@@ -2,18 +2,13 @@ import React from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 
-export const NavLink = ({ children, href }) => {
-  const child = React.Children.only(children);
-  const router = useRouter();
+export const NavLink = ({ href, children }) => {
+  const { asPath } = useRouter();
+  const ariaCurrent = href === asPath ? 'page' : undefined;
 
   return (
-    <Link href={href}>
-      {React.cloneElement(child, {
-        'aria-current':
-          router.pathname === href || router.pathname.includes(`${href}/`)
-            ? 'page'
-            : null,
-      })}
+    <Link prefetch href={href} aria-current={ariaCurrent}>
+      {children}
     </Link>
   );
 };
diff --git a/components/Page.js b/components/Page.js
index 35f22a4..6258ae0 100644
--- a/components/Page.js
+++ b/components/Page.js
@@ -344,13 +344,7 @@ export default function Page({ children }) {
       <GlobalStyles />
       <Typography />
       <BackgroundImageStyles>
-        <Image
-          alt=""
-          src="/assets/images/Background.png"
-          layout="fill"
-          objectFit="cover"
-          quality={100}
-        />
+        <Image alt="" src="/assets/images/Background.png" fill quality={100} />
       </BackgroundImageStyles>
       <LayoutStyles>
         <Header />
diff --git a/pages/_app.js b/pages/_app.js
index ce2cc20..24c6f34 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -5,6 +5,7 @@ import { SWRConfig } from 'swr';
 import Page from '../components/Page';
 import '../components/styles/nprogress.css';
 import fetch from '../lib/fetchJson';
+import Script from 'next/script';
 
 Router.events.on('routeChangeStart', () => NProgress.start());
 Router.events.on('routeChangeComplete', () => NProgress.done());
@@ -65,7 +66,7 @@ function MyApp({ Component, pageProps }) {
             as="font"
             crossOrigin=""
           />
-          <script
+          <Script
             async
             defer
             data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
diff --git a/pages/_document.js b/pages/_document.js
index 8b251bc..8d211de 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -2,13 +2,25 @@ import Document, { Html, Head, NextScript, Main } from 'next/document';
 import { ServerStyleSheet } from 'styled-components';
 
 export default class MyDocument extends Document {
-  static getInitialProps({ renderPage }) {
+  static async getInitialProps(ctx) {
     const sheet = new ServerStyleSheet();
-    const page = renderPage(
-      (App) => (props) => sheet.collectStyles(<App {...props} />)
-    );
-    const styleTags = sheet.getStyleElement();
-    return { ...page, styleTags };
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: [initialProps.styles, sheet.getStyleElement()],
+      };
+    } finally {
+      sheet.seal();
+    }
   }
 
   render() {
diff --git a/pages/photos.js b/pages/photos.js
index 67d5b51..533d7f9 100644
--- a/pages/photos.js
+++ b/pages/photos.js
@@ -69,7 +69,7 @@ export default function PhotosPage({ images }) {
               alt={image?.alt}
               width={image.width}
               height={image.height}
-              objectFit="cover"
+              // objectFit="cover"
               placeholder="blur"
             />
           ))}