Merge pull request #24 from replicate/upgrade-next-js

Upgrade Next.js
replicate · Oct 10, 2023 · fb18368 · fb18368 · vercel · Oct 10, 2023
2 parents 375321e + 587f451
commit fb18368
Show file tree

Hide file tree

Showing 7 changed files with 298 additions and 327 deletions.
diff --git a/components/footer.js b/components/footer.js
@@ -11,11 +11,9 @@ export default function Footer({ events, startOver, handleImageDropped }) {
   return (
     <footer className="w-full my-8">
       <div className="text-center">
-        <Link href="/about">
-          <a className="lil-button">
-            <InfoIcon className="icon" />
-            What is this?
-          </a>
+        <Link href="/about" className="lil-button">
+
+          <InfoIcon className="icon" />What is this?
         </Link>
 
         {events.length > 1 && (
@@ -28,47 +26,55 @@ export default function Footer({ events, startOver, handleImageDropped }) {
         <Dropzone onImageDropped={handleImageDropped} />
 
         {events.length > 2 && (
-          <Link href={events.findLast((ev) => ev.image).image}>
-            <a className="lil-button" target="_blank" rel="noopener noreferrer">
-              <DownloadIcon className="icon" />
-              Download image
-            </a>
-          </Link>
+          (<Link
+            href={events.findLast((ev) => ev.image).image}
+            className="lil-button"
+            target="_blank"
+            rel="noopener noreferrer">
+
+            <DownloadIcon className="icon" />Download image
+          </Link>)
         )}
 
-        <Link href="https://github.com/replicate/instruct-pix2pix-demo">
-          <a className="lil-button" target="_blank" rel="noopener noreferrer">
-            <CodeIcon className="icon" />
-            Fork repo
-          </a>
+        <Link
+          href="https://github.com/replicate/instruct-pix2pix-demo"
+          className="lil-button"
+          target="_blank"
+          rel="noopener noreferrer">
+
+          <CodeIcon className="icon" />Fork repo
         </Link>
       </div>
 
       <div className="text-center lil-text mt-8">
       <div className="inline-block py-2 px-4 border border-yellow-200 rounded-lg bg-[#fef6aa]">
       🤔 Are you a developer and want to learn how to build this? Check out the{" "}
-        <Link href="https://github.com/replicate/paint-with-words#readme">
-          <a target="_blank">README</a>
+        <Link
+          href="https://github.com/replicate/paint-with-words#readme"
+          target="_blank">
+          README
         </Link>.
       </div>
       </div>
 
       <div className="text-center lil-text mt-8">
         Powered by{" "}
-        <Link href="https://www.timothybrooks.com/instruct-pix2pix/">
-          <a target="_blank">InstructPix2Pix</a>
+        <Link href="https://www.timothybrooks.com/instruct-pix2pix/" target="_blank">
+          InstructPix2Pix
         </Link>
         ,{" "}
-        <Link href="https://replicate.com/timothybrooks/instruct-pix2pix?utm_source=project&utm_campaign=paintbytext">
-          <a target="_blank">Replicate</a>
+        <Link
+          href="https://replicate.com/timothybrooks/instruct-pix2pix?utm_source=project&utm_campaign=paintbytext"
+          target="_blank">
+          Replicate
         </Link>
         ,{" "}
-        <Link href="https://vercel.com/templates/ai">
-          <a target="_blank">Vercel</a>
+        <Link href="https://vercel.com/templates/ai" target="_blank">
+          Vercel
         </Link>
         , and{" "}
-        <Link href="https://github.com/replicate/instruct-pix2pix-demo">
-          <a target="_blank">GitHub</a>
+        <Link href="https://github.com/replicate/instruct-pix2pix-demo" target="_blank">
+          GitHub
         </Link>
       </div>
     </footer>

diff --git a/components/messages.js b/components/messages.js
@@ -1,5 +1,5 @@
 import { RotateCcw as UndoIcon } from "lucide-react";
-import Image from "next/future/image";
+import Image from "next/image";
 import { Fragment, useEffect, useRef } from "react";
 import PulseLoader from "react-spinners/PulseLoader";
 import Message from "./message";

diff --git a/next.config.js b/next.config.js
@@ -3,17 +3,25 @@ const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
   images: {
-    domains: [
-      "replicate.com",
-      "replicate.delivery",
-      "user-images.githubusercontent.com",
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "replicate.com",
+      },
+      {
+        protocol: "https",
+        hostname: "replicate.delivery",
+      },
+      {
+        protocol: "https",
+        hostname: "*.replicate.delivery",
+      },
+      {
+        protocol: "https",
+        hostname: "user-images.githubusercontent.com",
+      },
     ],
   },
-  experimental: {
-    images: {
-      allowFutureImage: true,
-    },
-  },  
   async redirects() {
     return [
       {