diff --git a/examples/with-typescript-eslint-jest/package.json b/examples/with-typescript-eslint-jest/package.json
index f583221200dd9..64f8a47e954f1 100644
--- a/examples/with-typescript-eslint-jest/package.json
+++ b/examples/with-typescript-eslint-jest/package.json
@@ -31,22 +31,22 @@
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@testing-library/react": "^10.0.1",
-    "@types/jest": "^25.1.4",
-    "@types/node": "^13.9.5",
-    "@types/react": "^16.9.27",
-    "@typescript-eslint/eslint-plugin": "^2.25.0",
-    "@typescript-eslint/parser": "^2.25.0",
-    "babel-jest": "^25.2.3",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.1",
+    "@testing-library/react": "^11.2.5",
+    "@types/jest": "^26.0.20",
+    "@types/node": "^14.14.25",
+    "@types/react": "^17.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.14.2",
+    "@typescript-eslint/parser": "^4.14.2",
+    "babel-jest": "^26.6.3",
+    "eslint": "^7.19.0",
+    "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-react": "^7.19.0",
     "husky": "^4.2.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^25.2.3",
-    "jest-watch-typeahead": "^0.5.0",
+    "jest": "^26.6.3",
+    "jest-watch-typeahead": "^0.6.1",
     "lint-staged": "^10.0.10",
     "prettier": "^2.0.2",
-    "typescript": "^3.8.3"
+    "typescript": "^4.1.3"
   }
 }
diff --git a/examples/with-typescript-eslint-jest/pages/index.tsx b/examples/with-typescript-eslint-jest/pages/index.tsx
index 2003eb0f19478..571bec7d3c0bd 100644
--- a/examples/with-typescript-eslint-jest/pages/index.tsx
+++ b/examples/with-typescript-eslint-jest/pages/index.tsx
@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import Image from 'next/image'
 
 export const Home = (): JSX.Element => (
   <div className="container">
@@ -59,7 +60,8 @@ export const Home = (): JSX.Element => (
         target="_blank"
         rel="noopener noreferrer"
       >
-        Powered by <img src="/vercel.svg" alt="Vercel Logo" className="logo" />
+        Powered by{' '}
+        <Image src="/vercel.svg" alt="Vercel Logo" height={'32'} width={'64'} />
       </a>
     </footer>
 
@@ -182,10 +184,6 @@ export const Home = (): JSX.Element => (
         line-height: 1.5;
       }
 
-      .logo {
-        height: 1em;
-      }
-
       @media (max-width: 600px) {
         .grid {
           width: 100%;
diff --git a/examples/with-typescript-eslint-jest/test/pages/__snapshots__/index.test.tsx.snap b/examples/with-typescript-eslint-jest/test/pages/__snapshots__/index.test.tsx.snap
index 80105b4069a04..a279bd0110fc7 100644
--- a/examples/with-typescript-eslint-jest/test/pages/__snapshots__/index.test.tsx.snap
+++ b/examples/with-typescript-eslint-jest/test/pages/__snapshots__/index.test.tsx.snap
@@ -3,96 +3,96 @@
 exports[`Home page matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="jsx-2250570153 container"
+    class="jsx-1276654382 container"
   >
     <main
-      class="jsx-2250570153"
+      class="jsx-1276654382"
     >
       <h1
-        class="jsx-2250570153 title"
+        class="jsx-1276654382 title"
       >
         Welcome to 
         <a
-          class="jsx-2250570153"
+          class="jsx-1276654382"
           href="https://nextjs.org"
         >
           Next.js!
         </a>
       </h1>
       <p
-        class="jsx-2250570153 description"
+        class="jsx-1276654382 description"
       >
         Get started by editing 
         <code
-          class="jsx-2250570153"
+          class="jsx-1276654382"
         >
           pages/index.tsx
         </code>
       </p>
       <button
-        class="jsx-2250570153"
+        class="jsx-1276654382"
       >
         Test Button
       </button>
       <div
-        class="jsx-2250570153 grid"
+        class="jsx-1276654382 grid"
       >
         <a
-          class="jsx-2250570153 card"
+          class="jsx-1276654382 card"
           href="https://nextjs.org/docs"
         >
           <h3
-            class="jsx-2250570153"
+            class="jsx-1276654382"
           >
             Documentation →
           </h3>
           <p
-            class="jsx-2250570153"
+            class="jsx-1276654382"
           >
             Find in-depth information about Next.js features and API.
           </p>
         </a>
         <a
-          class="jsx-2250570153 card"
+          class="jsx-1276654382 card"
           href="https://nextjs.org/learn"
         >
           <h3
-            class="jsx-2250570153"
+            class="jsx-1276654382"
           >
             Learn →
           </h3>
           <p
-            class="jsx-2250570153"
+            class="jsx-1276654382"
           >
             Learn about Next.js in an interactive course with quizzes!
           </p>
         </a>
         <a
-          class="jsx-2250570153 card"
+          class="jsx-1276654382 card"
           href="https://github.com/vercel/next.js/tree/master/examples"
         >
           <h3
-            class="jsx-2250570153"
+            class="jsx-1276654382"
           >
             Examples →
           </h3>
           <p
-            class="jsx-2250570153"
+            class="jsx-1276654382"
           >
             Discover and deploy boilerplate example Next.js projects.
           </p>
         </a>
         <a
-          class="jsx-2250570153 card"
+          class="jsx-1276654382 card"
           href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
         >
           <h3
-            class="jsx-2250570153"
+            class="jsx-1276654382"
           >
             Deploy →
           </h3>
           <p
-            class="jsx-2250570153"
+            class="jsx-1276654382"
           >
             Instantly deploy your Next.js site to a public URL with Vercel.
           </p>
@@ -100,20 +100,36 @@ exports[`Home page matches snapshot 1`] = `
       </div>
     </main>
     <footer
-      class="jsx-2250570153"
+      class="jsx-1276654382"
     >
       <a
-        class="jsx-2250570153"
+        class="jsx-1276654382"
         href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
         rel="noopener noreferrer"
         target="_blank"
       >
         Powered by 
-        <img
-          alt="Vercel Logo"
-          class="jsx-2250570153 logo"
-          src="/vercel.svg"
-        />
+        <div
+          style="display: inline-block; max-width: 100%; overflow: hidden; position: relative; box-sizing: border-box; margin: 0px;"
+        >
+          <div
+            style="box-sizing: border-box; display: block; max-width: 100%;"
+          >
+            <img
+              alt=""
+              aria-hidden="true"
+              role="presentation"
+              src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIi8+"
+              style="max-width: 100%; display: block; margin: 0px; padding: 0px;"
+            />
+          </div>
+          <img
+            alt="Vercel Logo"
+            decoding="async"
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            style="visibility: hidden; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; box-sizing: border-box; padding: 0px; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
+          />
+        </div>
       </a>
     </footer>
   </div>