Fix linter

Author: mateoguzmana

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

src/components/Layout/HomeContent.js

@@ -514,11 +514,13 @@ export function HomeContent() {
 
           <div className="mt-20 px-5 lg:px-0 mb-6 max-w-4xl text-center text-opacity-80">
             <div className="uwu-visible flex justify-center">
-              <img
+              <Image
                 alt="logo by @sawaratsuki1004"
                 title="logo by @sawaratsuki1004"
                 className="uwu-visible mb-10 lg:mb-8 h-24 lg:h-32"
                 src="/images/uwu.png"
+                width={100}
+                height={100}
               />
             </div>
             <Logo className="uwu-hidden text-brand dark:text-brand-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
@@ -805,10 +807,12 @@ const CommunityImages = memo(function CommunityImages({isLazy}) {
                 ? 'rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl'
                 : 'group-hover:rotate-1 group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl rotate-[-2deg]'
             )}>
-            <img
+            <Image
               loading={isLazy ? 'lazy' : 'eager'}
               src={src}
               alt={alt}
+              width={100}
+              height={100}
               className="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"
             />
           </div>
@@ -1565,7 +1569,7 @@ function Cover({background, children}) {
       <div className="absolute inset-0 px-4 py-2 flex items-end bg-gradient-to-t from-black/40 via-black/0">
         {children}
       </div>
-      <img
+      <Image
         src={background}
         width={500}
         height={263}
@@ -1642,11 +1646,13 @@ function Thumbnail({video}) {
         <>
           <div className="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center">
             {image.speakers.map((src, i) => (
-              <img
+              <Image
                 key={i}
                 className="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full"
                 src={src}
                 alt=""
+                width={100}
+                height={100}
               />
             ))}
           </div>

src/components/MDX/MDXComponents.tsx

@@ -6,6 +6,7 @@ import {Children, useContext, useMemo} from 'react';
 import * as React from 'react';
 import cn from 'classnames';
 import type {HTMLAttributes} from 'react';
+import Image from 'next/image';
 
 import CodeBlock from './CodeBlock';
 import {CodeDiagram} from './CodeDiagram';
@@ -285,9 +286,11 @@ function Illustration({
   return (
     <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
       <figure className="my-8 flex justify-center">
-        <img
+        <Image
           src={src}
           alt={alt}
+          width={700}
+          height={300}
           style={{maxHeight: 300}}
           className="rounded-lg"
         />
@@ -321,11 +324,12 @@ function IllustrationBlock({
   const images = imageInfos.map((info, index) => (
     <figure key={index}>
       <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
-        <img
+        <Image
           className="text-primary"
           src={info.src}
           alt={info.alt}
-          height={info.height}
+          width={700}
+          height={info.height || 300}
         />
       </div>
       {info.caption ? (
@@ -455,9 +459,17 @@ function YouTubeIframe(props: any) {
   );
 }
 
-function Image(props: any) {
+function CustomImage(props: any) {
   const {alt, ...rest} = props;
-  return <img alt={alt} className="max-w-[calc(min(700px,100%))]" {...rest} />;
+  return (
+    <Image
+      alt={alt}
+      className="max-w-[calc(min(700px,100%))]"
+      width={700}
+      height={400}
+      {...rest}
+    />
+  );
 }
 
 export const MDXComponents = {
@@ -474,7 +486,7 @@ export const MDXComponents = {
   h5: H5,
   hr: Divider,
   a: Link,
-  img: Image,
+  img: CustomImage,
   BlogCard,
   code: InlineCode,
   pre: CodeBlock,