diff --git a/examples/image-component/components/code.module.css b/examples/image-component/components/code.module.css
new file mode 100644
index 000000000000..d1f6b4076502
--- /dev/null
+++ b/examples/image-component/components/code.module.css
@@ -0,0 +1,10 @@
+.root {
+  color: #be00ff;
+  font-size: 16px;
+  white-space: pre-wrap;
+}
+
+.root::before,
+.root::after {
+  content: '`';
+}
diff --git a/examples/image-component/components/code.tsx b/examples/image-component/components/code.tsx
new file mode 100644
index 000000000000..14029dfa6ba9
--- /dev/null
+++ b/examples/image-component/components/code.tsx
@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react'
+import styles from './code.module.css'
+
+export default function Code(props: PropsWithChildren) {
+  return <code className={styles.root} {...props} />
+}
diff --git a/examples/image-component/components/divider.module.css b/examples/image-component/components/divider.module.css
new file mode 100644
index 000000000000..ee3aba42a728
--- /dev/null
+++ b/examples/image-component/components/divider.module.css
@@ -0,0 +1,5 @@
+.root {
+  border: 0;
+  border-top: 1px solid #333;
+  margin: 1.5rem 0;
+}
diff --git a/examples/image-component/components/divider.tsx b/examples/image-component/components/divider.tsx
new file mode 100644
index 000000000000..6c137551530a
--- /dev/null
+++ b/examples/image-component/components/divider.tsx
@@ -0,0 +1,5 @@
+import styles from './divider.module.css'
+
+export default function Divider() {
+  return <hr className={styles.root} />
+}
diff --git a/examples/image-component/components/view-source.module.css b/examples/image-component/components/layout.module.css
similarity index 73%
rename from examples/image-component/components/view-source.module.css
rename to examples/image-component/components/layout.module.css
index faca5af8557d..759fe82d9ccd 100644
--- a/examples/image-component/components/view-source.module.css
+++ b/examples/image-component/components/layout.module.css
@@ -1,8 +1,19 @@
+.card {
+  max-width: 60rem;
+  box-shadow: -10px 10px 80px rgba(255, 255, 255, 0.1);
+  border: 1px solid #333;
+  border-radius: 8px;
+  padding: 2rem;
+  margin: 0 auto;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
 .svg {
   position: absolute;
   top: 0;
   right: 0;
 }
+
 .arm {
   transform-origin: 130px 106px;
 }
diff --git a/examples/image-component/components/layout.tsx b/examples/image-component/components/layout.tsx
new file mode 100644
index 000000000000..97f09309f742
--- /dev/null
+++ b/examples/image-component/components/layout.tsx
@@ -0,0 +1,33 @@
+import type { PropsWithChildren } from 'react'
+import { useRouter } from 'next/router'
+import styles from './layout.module.css'
+
+export default function Layout({ children }: PropsWithChildren) {
+  const { asPath } = useRouter()
+  const pagePath = `/pages/${asPath || 'index'}.tsx`
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="80"
+        height="80"
+        viewBox="0 0 250 250"
+        fill="#151513"
+        className={styles.svg}
+      >
+        <a
+          title="View Source"
+          href={`https://github.com/vercel/next.js/tree/canary/examples/image-component${pagePath}`}
+        >
+          <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#ffffffba" />
+          <path
+            className={styles.arm}
+            d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
+          />
+          <path d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />
+        </a>
+      </svg>
+      <main className={styles.card}>{children}</main>
+    </>
+  )
+}
diff --git a/examples/image-component/components/view-source.js b/examples/image-component/components/view-source.js
deleted file mode 100644
index be1d66f32389..000000000000
--- a/examples/image-component/components/view-source.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { svg, arm } from './view-source.module.css'
-
-const ViewSource = ({ pathname }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="80"
-    height="80"
-    viewBox="0 0 250 250"
-    fill="#151513"
-    className={svg}
-  >
-    <a
-      title="View Source"
-      href={`https://github.com/vercel/next.js/tree/canary/examples/image-component/${pathname}`}
-    >
-      <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#fff" />
-      <path
-        className={arm}
-        d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
-      />
-      <path d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />
-    </a>
-  </svg>
-)
-
-export default ViewSource
diff --git a/examples/image-component/package.json b/examples/image-component/package.json
index f9170ae254fa..9ad9fa8914c8 100644
--- a/examples/image-component/package.json
+++ b/examples/image-component/package.json
@@ -7,7 +7,12 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.7.14",
+    "@types/react": "18.0.18",
+    "typescript": "4.8.2"
   }
 }
