From 5c2f8513a3dac5ba5b6c7621d8ea0dda881235ea Mon Sep 17 00:00:00 2001
From: Lee Robinson <me@leerob.io>
Date: Fri, 5 Feb 2021 09:31:09 -0600
Subject: [PATCH] Use next/image and image optimization. (#29)

---
 README.md                                       |  2 +-
 api-routes-starter/components/layout.js         | 17 ++++++++++++-----
 api-routes-starter/components/layout.module.css | 10 ----------
 basics-final/components/layout.js               | 17 ++++++++++++-----
 basics-final/components/layout.module.css       | 10 ----------
 data-fetching-starter/components/layout.js      | 17 ++++++++++++-----
 .../components/layout.module.css                | 10 ----------
 demo/components/layout.js                       | 17 ++++++++++++-----
 demo/components/layout.module.css               | 10 ----------
 dynamic-routes-starter/components/layout.js     | 17 ++++++++++++-----
 .../components/layout.module.css                | 10 ----------
 dynamic-routes-step-1/components/layout.js      | 17 ++++++++++++-----
 .../components/layout.module.css                | 10 ----------
 typescript-final/components/layout.module.css   | 10 ----------
 typescript-final/components/layout.tsx          | 17 ++++++++++++-----
 15 files changed, 85 insertions(+), 106 deletions(-)

diff --git a/README.md b/README.md
index 4f439fa..1812e2a 100644
--- a/README.md
+++ b/README.md
@@ -2,4 +2,4 @@
 
 This repository contains starter templates for [Learn Next.js](https://nextjs.org/learn).
 
-The final result for the basics lesson can be found in the [demo](demo) directory and is available at: [https://next-learn-starter.now.sh/](https://next-learn-starter.now.sh/).
\ No newline at end of file
+The final result for the basics lesson can be found in the [demo](demo) directory and is available at: [https://next-learn-starter.vercel.app/](https://next-learn-starter.vercel.app/).
diff --git a/api-routes-starter/components/layout.js b/api-routes-starter/components/layout.js
index 7c0f470..92f0214 100644
--- a/api-routes-starter/components/layout.js
+++ b/api-routes-starter/components/layout.js
@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import Image from 'next/image'
 import styles from './layout.module.css'
 import utilStyles from '../styles/utils.module.css'
 import Link from 'next/link'
@@ -17,7 +18,7 @@ export default function Layout({ children, home }) {
         />
         <meta
           property="og:image"
-          content={`https://og-image.now.sh/${encodeURI(
+          content={`https://og-image.vercel.app/${encodeURI(
             siteTitle
           )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
         />
@@ -27,9 +28,12 @@ export default function Layout({ children, home }) {
       <header className={styles.header}>
         {home ? (
           <>
-            <img
+            <Image
+              priority
               src="/images/profile.jpg"
-              className={`${styles.headerHomeImage} ${utilStyles.borderCircle}`}
+              className={utilStyles.borderCircle}
+              height={144}
+              width={144}
               alt={name}
             />
             <h1 className={utilStyles.heading2Xl}>{name}</h1>
@@ -38,9 +42,12 @@ export default function Layout({ children, home }) {
           <>
             <Link href="/">
               <a>
-                <img
+                <Image
+                  priority
                   src="/images/profile.jpg"
-                  className={`${styles.headerImage} ${utilStyles.borderCircle}`}
+                  className={utilStyles.borderCircle}
+                  height={108}
+                  width={108}
                   alt={name}
                 />
               </a>
diff --git a/api-routes-starter/components/layout.module.css b/api-routes-starter/components/layout.module.css
index d0e3a8f..d2ea313 100644
--- a/api-routes-starter/components/layout.module.css
+++ b/api-routes-starter/components/layout.module.css
@@ -10,16 +10,6 @@
   align-items: center;
 }
 
-.headerImage {
-  width: 6rem;
-  height: 6rem;
-}
-
-.headerHomeImage {
-  width: 8rem;
-  height: 8rem;
-}
-
 .backToHome {
   margin: 3rem 0 0;
 }
diff --git a/basics-final/components/layout.js b/basics-final/components/layout.js
index 7c0f470..92f0214 100644
--- a/basics-final/components/layout.js
+++ b/basics-final/components/layout.js
@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import Image from 'next/image'
 import styles from './layout.module.css'
 import utilStyles from '../styles/utils.module.css'
 import Link from 'next/link'
@@ -17,7 +18,7 @@ export default function Layout({ children, home }) {
         />
         <meta
           property="og:image"
-          content={`https://og-image.now.sh/${encodeURI(
+          content={`https://og-image.vercel.app/${encodeURI(
             siteTitle
           )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
         />
@@ -27,9 +28,12 @@ export default function Layout({ children, home }) {
       <header className={styles.header}>
         {home ? (
           <>
-            <img
+            <Image
+              priority
               src="/images/profile.jpg"
-              className={`${styles.headerHomeImage} ${utilStyles.borderCircle}`}
+              className={utilStyles.borderCircle}
+              height={144}
+              width={144}
               alt={name}
             />
             <h1 className={utilStyles.heading2Xl}>{name}</h1>
@@ -38,9 +42,12 @@ export default function Layout({ children, home }) {
           <>
             <Link href="/">
               <a>
-                <img
+                <Image
+                  priority
                   src="/images/profile.jpg"
-                  className={`${styles.headerImage} ${utilStyles.borderCircle}`}
+                  className={utilStyles.borderCircle}
+                  height={108}
+                  width={108}
                   alt={name}
                 />
               </a>
diff --git a/basics-final/components/layout.module.css b/basics-final/components/layout.module.css
index d0e3a8f..d2ea313 100644
--- a/basics-final/components/layout.module.css
+++ b/basics-final/components/layout.module.css
@@ -10,16 +10,6 @@
   align-items: center;
 }
 
-.headerImage {
-  width: 6rem;
-  height: 6rem;
-}
-
-.headerHomeImage {
-  width: 8rem;
-  height: 8rem;
-}
-
 .backToHome {
   margin: 3rem 0 0;
 }
diff --git a/data-fetching-starter/components/layout.js b/data-fetching-starter/components/layout.js
index 7c0f470..92f0214 100644
--- a/data-fetching-starter/components/layout.js
+++ b/data-fetching-starter/components/layout.js
@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import Image from 'next/image'
 import styles from './layout.module.css'
 import utilStyles from '../styles/utils.module.css'
 import Link from 'next/link'
@@ -17,7 +18,7 @@ export default function Layout({ children, home }) {
         />
         <meta
           property="og:image"
-          content={`https://og-image.now.sh/${encodeURI(
+          content={`https://og-image.vercel.app/${encodeURI(
             siteTitle
           )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
         />
@@ -27,9 +28,12 @@ export default function Layout({ children, home }) {
       <header className={styles.header}>
         {home ? (
           <>
-            <img
+            <Image
+              priority
               src="/images/profile.jpg"
-              className={`${styles.headerHomeImage} ${utilStyles.borderCircle}`}
+              className={utilStyles.borderCircle}
+              height={144}
+              width={144}
               alt={name}
             />
             <h1 className={utilStyles.heading2Xl}>{name}</h1>
@@ -38,9 +42,12 @@ export default function Layout({ children, home }) {
           <>
             <Link href="/">
               <a>
-                <img
+                <Image
+                  priority
                   src="/images/profile.jpg"
-                  className={`${styles.headerImage} ${utilStyles.borderCircle}`}
+                  className={utilStyles.borderCircle}
+                  height={108}
+                  width={108}
                   alt={name}
                 />
               </a>
diff --git a/data-fetching-starter/components/layout.module.css b/data-fetching-starter/components/layout.module.css
index d0e3a8f..d2ea313 100644
--- a/data-fetching-starter/components/layout.module.css
+++ b/data-fetching-starter/components/layout.module.css
@@ -10,16 +10,6 @@
   align-items: center;
 }
 
-.headerImage {
-  width: 6rem;
-  height: 6rem;
-}
-
-.headerHomeImage {
-  width: 8rem;
-  height: 8rem;
-}
-
 .backToHome {
   margin: 3rem 0 0;
 }
diff --git a/demo/components/layout.js b/demo/components/layout.js
index d593402..a8fa999 100644
--- a/demo/components/layout.js
+++ b/demo/components/layout.js
@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import Image from 'next/image'
 import styles from './layout.module.css'
 import utilStyles from '../styles/utils.module.css'
 import Link from 'next/link'
@@ -17,7 +18,7 @@ export default function Layout({ children, home }) {
         />
         <meta
           property="og:image"
-          content={`https://og-image.now.sh/${encodeURI(
+          content={`https://og-image.vercel.app/${encodeURI(
             siteTitle
           )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
         />
@@ -27,9 +28,12 @@ export default function Layout({ children, home }) {
       <header className={styles.header}>
         {home ? (
           <>
-            <img
+            <Image
+              priority
               src="/images/profile.jpg"
-              className={`${styles.headerHomeImage} ${utilStyles.borderCircle}`}
+              className={utilStyles.borderCircle}
+              height={144}
+              width={144}
               alt={name}
             />
             <h1 className={utilStyles.heading2Xl}>{name}</h1>
@@ -38,9 +42,12 @@ export default function Layout({ children, home }) {
           <>
             <Link href="/">
               <a>
-                <img
+                <Image
+                  priority
                   src="/images/profile.jpg"
-                  className={`${styles.headerImage} ${utilStyles.borderCircle}`}
+                  className={utilStyles.borderCircle}
+                  height={108}
+                  width={108}
                   alt={name}
                 />
               </a>
diff --git a/demo/components/layout.module.css b/demo/components/layout.module.css
index d0e3a8f..d2ea313 100644
--- a/demo/components/layout.module.css
+++ b/demo/components/layout.module.css
@@ -10,16 +10,6 @@
   align-items: center;
 }
 
-.headerImage {
-  width: 6rem;
-  height: 6rem;
-}
-
-.headerHomeImage {
-  width: 8rem;
-  height: 8rem;
-}
-
 .backToHome {
   margin: 3rem 0 0;
 }
diff --git a/dynamic-routes-starter/components/layout.js b/dynamic-routes-starter/components/layout.js
index 7c0f470..92f0214 100644
--- a/dynamic-routes-starter/components/layout.js
+++ b/dynamic-routes-starter/components/layout.js
@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import Image from 'next/image'
 import styles from './layout.module.css'
 import utilStyles from '../styles/utils.module.css'
 import Link from 'next/link'
@@ -17,7 +18,7 @@ export default function Layout({ children, home }) {
         />
         <meta
           property="og:image"
-          content={`https://og-image.now.sh/${encodeURI(
+          content={`https://og-image.vercel.app/${encodeURI(
             siteTitle
           )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
         />
@@ -27,9 +28,12 @@ export default function Layout({ children, home }) {
       <header className={styles.header}>
         {home ? (
           <>
-            <img
+            <Image
+              priority
               src="/images/profile.jpg"
-              className={`${styles.headerHomeImage} ${utilStyles.borderCircle}`}
+              className={utilStyles.borderCircle}
+              height={144}
+              width={144}
               alt={name}
             />
             <h1 className={utilStyles.heading2Xl}>{name}</h1>
@@ -38,9 +42,12 @@ export default function Layout({ children, home }) {
           <>
             <Link href="/">
               <a>
-                <img
+                <Image
+                  priority
                   src="/images/profile.jpg"
-                  className={`${styles.headerImage} ${utilStyles.borderCircle}`}
+                  className={utilStyles.borderCircle}
+                  height={108}
+                  width={108}
                   alt={name}
                 />
               </a>
diff --git a/dynamic-routes-starter/components/layout.module.css b/dynamic-routes-starter/components/layout.module.css
index d0e3a8f..d2ea313 100644
--- a/dynamic-routes-starter/components/layout.module.css
+++ b/dynamic-routes-starter/components/layout.module.css
@@ -10,16 +10,6 @@
   align-items: center;
 }
 
-.headerImage {
-  width: 6rem;
-  height: 6rem;
-}
-
-.headerHomeImage {
-  width: 8rem;
-  height: 8rem;
-}
-
 .backToHome {
   margin: 3rem 0 0;
 }
diff --git a/dynamic-routes-step-1/components/layout.js b/dynamic-routes-step-1/components/layout.js
index 7c0f470..92f0214 100644
--- a/dynamic-routes-step-1/components/layout.js
+++ b/dynamic-routes-step-1/components/layout.js
@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import Image from 'next/image'
 import styles from './layout.module.css'
 import utilStyles from '../styles/utils.module.css'
 import Link from 'next/link'
@@ -17,7 +18,7 @@ export default function Layout({ children, home }) {
         />
         <meta
           property="og:image"
-          content={`https://og-image.now.sh/${encodeURI(
+          content={`https://og-image.vercel.app/${encodeURI(
             siteTitle
           )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
         />
@@ -27,9 +28,12 @@ export default function Layout({ children, home }) {
       <header className={styles.header}>
         {home ? (
           <>
-            <img
+            <Image
+              priority
               src="/images/profile.jpg"
-              className={`${styles.headerHomeImage} ${utilStyles.borderCircle}`}
+              className={utilStyles.borderCircle}
+              height={144}
+              width={144}
               alt={name}
             />
             <h1 className={utilStyles.heading2Xl}>{name}</h1>
@@ -38,9 +42,12 @@ export default function Layout({ children, home }) {
           <>
             <Link href="/">
               <a>
-                <img
+                <Image
+                  priority
                   src="/images/profile.jpg"
-                  className={`${styles.headerImage} ${utilStyles.borderCircle}`}
+                  className={utilStyles.borderCircle}
+                  height={108}
+                  width={108}
                   alt={name}
                 />
               </a>
diff --git a/dynamic-routes-step-1/components/layout.module.css b/dynamic-routes-step-1/components/layout.module.css
index d0e3a8f..d2ea313 100644
--- a/dynamic-routes-step-1/components/layout.module.css
+++ b/dynamic-routes-step-1/components/layout.module.css
@@ -10,16 +10,6 @@
   align-items: center;
 }
 
-.headerImage {
-  width: 6rem;
-  height: 6rem;
-}
-
-.headerHomeImage {
-  width: 8rem;
-  height: 8rem;
-}
-
 .backToHome {
   margin: 3rem 0 0;
 }
diff --git a/typescript-final/components/layout.module.css b/typescript-final/components/layout.module.css
index d0e3a8f..d2ea313 100644
--- a/typescript-final/components/layout.module.css
+++ b/typescript-final/components/layout.module.css
@@ -10,16 +10,6 @@
   align-items: center;
 }
 
-.headerImage {
-  width: 6rem;
-  height: 6rem;
-}
-
-.headerHomeImage {
-  width: 8rem;
-  height: 8rem;
-}
-
 .backToHome {
   margin: 3rem 0 0;
 }
diff --git a/typescript-final/components/layout.tsx b/typescript-final/components/layout.tsx
index 90e3bc6..b22cfd1 100644
--- a/typescript-final/components/layout.tsx
+++ b/typescript-final/components/layout.tsx
@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import Image from 'next/image'
 import styles from './layout.module.css'
 import utilStyles from '../styles/utils.module.css'
 import Link from 'next/link'
@@ -23,7 +24,7 @@ export default function Layout({
         />
         <meta
           property="og:image"
-          content={`https://og-image.now.sh/${encodeURI(
+          content={`https://og-image.vercel.app/${encodeURI(
             siteTitle
           )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
         />
@@ -33,9 +34,12 @@ export default function Layout({
       <header className={styles.header}>
         {home ? (
           <>
-            <img
+            <Image
+              priority
               src="/images/profile.jpg"
-              className={`${styles.headerHomeImage} ${utilStyles.borderCircle}`}
+              className={utilStyles.borderCircle}
+              height={144}
+              width={144}
               alt={name}
             />
             <h1 className={utilStyles.heading2Xl}>{name}</h1>
@@ -44,9 +48,12 @@ export default function Layout({
           <>
             <Link href="/">
               <a>
-                <img
+                <Image
+                  priority
                   src="/images/profile.jpg"
-                  className={`${styles.headerImage} ${utilStyles.borderCircle}`}
+                  className={utilStyles.borderCircle}
+                  height={108}
+                  width={108}
                   alt={name}
                 />
               </a>