Upgrade to Next.js 13 (#5)

* Upgrade to Next.js 13

* simplify changes

Co-authored-by: Mike Fix <mfix@stripe.com>

Author: kejiweixun

components/SideNav.tsx

@@ -22,9 +22,7 @@ export function SideNav() {
               const active = router.pathname === link.href;
               return (
                 <li key={link.href} className={active ? 'active' : ''}>
-                  <Link {...link}>
-                    <a href={link.href}>{link.children}</a>
-                  </Link>
+                  <Link {...link} />
                 </li>
               );
             })}
@@ -54,11 +52,11 @@ export function SideNav() {
             list-style: none;
             margin: 0;
           }
-          li a {
+          li :global(a) {
             text-decoration: none;
           }
-          li a:hover,
-          li.active > a {
+          li :global(a:hover),
+          li.active :global(a) {
             text-decoration: underline;
           }
         `}

components/TableOfContents.tsx

@@ -27,8 +27,8 @@ export function TableOfContents({toc}) {
                 .filter(Boolean)
                 .join(' ')}
             >
-              <Link href={href} passHref>
-                <a>{item.title}</a>
+              <Link href={href}>
+                {item.title}
               </Link>
             </li>
           );
@@ -54,11 +54,11 @@ export function TableOfContents({toc}) {
             list-style-type: none;
             margin: 0 0 1rem;
           }
-          li a {
+          li :global(a) {
             text-decoration: none;
           }
-          li a:hover,
-          li.active a {
+          li :global(a:hover),
+          li.active :global(a) {
             text-decoration: underline;
           }
           li.padded {