feat: remove no-img-element and use Next.js built-in <Image component

.eslintrc

@@ -47,7 +47,6 @@
         "react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
         "react/require-default-props": "off", // Allow non-defined react props as undefined
         "react/jsx-props-no-spreading": "off", // _app.tsx uses spread operator and also, react-hook-form
-        "@next/next/no-img-element": "off", // We currently not using next/image because it isn't supported with SSG mode
         "@typescript-eslint/comma-dangle": "off", // Avoid conflict rule between Eslint and Prettier
         "@typescript-eslint/consistent-type-imports": "error", // Ensure `import type` is used when it's necessary
         "no-restricted-syntax": [

README.md

@@ -17,25 +17,25 @@ Clone this project and use it to create your own [Next.js](https://nextjs.org) p
         <picture>
           <source media="(prefers-color-scheme: dark)" srcset="https://github.com/ixartz/Next-js-Boilerplate/assets/1328388/a3cd2a25-377b-4c0d-a3d3-bce121df2c94">
           <source media="(prefers-color-scheme: light)" srcset="https://github.com/ixartz/Next-js-Boilerplate/assets/1328388/3459074d-c3e2-46c5-8be4-b836cb7989ea">
-          <img alt="Clerk – Authentication & User Management for Next.js" src="https://github.com/ixartz/Next-js-Boilerplate/assets/1328388/3459074d-c3e2-46c5-8be4-b836cb7989ea" width="260">
+          <img alt="Clerk – Authentication & User Management for Next.js" src="https://github.com/ixartz/Next-js-Boilerplate/assets/1328388/3459074d-c3e2-46c5-8be4-b836cb7989ea">
         </picture>
       </a>
     </td>
     <td width="33%">
       <a href="https://turso.tech/?utm_source=nextjsstarterbp">
-        <img src="public/assets/images/turso.png?raw=true" alt="SQLite Developer Experience" width="260">
+        <img src="public/assets/images/turso.png?raw=true" alt="SQLite Developer Experience">
       </a>
     </td>
     <td width="33%">
       <a href="https://upstash.com/?utm_source=nextjs-boilerplate">
-        <img src="https://raw.githubusercontent.com/upstash/sponsorship/master/redis.png" alt="Upstash" width="260">
+        <img src="https://raw.githubusercontent.com/upstash/sponsorship/master/redis.png" alt="Upstash">
       </a>
     </td>
   </tr>
   <tr height="187px">
     <td style=width="33%">
       <a href="https://nextlessjs.com">
-        <img src="https://creativedesignsguru.com/assets/images/themes/nextlessjs-github-banner.png" alt="React SaaS Boilerplate Next.js" />
+        <img src="public/assets/images/nextlessjs.png?raw=true" alt="React SaaS Boilerplate Next.js" />
       </a>
     </td>
     <td align="center" width="33%">
@@ -306,25 +306,25 @@ See [LICENSE](LICENSE) for more information.
         <picture>
           <source media="(prefers-color-scheme: dark)" srcset="https://github.com/ixartz/Next-js-Boilerplate/assets/1328388/a3cd2a25-377b-4c0d-a3d3-bce121df2c94">
           <source media="(prefers-color-scheme: light)" srcset="https://github.com/ixartz/Next-js-Boilerplate/assets/1328388/3459074d-c3e2-46c5-8be4-b836cb7989ea">
-          <img alt="Clerk – Authentication & User Management for Next.js" src="https://github.com/ixartz/Next-js-Boilerplate/assets/1328388/3459074d-c3e2-46c5-8be4-b836cb7989ea" width="260">
+          <img alt="Clerk – Authentication & User Management for Next.js" src="https://github.com/ixartz/Next-js-Boilerplate/assets/1328388/3459074d-c3e2-46c5-8be4-b836cb7989ea">
         </picture>
       </a>
     </td>
     <td width="33%">
       <a href="https://turso.tech/?utm_source=nextjsstarterbp">
-        <img src="public/assets/images/turso.png?raw=true" alt="SQLite Developer Experience" width="260">
+        <img src="public/assets/images/turso.png?raw=true" alt="SQLite Developer Experience">
       </a>
     </td>
     <td width="33%">
       <a href="https://upstash.com/?utm_source=nextjs-boilerplate">
-        <img src="https://raw.githubusercontent.com/upstash/sponsorship/master/redis.png" alt="Upstash" width="260">
+        <img src="https://raw.githubusercontent.com/upstash/sponsorship/master/redis.png" alt="Upstash">
       </a>
     </td>
   </tr>
   <tr height="187px">
     <td style=width="33%">
       <a href="https://nextlessjs.com">
-        <img src="https://creativedesignsguru.com/assets/images/themes/nextlessjs-github-banner.png" alt="React SaaS Boilerplate Next.js" />
+        <img src="public/assets/images/nextlessjs.png?raw=true" alt="React SaaS Boilerplate Next.js" />
       </a>
     </td>
     <td align="center" width="33%">

src/app/portfolio/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from 'next';
+import Image from 'next/image';
 import Link from 'next/link';
 
 import { Main } from '@/templates/Main';
@@ -21,11 +22,13 @@ const Portfolio = () => (
       {Array.from(Array(6).keys()).map((elt) => (
         <Link className="border-none" key={elt} href={`/portfolio/${elt}`}>
           <div className="overflow-hidden rounded-lg">
-            <img
-              className="h-full w-full object-cover object-center"
-              src="/assets/images/nextjs-starter-banner.png"
-              alt="Portfolio project"
-            />
+            <div className="relative h-28 w-full">
+              <Image
+                src="/assets/images/nextjs-starter-banner.png"
+                alt="Portfolio project"
+                fill
+              />
+            </div>
 
             <div className="bg-blue-200 p-3 text-xl font-bold">
               Portfolio {elt}

src/components/Sponsors.tsx

@@ -1,41 +1,48 @@
+import Image from 'next/image';
+
 const Sponsors = () => (
   <table className="border-collapse">
     <tbody>
       <tr className="h-56">
         <td className="border-2 border-gray-300 p-3">
           <a href="https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate">
-            <img
-              src="assets/images/clerk.png"
+            <Image
+              src="/assets/images/clerk.png"
               alt="Clerk – Authentication & User Management for Next.js"
-              width="260"
+              width={260}
+              height={224}
             />
           </a>
         </td>
         <td className="border-2 border-gray-300 p-3">
           <a href="https://turso.tech/?utm_source=nextjsstarterbp">
-            <img
-              src="assets/images/turso.png"
+            <Image
+              src="/assets/images/turso.png"
               alt="SQLite Developer Experience"
-              width="260"
+              width={260}
+              height={224}
             />
           </a>
         </td>
         <td className="border-2 border-gray-300 p-3">
           <a href="https://upstash.com/?utm_source=nextjs-boilerplate">
-            <img
-              src="https://raw.githubusercontent.com/upstash/sponsorship/master/redis.png"
+            <Image
+              src="/assets/images/redis.png"
               alt="Upstash"
-              width="260"
+              width={260}
+              height={224}
             />
           </a>
         </td>
       </tr>
       <tr className="h-56">
         <td className="border-2 border-gray-300 p-3">
           <a href="https://nextlessjs.com">
-            <img
-              src="https://creativedesignsguru.com/assets/images/themes/nextlessjs-github-banner.png"
+            <Image
+              src="/assets/images/nextlessjs.png"
               alt="React SaaS Boilerplate Next.js"
+              width={260}
+              height={224}
             />
           </a>
         </td>

src/pages/index.tsx

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 
 import { Sponsors } from '@/components/Sponsors';
@@ -17,10 +18,11 @@ const Index = () => {
       }
     >
       <a href="https://github.com/ixartz/Next-js-Boilerplate">
-        <img
+        <Image
           src={`${router.basePath}/assets/images/nextjs-starter-banner.png`}
           alt="Nextjs starter banner"
-          width="600"
+          width={600}
+          height={315}
         />
       </a>
       <h2 className="mt-5 text-2xl font-bold">Sponsors</h2>