Update to Next 13 and all other dependencies. Fix Link tag, Script tag, Image tag, and custom Nav Link tag.

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 ? (
           <>

components/Header.js

@@ -31,9 +31,7 @@ const Header = () => {
     <HeaderStyles>
       <div>
         <Link href="/">
-          <a>
           <h1 className="center">Name & Name</h1>
-          </a>
         </Link>
         {user && user.isLoggedIn === true && !pastWeddingDate ? (
           <>

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>
   );
 }

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>
   );
 };

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 />

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}

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() {

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"
             />
           ))}