diff --git a/examples/image-component/pages/_app.js b/examples/image-component/pages/_app.js
deleted file mode 100644
index 14b610ee850f..000000000000
--- a/examples/image-component/pages/_app.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import '../app.css'
-
-export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
-}
diff --git a/examples/image-component/pages/_app.tsx b/examples/image-component/pages/_app.tsx
new file mode 100644
index 000000000000..9711c680c7f8
--- /dev/null
+++ b/examples/image-component/pages/_app.tsx
@@ -0,0 +1,11 @@
+import '../styles/globals.css'
+import type { AppProps } from 'next/app'
+import Layout from '../components/layout'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  )
+}
diff --git a/examples/image-component/pages/background.js b/examples/image-component/pages/background.js
deleted file mode 100644
index b3e05ab83890..000000000000
--- a/examples/image-component/pages/background.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import Image from 'next/image'
-import ViewSource from '../components/view-source'
-import { bgWrap, bgText } from '../styles.module.css'
-
-const Background = () => (
-  <div>
-    <ViewSource pathname="pages/background.js" />
-    <div className={bgWrap}>
-      <Image
-        alt="Mountains"
-        src="/mountains.jpg"
-        layout="fill"
-        objectFit="cover"
-        quality={100}
-      />
-    </div>
-    <p className={bgText}>
-      Image Component
-      <br />
-      as a Background
-    </p>
-  </div>
-)
-
-export default Background
diff --git a/examples/image-component/pages/background.tsx b/examples/image-component/pages/background.tsx
new file mode 100644
index 000000000000..5bec7d0a8e24
--- /dev/null
+++ b/examples/image-component/pages/background.tsx
@@ -0,0 +1,41 @@
+import Image from 'next/image'
+
+export default function BackgroundPage() {
+  return (
+    <>
+      <div
+        style={{
+          position: 'fixed',
+          height: '100vh',
+          width: '100vw',
+          overflow: 'hidden',
+          top: 0,
+          left: 0,
+          zIndex: -10,
+          pointerEvents: 'none',
+        }}
+      >
+        <Image
+          alt="Mountains"
+          src="/mountains.jpg"
+          layout="fill"
+          objectFit="cover"
+          quality={100}
+        />
+      </div>
+      <p
+        style={{
+          margin: 0,
+          fontSize: '2rem',
+          lineHeight: '3rem',
+          textAlign: 'center',
+          textShadow: '1px 1px 1px #3c5c5e',
+        }}
+      >
+        Image Component
+        <br />
+        as a Background
+      </p>
+    </>
+  )
+}
diff --git a/examples/image-component/pages/color.js b/examples/image-component/pages/color.js
deleted file mode 100644
index dca5d6d3b972..000000000000
--- a/examples/image-component/pages/color.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import Image from 'next/image'
-import ViewSource from '../components/view-source'
-
-// Pixel GIF code adapted from https://stackoverflow.com/a/33919020/266535
-const keyStr =
-  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
-
-const triplet = (e1, e2, e3) =>
-  keyStr.charAt(e1 >> 2) +
-  keyStr.charAt(((e1 & 3) << 4) | (e2 >> 4)) +
-  keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) +
-  keyStr.charAt(e3 & 63)
-
-const rgbDataURL = (r, g, b) =>
-  `data:image/gif;base64,R0lGODlhAQABAPAA${
-    triplet(0, r, g) + triplet(b, 255, 255)
-  }/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`
-
-const Color = () => (
-  <div>
-    <ViewSource pathname="pages/color.js" />
-    <h1>Image Component With Color Data URL</h1>
-    <Image
-      alt="Dog"
-      src="/dog.jpg"
-      placeholder="blur"
-      blurDataURL={rgbDataURL(237, 181, 6)}
-      width={750}
-      height={1000}
-    />
-    <Image
-      alt="Cat"
-      src="/cat.jpg"
-      placeholder="blur"
-      blurDataURL={rgbDataURL(2, 129, 210)}
-      width={750}
-      height={1000}
-    />
-  </div>
-)
-
-export default Color
diff --git a/examples/image-component/pages/color.tsx b/examples/image-component/pages/color.tsx
new file mode 100644
index 000000000000..f81161349b7b
--- /dev/null
+++ b/examples/image-component/pages/color.tsx
@@ -0,0 +1,40 @@
+import Image from 'next/image'
+
+// Pixel GIF code adapted from https://stackoverflow.com/a/33919020/266535
+const keyStr =
+  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
+
+const triplet = (e1: number, e2: number, e3: number) =>
+  keyStr.charAt(e1 >> 2) +
+  keyStr.charAt(((e1 & 3) << 4) | (e2 >> 4)) +
+  keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) +
+  keyStr.charAt(e3 & 63)
+
+const rgbDataURL = (r: number, g: number, b: number) =>
+  `data:image/gif;base64,R0lGODlhAQABAPAA${
+    triplet(0, r, g) + triplet(b, 255, 255)
+  }/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`
+
+export default function ColorPage() {
+  return (
+    <>
+      <h1>Image Component With Color Data URL</h1>
+      <Image
+        alt="Dog"
+        src="/dog.jpg"
+        placeholder="blur"
+        blurDataURL={rgbDataURL(237, 181, 6)}
+        width={750}
+        height={1000}
+      />
+      <Image
+        alt="Cat"
+        src="/cat.jpg"
+        placeholder="blur"
+        blurDataURL={rgbDataURL(2, 129, 210)}
+        width={750}
+        height={1000}
+      />
+    </>
+  )
+}
diff --git a/examples/image-component/pages/index.js b/examples/image-component/pages/index.tsx
similarity index 87%
rename from examples/image-component/pages/index.js
rename to examples/image-component/pages/index.tsx
index a676dc866602..a8e1b393f33b 100644
--- a/examples/image-component/pages/index.js
+++ b/examples/image-component/pages/index.tsx
@@ -1,15 +1,12 @@
-import styles from '../styles.module.css'
 import Image from 'next/image'
 import Link from 'next/link'
