Use next/image and image optimization. (#29)

2026-06-11 09:51:47 +00:00 · 2021-02-05 09:31:09 -06:00
parent 19626576af
commit 5c2f8513a3
15 changed files with 85 additions and 106 deletions
--- 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/).
+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/).
--- 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>
--- 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;
 }
--- 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>
--- 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;
 }
--- 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>
--- 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;
 }
--- 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>
--- 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;
 }
--- 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>
--- 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;
 }
--- 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>
--- 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;
 }
--- 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;
 }
--- 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>