Upgrade to Next.js 13. Also upgraded next-auth, mailing + added next/…

…font
jahonn · Nov 10, 2022 · 6b946b8 · 6b946b8
1 parent 9291962
commit 6b946b8
Show file tree

Hide file tree

Showing 31 changed files with 887 additions and 896 deletions.
diff --git a/components/app/links/link-card.tsx b/components/app/links/link-card.tsx
@@ -133,18 +133,19 @@ export default function LinkCard({ props }: { props: LinkProps }) {
                 <span className="sr-only">Download QR</span>
                 <QR className="text-gray-700 transition-all group-hover:text-blue-800" />
               </button>
-              <Link href={`/${slug || "links"}/${encodeURI(key)}`}>
-                <a className="flex items-center space-x-1 rounded-md bg-gray-100 px-2 py-0.5 transition-all duration-75 hover:scale-105 active:scale-95">
-                  <Chart className="h-4 w-4" />
-                  <p className="whitespace-nowrap text-sm text-gray-500">
-                    {isValidating ? (
-                      <LoadingDots color="#71717A" />
-                    ) : (
-                      nFormatter(clicks)
-                    )}
-                    <span className="ml-1 hidden sm:inline-block">clicks</span>
-                  </p>
-                </a>
+              <Link
+                href={`/${slug || "links"}/${encodeURI(key)}`}
+                className="flex items-center space-x-1 rounded-md bg-gray-100 px-2 py-0.5 transition-all duration-75 hover:scale-105 active:scale-95"
+              >
+                <Chart className="h-4 w-4" />
+                <p className="whitespace-nowrap text-sm text-gray-500">
+                  {isValidating ? (
+                    <LoadingDots color="#71717A" />
+                  ) : (
+                    nFormatter(clicks)
+                  )}
+                  <span className="ml-1 hidden sm:inline-block">clicks</span>
+                </p>
               </Link>
               {title && description && image && (
                 <a

diff --git a/components/app/modals/accept-invite-modal.tsx b/components/app/modals/accept-invite-modal.tsx
@@ -95,10 +95,11 @@ function AcceptInviteModal({
             </p>
           </div>
           <div className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:px-16">
-            <Link href="/">
-              <a className="flex h-10 w-full items-center justify-center rounded-md border border-black bg-black text-sm text-white transition-all hover:bg-white hover:text-black focus:outline-none">
-                Back to dashboard
-              </a>
+            <Link
+              href="/"
+              className="flex h-10 w-full items-center justify-center rounded-md border border-black bg-black text-sm text-white transition-all hover:bg-white hover:text-black focus:outline-none"
+            >
+              Back to dashboard
             </Link>
           </div>
         </div>

diff --git a/components/app/no-projects-placeholder.tsx b/components/app/no-projects-placeholder.tsx
@@ -24,10 +24,11 @@ export default function NoProjectsPlaceholder({
       >
         Create a project
       </button>
-      <Link href="/links">
-        <a className="mt-3 text-sm font-medium text-gray-500 transition-all hover:text-gray-800 active:scale-95">
-          Add a Dub.sh link instead
-        </a>
+      <Link
+        href="/links"
+        className="mt-3 text-sm font-medium text-gray-500 transition-all hover:text-gray-800 active:scale-95"
+      >
+        Add a Dub.sh link instead
       </Link>
     </div>
   );

diff --git a/components/app/project-card.tsx b/components/app/project-card.tsx
@@ -25,57 +25,55 @@ export default function ProjectCard({
   );
   return (
     <Link key={slug} href={`/${slug}`}>
-      <a>
-        <div className="flex justify-between rounded-lg bg-white p-6 shadow transition-all hover:shadow-md">
-          <div className="flex items-center space-x-3">
-            <BlurImage
-              src={`https://avatar.tobi.sh/${slug}`}
-              alt={name}
-              className="h-9 w-9 flex-shrink-0 overflow-hidden rounded-full border border-gray-300"
-              width={48}
-              height={48}
-            />
-            <div>
-              <h2 className="text-lg font-medium text-gray-700">{name}</h2>
-              <div className="flex items-center">
-                <p className="text-gray-500">{domain}</p>
-                {domainVerified ? (
-                  <Tooltip content="Verified domain">
-                    <div className="flex w-8 justify-center">
-                      <CheckCircleFill className="h-5 w-5 text-blue-500" />
-                    </div>
-                  </Tooltip>
-                ) : (
-                  <Tooltip
-                    content={
-                      <TooltipContent
-                        title="This domain is not correctly configured. Please configure your domain to
+      <div className="flex justify-between rounded-lg bg-white p-6 shadow transition-all hover:shadow-md">
+        <div className="flex items-center space-x-3">
+          <BlurImage
+            src={`https://avatar.tobi.sh/${slug}`}
+            alt={name}
+            className="h-9 w-9 flex-shrink-0 overflow-hidden rounded-full border border-gray-300"
+            width={48}
+            height={48}
+          />
+          <div>
+            <h2 className="text-lg font-medium text-gray-700">{name}</h2>
+            <div className="flex items-center">
+              <p className="text-gray-500">{domain}</p>
+              {domainVerified ? (
+                <Tooltip content="Verified domain">
+                  <div className="flex w-8 justify-center">
+                    <CheckCircleFill className="h-5 w-5 text-blue-500" />
+                  </div>
+                </Tooltip>
+              ) : (
+                <Tooltip
+                  content={
+                    <TooltipContent
+                      title="This domain is not correctly configured. Please configure your domain to
                   start adding links."
-                        cta="Configure Domain"
-                        ctaLink={`/${slug}/settings`}
-                      />
-                    }
-                  >
-                    <div className="flex w-8 justify-center">
-                      <XCircleFill className="h-5 w-5 text-gray-300" />
-                    </div>
-                  </Tooltip>
-                )}
-              </div>
+                      cta="Configure Domain"
+                      ctaLink={`/${slug}/settings`}
+                    />
+                  }
+                >
+                  <div className="flex w-8 justify-center">
+                    <XCircleFill className="h-5 w-5 text-gray-300" />
+                  </div>
+                </Tooltip>
+              )}
             </div>
           </div>
-          <div className="flex items-center space-x-2">
-            <LinkIcon className="h-5 w-5 text-gray-600" />
-            {isValidating ? (
-              <div className="h-5 w-4 animate-pulse rounded-md bg-gray-200" />
-            ) : (
-              <h2 className="text-lg font-medium text-gray-700">
-                {nFormatter(count)}
-              </h2>
-            )}
-          </div>
         </div>
-      </a>
+        <div className="flex items-center space-x-2">
+          <LinkIcon className="h-5 w-5 text-gray-600" />
+          {isValidating ? (
+            <div className="h-5 w-4 animate-pulse rounded-md bg-gray-200" />
+          ) : (
+            <h2 className="text-lg font-medium text-gray-700">
+              {nFormatter(count)}
+            </h2>
+          )}
+        </div>
+      </div>
     </Link>
   );
 }
diff --git a/components/app/settings/layout.tsx b/components/app/settings/layout.tsx
@@ -53,14 +53,13 @@ export default function SettingsLayout({ children }: { children: ReactNode }) {
       <MaxWidthWrapper className="grid items-start gap-5 py-10 md:grid-cols-5">
         <div className="flex gap-1 md:grid">
           {tabs.map(({ name, href }) => (
-            <Link href={href}>
-              <a
-                className={`${
-                  router.asPath === href ? "font-semibold text-black" : ""
-                } rounded-md p-2.5 text-sm transition-all duration-75 hover:bg-gray-100 active:bg-gray-200`}
-              >
-                {name}
-              </a>
+            <Link
+              href={href}
+              className={`${
+                router.asPath === href ? "font-semibold text-black" : ""
+              } rounded-md p-2.5 text-sm transition-all duration-75 hover:bg-gray-100 active:bg-gray-200`}
+            >
+              {name}
             </Link>
           ))}
         </div>

diff --git a/components/home/features.tsx b/components/home/features.tsx
@@ -25,10 +25,9 @@ const featureList = [
         as="/stats/github"
         shallow
         scroll={false}
+        className="block max-w-fit rounded-full border border-black bg-black px-4 py-1.5 text-sm text-white transition-all hover:bg-white hover:text-black"
       >
-        <a className="block max-w-fit rounded-full border border-black bg-black px-4 py-1.5 text-sm text-white transition-all hover:bg-white hover:text-black">
-          View demo
-        </a>
+        View demo
       </Link>
     ),
     demo: "https://d2vwwcvoksz7ty.cloudfront.net/analytics.mp4",

diff --git a/components/home/globe.tsx b/components/home/globe.tsx
@@ -159,10 +159,9 @@ const GlobeAnimation = ({
                 as="/stats/github"
                 shallow
                 scroll={false}
+                className="mx-auto mt-2 block max-w-fit rounded-full border border-black bg-black px-4 py-1.5 text-sm text-white hover:bg-white hover:text-black sm:mt-4"
               >
-                <a className="mx-auto mt-2 block max-w-fit rounded-full border border-black bg-black px-4 py-1.5 text-sm text-white hover:bg-white hover:text-black sm:mt-4">
-                  View all stats
-                </a>
+                View all stats
               </Link>
             )}
           </motion.div>

diff --git a/components/home/hero.tsx b/components/home/hero.tsx
@@ -29,10 +29,11 @@ const Hero = () => {
       </p>
 
       <div className="mx-auto mt-10 flex max-w-fit space-x-4">
-        <Link href="https://app.dub.sh/register">
-          <a className="rounded-full border border-black bg-black py-2 px-5 text-sm text-white shadow-lg transition-all hover:bg-white hover:text-black">
-            Start For Free
-          </a>
+        <Link
+          href="https://app.dub.sh/register"
+          className="rounded-full border border-black bg-black py-2 px-5 text-sm text-white shadow-lg transition-all hover:bg-white hover:text-black"
+        >
+          Start For Free
         </Link>
         <a
           className="flex items-center justify-center space-x-2 rounded-full border border-gray-300 bg-white py-2 px-5 shadow-lg transition-all hover:border-gray-800"

diff --git a/components/home/link-card.tsx b/components/home/link-card.tsx
@@ -151,18 +151,17 @@ export default function LinkCard({
               as={`/stats/${encodeURI(key)}`}
               shallow
               scroll={false}
+              className="flex items-center space-x-1 rounded-md bg-gray-100 px-2 py-0.5 text-gray-700 transition-all duration-75 hover:scale-105 active:scale-95"
             >
-              <a className="flex items-center space-x-1 rounded-md bg-gray-100 px-2 py-0.5 text-gray-700 transition-all duration-75 hover:scale-105 active:scale-95">
-                <Chart className="h-4 w-4" />
-                <p className="text-sm">
-                  {isValidating ? (
-                    <LoadingDots color="#71717A" />
-                  ) : (
-                    nFormatter(clicks)
-                  )}
-                  <span className="ml-1 hidden sm:inline-block">clicks</span>
-                </p>
-              </a>
+              <Chart className="h-4 w-4" />
+              <p className="text-sm">
+                {isValidating ? (
+                  <LoadingDots color="#71717A" />
+                ) : (
+                  nFormatter(clicks)
+                )}
+                <span className="ml-1 hidden sm:inline-block">clicks</span>
+              </p>
             </Link>
           </div>
           <p className="w-72 truncate text-sm text-gray-500">{url}</p>

diff --git a/components/home/pricing.tsx b/components/home/pricing.tsx
@@ -241,16 +241,15 @@ const Pricing = () => {
               </ul>
               <div className="border-t border-gray-200" />
               <div className="p-5">
-                <Link href={ctaLink}>
-                  <a
-                    className={`${
-                      plan === "Pro"
-                        ? "border border-transparent bg-gradient-to-r from-blue-600 to-cyan-600 text-white hover:border-blue-700 hover:bg-white hover:bg-clip-text hover:text-transparent"
-                        : "border border-gray-200 bg-black text-white hover:border-black hover:bg-white hover:text-black"
-                    } block w-full rounded-full py-2 font-medium transition-all`}
-                  >
-                    {cta}
-                  </a>
+                <Link
+                  href={ctaLink}
+                  className={`${
+                    plan === "Pro"
+                      ? "border border-transparent bg-gradient-to-r from-blue-600 to-cyan-600 text-white hover:border-blue-700 hover:bg-white hover:bg-clip-text hover:text-transparent"
+                      : "border border-gray-200 bg-black text-white hover:border-black hover:bg-white hover:text-black"
+                  } block w-full rounded-full py-2 font-medium transition-all`}
+                >
+                  {cta}
                 </Link>
               </div>
             </div>

diff --git a/components/layout/app/index.tsx b/components/layout/app/index.tsx
@@ -48,17 +48,18 @@ export default function AppLayout({
             <div className="flex h-16 items-center justify-between">
               <div className="flex items-center">
                 <Link href="/">
-                  <a>
-                    <Logo className="h-8 w-8 transition-all duration-75 active:scale-95" />
-                  </a>
+                  <Logo className="h-8 w-8 transition-all duration-75 active:scale-95" />
                 </Link>
                 <Divider className="h-8 w-8 text-gray-200 sm:ml-3" />
                 <ProjectSelect />
                 {key && slug && (
                   <>
                     <Divider className="h-8 w-8 text-gray-200 sm:mr-3" />
-                    <Link href={`/${slug}/${key}`}>
-                      <a className="text-sm font-medium">{key}</a>
+                    <Link
+                      href={`/${slug}/${key}`}
+                      className="text-sm font-medium"
+                    >
+                      {key}
                     </Link>
                   </>
                 )}

diff --git a/components/layout/app/nav-tabs.tsx b/components/layout/app/nav-tabs.tsx
@@ -35,20 +35,20 @@ export default function NavTabs() {
   return (
     <div className="-mb-0.5 flex h-12 items-center justify-start space-x-2">
       {tabs.map(({ name, href }) => (
-        <Link key={href} href={href}>
-          <a
-            className={`border-b-2 p-1 ${
-              // hacky approach to getting the current tab – will replace with useSelectedLayoutSegments when upgrading to Next.js 13
-              router.asPath.split("?")[0].split("/").slice(0, 3).join("/") ===
-              href
-                ? "border-black text-black"
-                : "border-transparent text-gray-600 hover:text-black"
-            }`}
-          >
-            <div className="rounded-md px-3 py-2 transition-all duration-75 hover:bg-gray-100 active:bg-gray-200">
-              <p className="text-sm">{name}</p>
-            </div>
-          </a>
+        <Link
+          key={href}
+          href={href}
+          className={`border-b-2 p-1 ${
+            // hacky approach to getting the current tab – will replace with useSelectedLayoutSegments when upgrading to Next.js 13
+            router.asPath.split("?")[0].split("/").slice(0, 3).join("/") ===
+            href
+              ? "border-black text-black"
+              : "border-transparent text-gray-600 hover:text-black"
+          }`}
+        >
+          <div className="rounded-md px-3 py-2 transition-all duration-75 hover:bg-gray-100 active:bg-gray-200">
+            <p className="text-sm">{name}</p>
+          </div>
         </Link>
       ))}
     </div>

diff --git a/components/layout/home/index.tsx b/components/layout/home/index.tsx
@@ -1,4 +1,4 @@
-import Image from "next/future/image";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { ReactNode } from "react";
@@ -35,15 +35,13 @@ export default function HomeLayout({
                 </a>
               ) : (
                 <Link href="/">
-                  <a>
-                    <Image
-                      src="/_static/logotype.svg"
-                      alt="Dub.sh logo"
-                      width={834}
-                      height={236}
-                      className="w-24"
-                    />
-                  </a>
+                  <Image
+                    src="/_static/logotype.svg"
+                    alt="Dub.sh logo"
+                    width={834}
+                    height={236}
+                    className="w-24"
+                  />
                 </Link>
               )}
             </div>
@@ -78,10 +76,8 @@ export default function HomeLayout({
           </a>
         ) : (
           <Link href="/">
-            <a>
-              <span className="sr-only">Dub.sh Logo</span>
-              <Logo className="h-7 w-7 text-gray-600" />
-            </a>
+            <span className="sr-only">Dub.sh Logo</span>
+            <Logo className="h-7 w-7 text-gray-600" />
           </Link>
         )}
         <a

diff --git a/components/shared/blur-image.tsx b/components/shared/blur-image.tsx
@@ -1,4 +1,4 @@
-import Image, { ImageProps } from "next/future/image";
+import Image, { ImageProps } from "next/image";
 import { useEffect, useState } from "react";
 
 export default function BlurImage(props: ImageProps) {