-import ViewSource from '../components/view-source'
+import Code from '../components/code'
+import Divider from '../components/divider'
 import vercel from '../public/vercel.png'
 
-const Code = (p) => <code className={styles.inlineCode} {...p} />
-
-const Index = () => (
-  <div className={styles.container}>
-    <ViewSource pathname="pages/index.js" />
-    <div className={styles.card}>
+export default function IndexPage() {
+  return (
+    <>
       <h1>Image Component with Next.js</h1>
       <p>
         This page demonstrates the usage of the{' '}
@@ -25,7 +22,7 @@ const Index = () => (
         </a>{' '}
         images on-demand as the browser requests them.
       </p>
-      <hr className={styles.hr} />
+      <Divider />
       <h2 id="layout">Layout</h2>
       <p>
         The <Code>layout</Code> property tells the image to respond differently
@@ -62,7 +59,7 @@ const Index = () => (
           </Link>
         </li>
       </ul>
-      <hr className={styles.hr} />
+      <Divider />
       <h2 id="placeholder">Placeholder</h2>
       <p>
         The <Code>placeholder</Code> property tells the image what to do while
@@ -93,7 +90,7 @@ const Index = () => (
           </Link>
         </li>
       </ul>
-      <hr className={styles.hr} />
+      <Divider />
       <h2 id="internal">Internal Image</h2>
       <p>
         The following is an example of a reference to an internal image from the{' '}
@@ -104,7 +101,7 @@ const Index = () => (
         image.
       </p>
       <Image alt="Vercel logo" src={vercel} width={1000} height={1000} />
-      <hr className={styles.hr} />
+      <Divider />
       <h2 id="external">External Image</h2>
       <p>
         The following is an example of a reference to an external image at{' '}
@@ -120,7 +117,7 @@ const Index = () => (
         width={1200}
         height={400}
       />
-      <hr className={styles.hr} />
+      <Divider />
       <h2 id="more">Learn More</h2>
       <p>
         You can optionally configure a cloud provider, device sizes, and more!
@@ -132,8 +129,6 @@ const Index = () => (
         </a>{' '}
         to learn more.
       </p>
-    </div>
-  </div>
-)
-
-export default Index
+    </>
+  )
+}
diff --git a/examples/image-component/pages/layout-fill.js b/examples/image-component/pages/layout-fill.js
deleted file mode 100644
index 526723d427f8..000000000000
--- a/examples/image-component/pages/layout-fill.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import Image from 'next/image'
-import ViewSource from '../components/view-source'
-import mountains from '../public/mountains.jpg'
-
-const Fill = () => (
-  <div>
-    <ViewSource pathname="pages/layout-fill.js" />
-    <h1>Image Component With Layout Fill</h1>
-    <div style={{ position: 'relative', width: '300px', height: '500px' }}>
-      <Image alt="Mountains" src={mountains} layout="fill" objectFit="cover" />
-    </div>
-    <div style={{ position: 'relative', width: '300px', height: '500px' }}>
-      <Image
-        alt="Mountains"
-        src={mountains}
-        layout="fill"
-        objectFit="contain"
-      />
-    </div>
-    <div style={{ position: 'relative', width: '300px', height: '500px' }}>
-      <Image
-        alt="Mountains"
-        src={mountains}
-        layout="fill"
-        objectFit="none"
-        quality={100}
-      />
-    </div>
-  </div>
-)
-
-export default Fill
diff --git a/examples/image-component/pages/layout-fill.tsx b/examples/image-component/pages/layout-fill.tsx
new file mode 100644
index 000000000000..aaac387f1f71
--- /dev/null
+++ b/examples/image-component/pages/layout-fill.tsx
@@ -0,0 +1,35 @@
+import Image from 'next/image'
+import mountains from '../public/mountains.jpg'
+
+export default function FillPage() {
+  return (
+    <>
+      <h1>Image Component With Layout Fill</h1>
+      <div style={{ position: 'relative', width: '300px', height: '500px' }}>
+        <Image
+          alt="Mountains"
+          src={mountains}
+          layout="fill"
+          objectFit="cover"
+        />
+      </div>
+      <div style={{ position: 'relative', width: '300px', height: '500px' }}>
+        <Image
+          alt="Mountains"
+          src={mountains}
+          layout="fill"
+          objectFit="contain"
+        />
+      </div>
+      <div style={{ position: 'relative', width: '300px', height: '500px' }}>
+        <Image
+          alt="Mountains"
+          src={mountains}
+          layout="fill"
+          objectFit="none"
+          quality={100}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/examples/image-component/pages/layout-fixed.js b/examples/image-component/pages/layout-fixed.js
deleted file mode 100644
index cd5e26d8b4e3..000000000000
--- a/examples/image-component/pages/layout-fixed.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Image from 'next/image'
-import ViewSource from '../components/view-source'
-import mountains from '../public/mountains.jpg'
-
-const Fixed = () => (
-  <div>
-    <ViewSource pathname="pages/layout-fixed.js" />
-    <h1>Image Component With Layout Fixed</h1>
-    <Image
-      alt="Mountains"
-      src={mountains}
-      layout="fixed"
-      width={700}
-      height={475}
-    />
-  </div>
-)
-
-export default Fixed
diff --git a/examples/image-component/pages/layout-fixed.tsx b/examples/image-component/pages/layout-fixed.tsx
new file mode 100644
index 000000000000..b8911e12c2ac
--- /dev/null
+++ b/examples/image-component/pages/layout-fixed.tsx
@@ -0,0 +1,17 @@
+import Image from 'next/image'
+import mountains from '../public/mountains.jpg'
+
+export default function FixedPage() {
+  return (
+    <>
+      <h1>Image Component With Layout Fixed</h1>
+      <Image
+        alt="Mountains"
+        src={mountains}
+        layout="fixed"
+        width={700}
+        height={475}
+      />
+    </>
+  )
+}
diff --git a/examples/image-component/pages/layout-intrinsic.js b/examples/image-component/pages/layout-intrinsic.js
deleted file mode 100644
index 1ebfeb98a773..000000000000
--- a/examples/image-component/pages/layout-intrinsic.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Image from 'next/image'
-import ViewSource from '../components/view-source'
-import mountains from '../public/mountains.jpg'
-
-const Intrinsic = () => (
-  <div>
-    <ViewSource pathname="pages/layout-intrinsic.js" />
-    <h1>Image Component With Layout Intrinsic</h1>
-    <Image
-      alt="Mountains"
-      src={mountains}
-      layout="intrinsic"
-      width={700}
-      height={475}
-    />
-  </div>
-)
-
-export default Intrinsic
diff --git a/examples/image-component/pages/layout-intrinsic.tsx b/examples/image-component/pages/layout-intrinsic.tsx
new file mode 100644
index 000000000000..bdf27da99387
--- /dev/null
+++ b/examples/image-component/pages/layout-intrinsic.tsx
@@ -0,0 +1,17 @@
+import Image from 'next/image'
+import mountains from '../public/mountains.jpg'
+
+export default function Intrinsic() {
+  return (
+    <>
+      <h1>Image Component With Layout Intrinsic</h1>
+      <Image
+        alt="Mountains"
+        src={mountains}
+        layout="intrinsic"
+        width={700}
+        height={475}
+      />
+    </>
+  )
+}
diff --git a/examples/image-component/pages/layout-responsive.js b/examples/image-component/pages/layout-responsive.js
deleted file mode 100644
index 4cfc6462afc7..000000000000
--- a/examples/image-component/pages/layout-responsive.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Image from 'next/image'
-import ViewSource from '../components/view-source'
-import mountains from '../public/mountains.jpg'
-
-const Responsive = () => (
-  <div>
-    <ViewSource pathname="pages/layout-responsive.js" />
-    <h1>Image Component With Layout Responsive</h1>
-    <Image
-      alt="Mountains"
-      src={mountains}
-      layout="responsive"
-      width={700}
-      height={475}
-    />
-  </div>
-)
-
-export default Responsive
diff --git a/examples/image-component/pages/layout-responsive.tsx b/examples/image-component/pages/layout-responsive.tsx
new file mode 100644
index 000000000000..a5468a2e78ac
--- /dev/null
+++ b/examples/image-component/pages/layout-responsive.tsx
@@ -0,0 +1,17 @@
+import Image from 'next/image'
+import mountains from '../public/mountains.jpg'
+
+export default function Responsive() {
+  return (
+    <>
+      <h1>Image Component With Layout Responsive</h1>
+      <Image
+        alt="Mountains"
+        src={mountains}
+        layout="responsive"
+        width={700}
+        height={475}
+      />
+    </>
+  )
+}
diff --git a/examples/image-component/pages/placeholder.js b/examples/image-component/pages/placeholder.js
deleted file mode 100644
index f044b3138dd7..000000000000
--- a/examples/image-component/pages/placeholder.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Image from 'next/image'
-import ViewSource from '../components/view-source'
-import mountains from '../public/mountains.jpg'
-
-const PlaceholderBlur = () => (
-  <div>
-    <ViewSource pathname="pages/placeholder.js" />
-    <h1>Image Component With Placeholder Blur</h1>
-    <Image
-      alt="Mountains"
-      src={mountains}
-      placeholder="blur"
-      width={700}
-      height={475}
-    />
-  </div>
-)
-
-export default PlaceholderBlur
diff --git a/examples/image-component/pages/placeholder.tsx b/examples/image-component/pages/placeholder.tsx
new file mode 100644
index 000000000000..e224f4cd888e
--- /dev/null
+++ b/examples/image-component/pages/placeholder.tsx
@@ -0,0 +1,17 @@
+import Image from 'next/image'
+import mountains from '../public/mountains.jpg'
+
+export default function PlaceholderPage() {
+  return (
+    <>
+      <h1>Image Component With Placeholder Blur</h1>
+      <Image
+        alt="Mountains"
+        src={mountains}
+        placeholder="blur"
+        width={700}
+        height={475}
+      />
+    </>
+  )
+}
diff --git a/examples/image-component/pages/shimmer.js b/examples/image-component/pages/shimmer.js
deleted file mode 100644
index f38e018e4ddc..000000000000
--- a/examples/image-component/pages/shimmer.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import Image from 'next/image'
-import ViewSource from '../components/view-source'
-
-const shimmer = (w, h) => `
-<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <linearGradient id="g">
-      <stop stop-color="#333" offset="20%" />
-      <stop stop-color="#222" offset="50%" />
-      <stop stop-color="#333" offset="70%" />
-    </linearGradient>
-  </defs>
-  <rect width="${w}" height="${h}" fill="#333" />
-  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
-  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
-</svg>`
-
-const toBase64 = (str) =>
-  typeof window === 'undefined'
-    ? Buffer.from(str).toString('base64')
-    : window.btoa(str)
-
-const Shimmer = () => (
-  <div>
-    <ViewSource pathname="pages/shimmer.js" />
-    <h1>Image Component With Shimmer Data URL</h1>
-    <Image
-      alt="Mountains"
-      src="/mountains.jpg"
-      placeholder="blur"
-      blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
-      width={700}
-      height={475}
-    />
-  </div>
-)
-
-export default Shimmer
diff --git a/examples/image-component/pages/shimmer.tsx b/examples/image-component/pages/shimmer.tsx
new file mode 100644
index 000000000000..bcdad7faff59
--- /dev/null
+++ b/examples/image-component/pages/shimmer.tsx
@@ -0,0 +1,36 @@
+import Image from 'next/image'
+
+const shimmer = (w: number, h: number) =>
+  `<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+      <linearGradient id="g">
+        <stop stop-color="#333" offset="20%" />
+        <stop stop-color="#222" offset="50%" />
+        <stop stop-color="#333" offset="70%" />
+      </linearGradient>
+    </defs>
+    <rect width="${w}" height="${h}" fill="#333" />
+    <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+    <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+  </svg>`
+
+const toBase64 = (str: string) =>
+  typeof window === 'undefined'
+    ? Buffer.from(str).toString('base64')
+    : window.btoa(str)
+
+export default function Shimmer() {
+  return (
+    <>
+      <h1>Image Component With Shimmer Data URL</h1>
+      <Image
+        alt="Mountains"
+        src="/mountains.jpg"
+        placeholder="blur"
+        blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+        width={700}
+        height={475}
+      />
+    </>
+  )
+}
diff --git a/examples/image-component/styles.module.css b/examples/image-component/styles.module.css
deleted file mode 100644
index 2e3e92d886a7..000000000000
--- a/examples/image-component/styles.module.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.container {
-  padding: 4rem 1rem;
-}
-
-.container p {
-  margin: 1.5rem 0;
-}
-
-.card {
-  max-width: 60rem;
-  box-shadow: -10px 10px 80px rgba(255, 255, 255, 0.1);
-  border: 1px solid #333;
-  border-radius: 8px;
-  padding: 2rem;
-  margin: 0 auto;
-}
-
-.inlineCode {
-  color: #be00ff;
-  font-size: 16px;
-  white-space: pre-wrap;
-}
-
-.inlineCode::before,
-.inlineCode::after {
-  content: '`';
-}
-
-.hr {
-  border: 0;
-  border-top: 1px solid #333;
-  margin: 1.5rem 0;
-}
-
-.bgWrap {
-  position: fixed;
-  height: 100vh;
-  width: 100vw;
-  overflow: hidden;
-  z-index: -1;
-}
-
-.bgText {
-  margin: 0;
-  font-size: 2rem;
-  line-height: 3rem;
-  text-align: center;
-  padding-top: 40vh;
-  text-shadow: 1px 1px 1px #3c5c5e;
-}
diff --git a/examples/image-component/app.css b/examples/image-component/styles/globals.css
similarity index 81%
rename from examples/image-component/app.css
rename to examples/image-component/styles/globals.css
index d26ed7583b62..d542ffb06a5b 100644
--- a/examples/image-component/app.css
+++ b/examples/image-component/styles/globals.css
@@ -6,6 +6,14 @@ body {
   color: white;
 }
 
+#__next {
+  padding: 4rem 1rem;
+}
+
+#__next p {
+  margin: 1.5rem 0;
+}
+
 a {
   cursor: pointer;
   color: #0076ff;
diff --git a/examples/image-component/tsconfig.json b/examples/image-component/tsconfig.json
new file mode 100644
index 000000000000..50bcb22f653d
--- /dev/null
+++ b/examples/image-component/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}