Update: Revving 適用

components/base/image.jsx

@@ -13,7 +13,11 @@ const Image = ({ src, ...props }) => {
   const rootRelativePath = useRouter()?.pathname.replace(/[^\/]+$/, "");
   return (
     <NextImage
-      src={(src.startsWith("/") ? "" : rootRelativePath) + src}
+      src={
+        typeof src === "string"
+          ? (src.startsWith("/") ? "" : rootRelativePath) + src
+          : src
+      }
       {...props}
       loader={process.env.isProduct ? null : customLoader}
     />

jsconfig.json

@@ -6,7 +6,8 @@
       "@/next-seo.config": ["next-seo.config"],
       "@/hooks/*": ["hooks/*"],
       "@/components/*": ["components/*"],
-      "@/pages/*": ["pages/*"]
+      "@/pages/*": ["pages/*"],
+      "@/public/*": ["public/*"]
     }
   }
 }

pages/events.jsx

@@ -6,6 +6,10 @@ import Link from "@/components/base/link";
 import Image from "@/components/base/image";
 // styles
 import styles from "./events.module.scss";
+// images
+import hallImage from "@/public/events/hall.png";
+import arenaImage from "@/public/events/arena.png";
+import fieldImage from "@/public/events/field.png";
 
 const Events = () => {
   return (
@@ -18,7 +22,7 @@ const Events = () => {
             <Link href="/map/jhs-f2">講堂</Link>
           </h2>
           <Image
-            src="/events/hall.png"
+            src={hallImage}
             alt="メロンフラッペ、ディベート、ジャグリング、劇団こぎと"
             layout="responsive"
             height={510}
@@ -30,7 +34,7 @@ const Events = () => {
             <Link href="/map/arena">アリーナ</Link>
           </h2>
           <Image
-            src="/events/arena.png"
+            src={arenaImage}
             alt="豪華イベント勢揃い！"
             layout="responsive"
             height={510}
@@ -42,7 +46,7 @@ const Events = () => {
             <Link href="/map/field">グラウンド</Link>
           </h2>
           <Image
-            src="/events/field.png"
+            src={fieldImage}
             alt="野球、サッカー、地学部ロケット、アメフト"
             layout="responsive"
             height={510}

pages/index.jsx

@@ -10,13 +10,15 @@ import Countdown from "@/components/countdown";
 import PromotionVideos from "@/components/promotion-videos";
 // styles
 import styles from "./index.module.scss";
+// images
+import souichiroImage from "@/public/souichiro.jpeg";
 
 const Top = () => {
   return (
     <div className={styles.top}>
       <div>
         <Image
-          src="/souichiro.jpeg"
+          src={souichiroImage}
           alt=""
           layout="fill"
           className={styles["top-image"]}