build: use next-optimized-images@canary

Getting `Error: Input buffer contains unsupported image format`

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["react-optimized-image/plugin"]
+}

components/layout.tsx

@@ -1,4 +1,6 @@
 import Head from "next/head";
+import Img from "react-optimized-image";
+import Logo from "../public/images/logo.png";
 import styles from "../styles/utils.module.css";
 import Link from "next/link";
 
@@ -22,24 +24,14 @@ export default function Layout({ children, home = false }) {
       <header className={styles.header}>
         {home ? (
           <>
-            <img
-              src="/images/logo.png"
-              height={144}
-              width={144}
-              alt=""
-            />
+            <Img src={Logo} height={144} width={144} alt="" />
             <h1 className={styles.heading2Xl}>{title}</h1>
           </>
         ) : (
           <>
             <Link href="/">
               <a>
-                <img
-                  src="/images/logo.png"
-                  height={108}
-                  width={108}
-                  alt=""
-                />
+                <Img src={Logo} height={108} width={108} alt="" />
               </a>
             </Link>
             <h2 className={`${styles.headingLg} ${styles.colorInherit}`}>

images.config.js

@@ -0,0 +1,6 @@
+// see all options: https://github.com/cyrilwanner/next-optimized-images/tree/canary#imagesconfigjs
+module.exports = {
+  default: {
+    webp: true,
+  },
+};

next.config.js

@@ -7,8 +7,8 @@ module.exports = withPlugins([
     optimizedImages,
     {
       /* config for next-optimized-images */
-    }
-  ]
+    },
+  ],
 
   // your other plugins here
 ]);

package.json

@@ -9,8 +9,6 @@
     "date-fns": "^2.28.0",
     "gray-matter": "^4.0.3",
     "next": "latest",
-    "next-compose-plugins": "^2.2.1",
-    "next-optimized-images": "^2.6.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "remark": "^14.0.2",
@@ -21,16 +19,8 @@
     "@types/react": "^17.0.38",
     "eslint": "8.7.0",
     "eslint-config-next": "12.0.9",
-    "image-trace-loader": "^1.0.2",
-    "imagemin-gifsicle": "^7.0.0",
-    "imagemin-mozjpeg": "^10.0.0",
-    "imagemin-optipng": "^8.0.0",
-    "imagemin-svgo": "^10.0.1",
-    "jimp": "^0.16.1",
-    "lqip-loader": "^2.2.1",
-    "responsive-loader": "^2.3.0",
-    "svg-sprite-loader": "^6.0.11",
-    "typescript": "^4.5.5",
-    "webp-loader": "^0.6.0"
+    "next-compose-plugins": "^2.2.1",
+    "next-optimized-images": "^3.0.0-canary.10",
+    "typescript": "^4.5.5"
   }
 }