Merge pull request #70 from pablopunk/next-images

next/image
pablopunk · Feb 2, 2021 · 9c930b2 · 9c930b2 · vercel · Feb 2, 2021
2 parents 85711e4 + 04d1590
commit 9c930b2
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 68 deletions.
diff --git a/components/pure/Article.tsx b/components/pure/Article.tsx
@@ -19,7 +19,7 @@ export default styled.article`
 
   figure,
   img {
-    width: 100%;
+    max-width: 100%;
     border-radius: 1rem;
     position: relative;
   }

diff --git a/components/pure/HomeCard.tsx b/components/pure/HomeCard.tsx
@@ -3,7 +3,7 @@ import Tag from 'components/pure/Tag'
 import { RiExternalLinkLine } from 'react-icons/ri'
 import { GrFormNextLink } from 'react-icons/gr'
 import Link from 'next/link'
-import { LazyLoadImage } from 'react-lazy-load-image-component'
+import Image from 'next/image'
 
 const imgSize = '60px'
 
@@ -15,19 +15,11 @@ export default function HomeCard({ title, description, img, link, tags }) {
       <a>
         <article className="relative flex items-center px-3 py-4 border-2 shadow-lg rounded-md border-accent2 hover:border-accent group bg-bg2 hover:bg-bg">
           <div className="mr-2" style={{ minWidth: imgSize }}>
-            <LazyLoadImage
+            <Image
               src={img.url}
               alt={img.alt}
               height={imgSize}
               width={imgSize}
-              placeholder={
-                <img
-                  src={img.blurUpThumb}
-                  alt={img.alt}
-                  width={imgSize}
-                  height={imgSize}
-                />
-              }
             />
           </div>
           <div>

diff --git a/lib/api.ts b/lib/api.ts
@@ -63,6 +63,8 @@ const homeQuery = `
         title
         alt
         blurUpThumb(imgixParams: {fm: jpg, q:60})
+        width
+        height
       }
       link
       title
@@ -95,6 +97,8 @@ const portfolioQuery = `
       alt
       title
       blurUpThumb(imgixParams: {fm: jpg, q:60})
+      width
+      height
     }
   }
 `
@@ -207,6 +211,8 @@ export async function getPostBySlug(slug, locale, preview = false) {
           alt
           title
           blurUpThumb(imgixParams: {fm: jpg, q:60})
+          width
+          height
         }
         body(markdown: true)
         ${commonPageQueries}

