From 0718d05512c28cf860e9dbba70a0d3758f95ca4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?U=C4=9Fur=20Mercan?=
 <71211251+KeazoN@users.noreply.github.com>
Date: Wed, 4 Dec 2024 13:41:59 +0300
Subject: [PATCH 1/4] Fix: Make width and height mandatory in Next.js Image
 component

---
 packages/next/src/shared/lib/get-img-props.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/next/src/shared/lib/get-img-props.ts b/packages/next/src/shared/lib/get-img-props.ts
index 5e6669667b00a..c1f364653c378 100644
--- a/packages/next/src/shared/lib/get-img-props.ts
+++ b/packages/next/src/shared/lib/get-img-props.ts
@@ -30,8 +30,8 @@ export type ImageProps = Omit<
 > & {
   src: string | StaticImport
   alt: string
-  width?: number | `${number}`
-  height?: number | `${number}`
+  width: number | `${number}`
+  height: number | `${number}`
   fill?: boolean
   loader?: ImageLoader
   quality?: number | `${number}`

From 154bdecc7c489a9963985327bc7d25855aab392d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?U=C4=9Fur=20Mercan?=
 <71211251+KeazoN@users.noreply.github.com>
Date: Wed, 11 Dec 2024 13:44:28 +0300
Subject: [PATCH 2/4] feat: feat: update ImageProps type to enforce width and
 height when fill is

---
 packages/next/src/shared/lib/get-img-props.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/next/src/shared/lib/get-img-props.ts b/packages/next/src/shared/lib/get-img-props.ts
index c1f364653c378..1e224c4b27c96 100644
--- a/packages/next/src/shared/lib/get-img-props.ts
+++ b/packages/next/src/shared/lib/get-img-props.ts
@@ -30,8 +30,8 @@ export type ImageProps = Omit<
 > & {
   src: string | StaticImport
   alt: string
-  width: number | `${number}`
-  height: number | `${number}`
+  width?: number | `${number}`;
+  height?: number | `${number}`;
   fill?: boolean
   loader?: ImageLoader
   quality?: number | `${number}`
@@ -67,7 +67,10 @@ export type ImageProps = Omit<
    * @deprecated This prop does not do anything.
    */
   lazyRoot?: string
-}
+} & (
+  | { fill: true; width?: number | `${number}`; height?: number | `${number}` }
+  | { fill?: false; width: number | `${number}`; height: number | `${number}` }
+);
 
 export type ImgProps = Omit<ImageProps, 'src' | 'loader'> & {
   loading: LoadingValue

From 45a10cc4981418cd19d57740688a7bbbf48b4606 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?U=C4=9Fur=20Mercan?=
 <71211251+KeazoN@users.noreply.github.com>
Date: Wed, 11 Dec 2024 13:46:06 +0300
Subject: [PATCH 3/4] fix: syntax type

---
 packages/next/src/shared/lib/get-img-props.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/next/src/shared/lib/get-img-props.ts b/packages/next/src/shared/lib/get-img-props.ts
index 1e224c4b27c96..87fc6a05fc937 100644
--- a/packages/next/src/shared/lib/get-img-props.ts
+++ b/packages/next/src/shared/lib/get-img-props.ts
@@ -30,8 +30,8 @@ export type ImageProps = Omit<
 > & {
   src: string | StaticImport
   alt: string
-  width?: number | `${number}`;
-  height?: number | `${number}`;
+  width?: number | `${number}`
+  height?: number | `${number}`
   fill?: boolean
   loader?: ImageLoader
   quality?: number | `${number}`

From 0061405c806430cd92c516a5fa49f4457981e665 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?U=C4=9Fur=20Mercan?=
 <71211251+KeazoN@users.noreply.github.com>
Date: Wed, 11 Dec 2024 14:27:50 +0300
Subject: [PATCH 4/4] docs: add explanatory comment for ImageProps type
 behavior

---
 packages/next/src/shared/lib/get-img-props.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/next/src/shared/lib/get-img-props.ts b/packages/next/src/shared/lib/get-img-props.ts
index 87fc6a05fc937..09da90ee79669 100644
--- a/packages/next/src/shared/lib/get-img-props.ts
+++ b/packages/next/src/shared/lib/get-img-props.ts
@@ -67,7 +67,13 @@ export type ImageProps = Omit<
    * @deprecated This prop does not do anything.
    */
   lazyRoot?: string
-} & (
+} 
+/**
+ * This logic ensures:
+ * - When `fill` is `true`, `width` and `height` are optional and can be either numbers or numeric strings.
+ * - When `fill` is `false` (or omitted), `width` and `height` are required and follow the same type rules.
+ */
+& (
   | { fill: true; width?: number | `${number}`; height?: number | `${number}` }
   | { fill?: false; width: number | `${number}`; height: number | `${number}` }
 );