From db6c0f613204c84fe5aceebee3ad6cd5abb8b6eb Mon Sep 17 00:00:00 2001
From: Lee Robinson <me@leerob.io>
Date: Fri, 17 Sep 2021 08:48:11 -0500
Subject: [PATCH 1/3] Update Gatsby migration guide to use image imports.

---
 docs/migrating/from-gatsby.md | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/docs/migrating/from-gatsby.md b/docs/migrating/from-gatsby.md
index 7ee84350424a8..9719a52982b2d 100644
--- a/docs/migrating/from-gatsby.md
+++ b/docs/migrating/from-gatsby.md
@@ -167,7 +167,7 @@ export function getAllPosts() {
 
 ## Image Component and Image Optimization
 
-Since version **10.0.0**, Next.js has a built-in [Image Component and Automatic Image Optimization](/docs/basic-features/image-optimization.md).
+Next.js has a built-in [Image Component and Automatic Image Optimization](/docs/basic-features/image-optimization.md).
 
 The Next.js Image Component, [`next/image`](/docs/api-reference/next/image.md), is an extension of the HTML `<img>` element, evolved for the modern web.
 
@@ -189,16 +189,20 @@ Instead, use the built-in [`next/image`](/docs/api-reference/next/image.md) comp
 
 ```jsx
 import Image from 'next/image'
+import profilePic from '../public/me.png'
 
-export default function Home() {
+function Home() {
   return (
     <>
       <h1>My Homepage</h1>
       <Image
-        src="/me.png"
+        src={profilePic}
         alt="Picture of the author"
-        width={500}
-        height={500}
+        // width={500} automatically provided
+        // height={500} automatically provided
+        // blurDataURL="data:..." automatically provided
+        // Optionally allows to add a blurred version of the image while loading
+        // placeholder="blur"
       />
       <p>Welcome to my homepage!</p>
     </>

From 79ab5641cb3e8f2fd7a81e49b7f27676f15c0de0 Mon Sep 17 00:00:00 2001
From: Lee Robinson <me@leerob.io>
Date: Fri, 17 Sep 2021 08:49:18 -0500
Subject: [PATCH 2/3] Update docs/migrating/from-gatsby.md

---
 docs/migrating/from-gatsby.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/migrating/from-gatsby.md b/docs/migrating/from-gatsby.md
index 9719a52982b2d..d538f0c91fc79 100644
--- a/docs/migrating/from-gatsby.md
+++ b/docs/migrating/from-gatsby.md
@@ -191,7 +191,7 @@ Instead, use the built-in [`next/image`](/docs/api-reference/next/image.md) comp
 import Image from 'next/image'
 import profilePic from '../public/me.png'
 
-function Home() {
+export default function Home() {
   return (
     <>
       <h1>My Homepage</h1>

From 97c3cb33ce7e3f40590af96114a1a7c53b0b7a70 Mon Sep 17 00:00:00 2001
From: Lee Robinson <me@leerob.io>
Date: Fri, 17 Sep 2021 11:39:06 -0500
Subject: [PATCH 3/3] Update docs/migrating/from-gatsby.md

Co-authored-by: Steven <steven@ceriously.com>
---
 docs/migrating/from-gatsby.md | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/docs/migrating/from-gatsby.md b/docs/migrating/from-gatsby.md
index d538f0c91fc79..48771c13dffea 100644
--- a/docs/migrating/from-gatsby.md
+++ b/docs/migrating/from-gatsby.md
@@ -198,11 +198,16 @@ export default function Home() {
       <Image
         src={profilePic}
         alt="Picture of the author"
-        // width={500} automatically provided
-        // height={500} automatically provided
-        // blurDataURL="data:..." automatically provided
-        // Optionally allows to add a blurred version of the image while loading
-        // placeholder="blur"
+        // When "responsive", similar to "fluid" from Gatsby
+        // When "intrinsic", similar to "fluid" with maxWidth from Gatsby
+        // When "fixed", similar to "fixed" from Gatsby
+        layout="responsive"
+        // Optional, similar to "blur-up" from Gatsby
+        placeholder="blur"
+        // Optional, similar to "width" in Gatsby GraphQL
+        width={500}
+        // Optional, similar to "height" in Gatsby GraphQL
+        height={500}
       />
       <p>Welcome to my homepage!</p>
     </>