diff --git a/next.config.js b/next.config.js
@@ -70,6 +70,9 @@ module.exports = {
   async redirects() {
     return rd.map(buildRedirect)
   },
+  images: {
+    domains: ['www.datocms-assets.com'],
+  },
   webpack(config, { dev, isServer }) {
     // use Preact in production
     if (!dev && !isServer) {

diff --git a/package.json b/package.json
@@ -24,7 +24,6 @@
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-icons": "3.11.0",
-    "react-lazy-load-image-component": "^1.5.0-beta.0",
     "react-text-loop": "^2.3.0",
     "reaviz": "^9.3.0",
     "smart-foreground": "^1.0.10",
@@ -36,7 +35,6 @@
   "devDependencies": {
     "@types/node": "^14.0.13",
     "@types/react": "^16.9.38",
-    "@types/react-lazy-load-image-component": "^1.3.0",
     "@types/styled-components": "^4.4.1",
     "@typescript-eslint/eslint-plugin": "^4.11.1",
     "@typescript-eslint/parser": "^4.11.1",

diff --git a/pages/portfolio.tsx b/pages/portfolio.tsx
@@ -2,12 +2,12 @@ import { staticProps } from 'components/data-fetch/withCMS'
 import withLayout from 'components/skeleton/withLayout'
 import React from 'react'
 import styled from 'styled-components'
-import { LazyLoadImage } from 'react-lazy-load-image-component'
 import Repos, { fetchAllReposData } from 'components/data-fetch/Repos'
 import { FaReact, FaNodeJs } from 'react-icons/fa'
 import { SiNextDotJs, SiGraphql } from 'react-icons/si'
 import NpmCharts, { fetchAllNpmData } from 'components/data-fetch/NpmCharts'
 import { _ } from 'lib/locales'
+import Image from 'next/image'
 
 export function go(link: string) {
   window.open(`https://${link}`)
@@ -97,17 +97,11 @@ const Page = ({
               onClick={() => window.open(project.link)}
               className="flex flex-col items-center flex-shrink-0 mr-4 cursor-pointer"
             >
-              <LazyLoadImage
+              <Image
                 src={project.picture.url}
                 alt={project.picture.alt}
                 width="150px"
-                placeholder={
-                  <img
-                    src={project.picture.blurUpThumb}
-                    alt={project.picture.alt}
-                    width="150px"
-                  />
-                }
+                height="100%"
               />
               <strong className="mt-3 text-accent">{project.name}</strong>
             </figure>

diff --git a/pages/posts/[slug].tsx b/pages/posts/[slug].tsx
@@ -4,10 +4,10 @@ import withLayout from 'components/skeleton/withLayout'
 import Link from 'next/link'
 import { _ } from 'lib/locales'
 import { NextSeo } from 'next-seo'
-import { LazyLoadImage } from 'react-lazy-load-image-component'
 import Article from 'components/pure/Article'
 import { IoMdArrowRoundBack } from 'react-icons/io'
 import { useRouter } from 'next/router'
+import Image from 'next/image'
 
 const formatDate = (d) => new Date(d).toLocaleDateString().replace(/-/g, '/')
 
@@ -41,13 +41,11 @@ const Page = ({ post }) => {
       <Article>
         {post.image?.url ? (
           <figure>
-            <LazyLoadImage
+            <Image
               src={post.image.url}
               alt={post.image.alt}
-              title={post.image.title}
-              placeholder={
-                <img src={post.image.blurUpThumb} alt={post.image.alt} />
-              }
+              width={post.image.width}
+              height={post.image.height}
             />
             <h1>{post.title}</h1>
           </figure>

diff --git a/public/favicon/manifest.json b/public/favicon/manifest.json
@@ -1,41 +1,41 @@
 {
- "name": "App",
- "icons": [
-  {
-   "src": "\/favicon\/android-icon-36x36.png",
-   "sizes": "36x36",
-   "type": "image\/png",
-   "density": "0.75"
-  },
-  {
-   "src": "\/favicon\/android-icon-48x48.png",
-   "sizes": "48x48",
-   "type": "image\/png",
-   "density": "1.0"
-  },
-  {
-   "src": "\/favicon\/android-icon-72x72.png",
-   "sizes": "72x72",
-   "type": "image\/png",
-   "density": "1.5"
-  },
-  {
-   "src": "\/favicon\/android-icon-96x96.png",
-   "sizes": "96x96",
-   "type": "image\/png",
-   "density": "2.0"
-  },
-  {
-   "src": "\/favicon\/android-icon-144x144.png",
-   "sizes": "144x144",
-   "type": "image\/png",
-   "density": "3.0"
-  },
-  {
-   "src": "\/favicon\/android-icon-192x192.png",
-   "sizes": "192x192",
-   "type": "image\/png",
-   "density": "4.0"
-  }
- ]
-}
+  "name": "App",
+  "icons": [
+    {
+      "src": "/favicon/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "/favicon/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "/favicon/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "/favicon/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+    },
+    {
+      "src": "/favicon/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+    },
+    {
+      "src": "/favicon/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": "4.0"
+    }
+  ]
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -63,6 +63,8 @@ const homeQuery = ` @@
             title
             alt
             blurUpThumb(imgixParams: {fm: jpg, q:60})
+            width
+            height
           }
           link
           title
@@ Expand Down Expand Up / @@ -95,6 +97,8 @@ const portfolioQuery = ` @@
           alt
           title
           blurUpThumb(imgixParams: {fm: jpg, q:60})
+          width
+          height
         }
       }
     `
@@ Expand Down Expand Up @@
               alt
               title
               blurUpThumb(imgixParams: {fm: jpg, q:60})
+              width
+              height
             }
             body(markdown: true)
             ${commonPageQueries}
@@ Expand Down @@