Feat/next image layout prop

next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  images: {
+    deviceSizes: [320, 420, 768, 1024, 1200, 1440, 1920],
+  },
+};

package.json

@@ -7,10 +7,9 @@
   "license": "MIT",
   "private": false,
   "dependencies": {
-    "next": "10.0.0",
+    "next": "canary",
     "normalize.css": "8.0.1",
     "postcss": "8.1.4",
-    "prismjs": "1.22.0",
     "react": "17.0.1",
     "react-dom": "17.0.1"
   },
@@ -26,6 +25,7 @@
     "postcss-preset-env": "6.7.0",
     "postcss-reporter": "7.0.1",
     "prettier": "2.1.2",
+    "prismjs": "1.22.0",
     "qs": "6.9.4",
     "react-ga": "3.2.0",
     "remark": "13.0.0",

posts/2020-11-02-migrating-your-website-from-gatsby-to-next-js.md

@@ -15,7 +15,11 @@ One of the most important things to me when I browse the web is the way images l
 
 [gatsby-image](https://www.gatsbyjs.com/plugins/gatsby-image/) does the same, and actually I love it so much I wrote a webpack loader so that I could use it on any project ([@brigad/ideal-image-loader](https://github.com/Brigad/ideal-image-loader)). Next.js also has an [image component](https://nextjs.org/docs/api-reference/next/image) since v10, which is the latest version to date.
 
-I have tried migrating to the new component, but either the images ended up blurry on the screen, or were not optimized (600kb vs 200kb for my hero picture, Next.js VS Gatsby). Also, there is no progressive loading as there is with gatsby-image. I know it is still a work in progress with pending PRs, so I will wait to see if the Next.js can be improved or if I need to use gatsby-image.
+I have tried migrating to the new component, <strike>but either the images ended up blurry on the screen, or were not optimized (600kb vs 200kb for my hero picture, Next.js VS Gatsby).</strike>
+
+Edit: I have used the new `layout` prop, and it is working great! I have also set the `images.deviceSizes` property in `next.configs.js`. You can read my PR on upgrading to the new `layout` prop [here](https://github.com/adrienharnay/website/pull/5/files).
+
+One downside though, next/image doesn't have the same progressive loading feature as gatsby-image.
 
 # Static assets
 

src/components/markdown-page/MarkdownPage.module.scss

@@ -35,11 +35,18 @@
 }
 
 .coverContainer {
+  position: relative;
+
+  img {
+    object-fit: cover;
+    object-position: center center;
+  }
+
   @include breakpoint($small) {
     height: 350px;
     margin: 0 -4vw 4vw;
 
-    > * > * > * {
+    img {
       border-radius: 0;
     }
   }
@@ -48,7 +55,7 @@
     height: 500px;
     margin: 0 -4vw -100px;
 
-    > * > * > * {
+    img {
       border-radius: 0;
     }
   }
@@ -57,27 +64,10 @@
     height: 800px;
     margin: 0 -10vw -165px;
 
-    > * > * > * {
+    img {
       border-radius: 5px;
     }
   }
-
-  > * {
-    width: 100% !important;
-    height: 100% !important;
-
-    > * {
-      height: 100% !important;
-      padding-bottom: 0 !important;
-      > * {
-        height: 100%;
-        object-fit: cover;
-        object-position: center center;
-        background: $lightgrey center center;
-        background-size: cover;
-      }
-    }
-  }
 }
 
 .content {

src/components/markdown-page/MarkdownPage.tsx

@@ -30,9 +30,9 @@ const MarkdownPage: FunctionComponent<MarkdownPageProps> = ({
     <div className={styles.coverContainer}>
       <Image
         src={cover}
-        width={1500}
-        height={1000}
         alt={cover.split('/').slice(-1)[0].split('.')[0]}
+        priority
+        layout="fill"
       />
     </div>
   );

src/components/post-card/PostCard.module.scss

@@ -39,11 +39,20 @@
     text-decoration: none;
 
     .imgBlock {
+      flex: 1;
+      position: relative;
+
+      img {
+        object-fit: cover;
+        object-position: center center;
+      }
+
       @include breakpoint($small) {
         height: 200px;
+        min-height: 200px;
         border-radius: 5px 5px 0 0;
 
-        > * > * > * {
+        img {
           border-radius: 5px 5px 0 0;
           height: 100%;
         }
@@ -52,27 +61,10 @@
       @include breakpoint($mediumAndBig) {
         border-radius: 5px 0 0 5px;
 
-        > * > * > * {
+        img {
           border-radius: 5px 0 0 5px;
         }
       }
-
-      flex: 1;
-
-      > * {
-        width: 100% !important;
-        height: 100% !important;
-
-        > * {
-          height: 100% !important;
-          padding-bottom: 0 !important;
-          > * {
-            height: 100%;
-            object-fit: cover;
-            object-position: center center;
-          }
-        }
-      }
     }
 
     .contentBlock {

src/components/post-card/PostCard.tsx

@@ -17,8 +17,7 @@ const PostCard: FunctionComponent<PostCardProps> = ({ post }) => (
         <div className={styles.imgBlock}>
           <Image
             src={post.cover}
-            width={1500}
-            height={1000}
+            layout="fill"
             alt={post.cover.split('/').slice(-1)[0].split('.')[0]}
           />
         </div>

src/layouts/main-layout/components/PostsListHeader.module.scss

@@ -18,23 +18,20 @@
     background: rgba(0, 0, 0, 0.1);
   }
 
-  .coverContainer > * {
-    overflow: hidden;
-    position: absolute !important;
-    z-index: -1;
-    margin: -12px 0;
-    width: 100%;
-    height: 100%;
-
-    > * {
-      padding-bottom: 0 !important;
-      width: 100%;
-      height: 100%;
-
-      > * {
-        object-fit: cover;
-        object-position: center center;
-      }
+  .imageContainer {
+    .veil {
+      position: absolute;
+      background-color: $black;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      opacity: 0.1;
+    }
+
+    img {
+      object-fit: cover;
+      object-position: center center;
     }
   }
 

src/layouts/main-layout/components/PostsListHeader.tsx

@@ -10,18 +10,15 @@ import styles from './PostsListHeader.module.scss';
 const PostsListHeader: FunctionComponent = () => {
   return (
     <header className={styles.container}>
-      <div className={styles.coverContainer}>
+      <div className={styles.imageContainer}>
         <Image
           src="/images/layouts/main-layout-cover.jpg"
-          width={2738}
-          height={1779}
-          className={styles.cover}
-          priority
           alt="sky full of stars"
-          // TODO: Fix the image proportions when this PR will have landed:
-          // https://github.com/vercel/next.js/pull/18562
-          unoptimized
+          priority
+          quality={85}
+          layout="fill"
         />
+        <div className={styles.veil} />
       </div>
       <div className={styles.content}>
         <h1 className={styles.title}>Adrien Harnay</h1>

yarn.lock

@@ -1101,20 +1101,20 @@
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.0.tgz#6c9eafc78c1529248f8f4d92b0799a712b6052c6"
   integrity sha512-i9YbZPN3QgfighY/1X1Pu118VUz2Fmmhd6b2n0/O8YVgGGfw0FbUYoA97k7FkpGJ+pLCFEDLUmAPPV4D1kpeFw==
 
-"@next/env@10.0.0":
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.0.tgz#eb0239062226a9c8b604d58d4a4204e26c22eb16"
-  integrity sha512-59+6BnOxPoMY64Qy2crDGHtvQgHwIL1SIkWeNiEud1V6ASs59SM9oDGN+Bo/EswII1nn+wQRpMvax0IIN2j+VQ==
+"@next/env@10.0.1-canary.5":
+  version "10.0.1-canary.5"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.1-canary.5.tgz#60997d1fa9482265e19034adc8dbd23640cb553b"
+  integrity sha512-4wAkWLKWbBcXe+lYzorsEbcDSXhvtcvtMAhz9Fh9c7mC4VO+SniaHHVMwl0hPmZhFPLzf+NiAGvU84ZDJsmgSw==
 
-"@next/polyfill-module@10.0.0":
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.0.0.tgz#17f59cb7325a03f23b66b979fccc56d133411b0a"
-  integrity sha512-FLSwwWQaP/sXjlS7w4YFu+oottbo/bjoh+L+YED7dblsaRJT89ifV+h8zvLvh1hCL7FJUYVar4rehvj/VO5T9w==
+"@next/polyfill-module@10.0.1-canary.5":
+  version "10.0.1-canary.5"
+  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.0.1-canary.5.tgz#b9046721c03f06dad8434cc1d172688223eaf637"
+  integrity sha512-YVGgqHcJtK2ZmnZmB10OSKwbWnR8zsZGeigK2+SJwzc2TnirajEg3aFGhOuMHoEvlZCxQU6XkuRxH6KvVLMBrA==
 
-"@next/react-dev-overlay@10.0.0":
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.0.0.tgz#ba1acc79bc9d874f1801a0b312e6a45de74bf425"
-  integrity sha512-HJ44TJXtaGfGxVtljPECZvqw+GctVvBr60Rsedo5A+wU2GIiycJ8n5yUSdc9UiYTnPuxfJFicJec6kgR6GSWKA==
+"@next/react-dev-overlay@10.0.1-canary.5":
+  version "10.0.1-canary.5"
+  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.0.1-canary.5.tgz#2d0b9c5ac41903455b425d6c5ae02d88c042be78"
+  integrity sha512-nUSOzSTtuAi+yOf51sVyF0ijrBFvLH9VnJsG1ENez7eR/rtU+H4xuOJzoMDMgcafD9IHWHH/nChvvf3F7s2cAw==
   dependencies:
     "@babel/code-frame" "7.10.4"
     ally.js "1.4.1"
@@ -1127,10 +1127,10 @@
     stacktrace-parser "0.1.10"
     strip-ansi "6.0.0"
 
-"@next/react-refresh-utils@10.0.0":
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.0.0.tgz#45cdd1ad3b55ac442f8431cdc43ff53c3dc44d16"
-  integrity sha512-V1/oiDWb2C1Do0eZONsKX1aqGNkqCUqxUahIiCjwKFu9c3bps+Ygg4JjtaCd9oycv0KzYImUZnU+nqveFUjxUw==
+"@next/react-refresh-utils@10.0.1-canary.5":
+  version "10.0.1-canary.5"
+  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.0.1-canary.5.tgz#0dac1826f9c175196f6ec236a00748ffb6f3f661"
+  integrity sha512-Qzk2fTHTtlQU2JXnqa3mOm56zWeeewL9kwruI/IWb8OeE1Wf784o3CnheXUQl5KnMQ1bTkSVwbX7ARj33QWKlQ==
 
 "@npmcli/move-file@^1.0.1":
   version "1.0.1"
@@ -4421,10 +4421,10 @@ next-tick@~1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
-next@10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/next/-/next-10.0.0.tgz#fbc82fa69f05bf82fb5c4e160151f38fb9615e99"
-  integrity sha512-hpJkikt6tqwj7DfD5Mizwc1kDsaaS73TQK6lJL+++Ht8QXIEs+KUqTZULgdMk80mDV2Zhzo9/JYMEranWwAFLA==
+next@canary:
+  version "10.0.1-canary.5"
+  resolved "https://registry.yarnpkg.com/next/-/next-10.0.1-canary.5.tgz#d8fbb16184f6fe6b4f8e0c52e5a8d38bbd713a7d"
+  integrity sha512-zK9f8GQ/CrmbBuhHFXPgPuEItuUqFQ3D8VivRVZPTzgcOyI9G6JiXNcm6PeIQ3qLSZBKbNpVwud9SVhSYmknqA==
   dependencies:
     "@ampproject/toolbox-optimizer" "2.7.0-alpha.1"
     "@babel/code-frame" "7.10.4"
@@ -4445,10 +4445,10 @@ next@10.0.0:
     "@babel/runtime" "7.11.2"
     "@babel/types" "7.11.5"
     "@hapi/accept" "5.0.1"
-    "@next/env" "10.0.0"
-    "@next/polyfill-module" "10.0.0"
-    "@next/react-dev-overlay" "10.0.0"
-    "@next/react-refresh-utils" "10.0.0"
+    "@next/env" "10.0.1-canary.5"
+    "@next/polyfill-module" "10.0.1-canary.5"
+    "@next/react-dev-overlay" "10.0.1-canary.5"
+    "@next/react-refresh-utils" "10.0.1-canary.5"
     ast-types "0.13.2"
     babel-plugin-transform-define "2.0.0"
     babel-plugin-transform-react-remove-prop-types "0.4.24"