Upgrade to Next.js 13

components/all-posts-link.tsx

@@ -7,8 +7,8 @@ interface Props {
 export default function AllPostsLink({ text }: Props) {
   return (
     <div className="mb-10">
-      <Link href="/posts">
-        <a className="underline dark:text-white text-black">{text}</a>
+      <Link className="underline dark:text-white text-black" href="/posts">
+        {text}
       </Link>
     </div>
   );

components/nav-link.tsx

@@ -7,10 +7,11 @@ interface Props {
 
 export default function NavLink({ route, text }: Props) {
   return (
-    <Link href={route}>
-      <a className="hover:ring-2 ring-stone-400 dark:bg-stone-800 dark:hover:bg-stone-900 text-blue-500 hover:text-blue-700 dark:text-blue-300 dark:hover:text-blue-100 px-3 py-2 mt-1 rounded-md text-sm font-medium">
-        {text}
-      </a>
+    <Link
+      className="hover:ring-2 ring-stone-400 dark:bg-stone-800 dark:hover:bg-stone-900 text-blue-500 hover:text-blue-700 dark:text-blue-300 dark:hover:text-blue-100 px-3 py-2 mt-1 rounded-md text-sm font-medium"
+      href={route}
+    >
+      {text}
     </Link>
   );
 }

components/nav-logo.tsx

@@ -3,10 +3,11 @@ import Link from "next/link";
 export default function NavLogo() {
   return (
     <div className="shrink-0 md:flex md:items-center">
-      <Link href="/">
-        <a className="dark:text-blue-300 dark:hover:text-blue-100 hover:text-blue-700 text-blue-500 cursor-pointer text-2xl font-mono font-bold flex items-center flex-none px-2">
-          &lt;Aaron Bos&#47;&gt;
-        </a>
+      <Link
+        className={`dark:text-blue-300 dark:hover:text-blue-100 hover:text-blue-700 text-blue-500 cursor-pointer text-2xl font-mono font-semibold flex items-center flex-none px-2`}
+        href="/"
+      >
+        &lt;Aaron Bos&#47;&gt;
       </Link>
     </div>
   );

components/nav-mobile-link.tsx

@@ -7,10 +7,11 @@ interface Props {
 
 export default function NavMobileLink({ route, text }: Props) {
   return (
-    <Link href={route}>
-      <a className="dark:hover:bg-stone-900 hover:bg-blue-100 text-blue-500 dark:text-blue-300 hover:text-blue-700 dark:hover:text-blue-100 block px-3 py-2 rounded-md text-base font-medium">
-        {text}
-      </a>
+    <Link
+      className="dark:hover:bg-stone-900 hover:bg-blue-100 text-blue-500 dark:text-blue-300 hover:text-blue-700 dark:hover:text-blue-100 block px-3 py-2 rounded-md text-base font-medium"
+      href={route}
+    >
+      {text}
     </Link>
   );
 }

components/post-preview.tsx

@@ -19,10 +19,11 @@ export default function PostPreview({
   return (
     <>
       <div className="py-6 px-3">
-        <Link href={`/posts/${slug}`}>
-          <a className="dark:text-blue-400 text-blue-600 cursor-pointer hover:underline font-semibold text-lg">
-            {title}
-          </a>
+        <Link
+          className="dark:text-blue-400 text-blue-600 cursor-pointer hover:underline font-semibold text-lg"
+          href={`/posts/${slug}`}
+        >
+          {title}
         </Link>
         <div className="my-2 italic dark:text-gray-300 text-gray-600">
           {description}

next.config.js

@@ -2,7 +2,13 @@ module.exports = {
   reactStrictMode: true, // https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode
   swcMinify: true,
   images: {
-    loader: "cloudinary",
-    path: "https://res.cloudinary.com/aaron-bos/image/upload"
-  }
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "res.cloudinary.com",
+        port: "",
+        pathname: "/aaron-bos/image/upload/**",
+      },
+    ],
+  },
 };