How to Use Next.js 10’s New Image Component

How to Use Next.js 10’s New Image Component

Are Next.js 10’s built-in image component and automatic image optimization an alternative to Gatsby images? Learn how to use Next.js 10’s new image component

Are Next.js 10’s built-in image component and automatic image optimization an alternative to Gatsby images?

Since version 10.0.0, Next.js has a built-in Image component and automatic image optimization.

The image component, next/image, is an extension of the HTML <img> element that has been evolved for the modern web.

What Does next/image Do Under the Hood?

  1. Automatically serves the images in modern image formats like WebP, which is about 30% smaller than JPEG, if the browser supports it.
  2. Optimize images on demand. Build time won’t change.
  3. Lazy-load the image inside the page only when a certain threshold is reached while scrolling the viewport.
  4. You can decide to use it with Vercel’s internal CDN or other providers like Cloudinary or Akamai.
  5. You can specify different image sizes for different and custom resolutions to be used dynamically.
  6. Automatically changes the quality of the photo to a lower threshold set to 75%. This can be changed for each invocation.

How Can You Use It?

First, you will need to be running Next version 10+:

npm install [email protected] [email protected] [email protected]

Or if you use yarn:

yarn add [email protected] [email protected] [email protected]

How Do I Use It in Practice?

This example page will be converted from the usual img tag:

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <img 
        className="m-2 w-10 sm:w-20 self-center"                                          
        src="/me.png"
        alt="Picture of the author"
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home

Converted to the new 'next/image' format:

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <div className="m-2 w-10 sm:w-20 self-center">
        <Image
            src="/me.png"
            alt="Picture of the author"
            width={500}
            height={500}
        />
      </div>
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home

Move the className outside the Image tag!

You will need to move the className outside of your old img tag due to the changes that Next’s new image component will make at runtime to your resulting HTML code. By moving your classes to an outer element, every style will be applied to your image.

Required props!

You will need to always pass width and height. These props are required, and if you don’t pass them, you will need to pass layout="fill".

Layout types

There are four different types of layout values you can use (the default is intrinsic):

  • fixed — The image dimensions will not change as the viewport changes (no responsiveness).
  • intrinsic — The image will scale the dimensions down for smaller viewports but maintain the original dimensions for larger viewports.
  • responsive — The image will scale the dimensions down for smaller viewports and scale up for larger viewports.
  • fill — The image will stretch both width and height to the dimensions of the parent element.

javascript programming react next image

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How to use Functional Programming in your React app | React Next

In the past few years, the buzz around functional programming has been growing, but it can be challenging to apply theoretical concepts to everyday work. How can we make the code we work on more functional? What advanced patterns can you use, and why should you do that? And what do React hooks have to do with all this? In this talk we’ll have a look at real-life examples and patterns you can use to make React apps more functional.

React Slider: How to Build an Image Slider With React Hooks

React Slider: How to Build an Image Slider With React Hooks. Creation of all the components necessary to display an array of content, as well as the ability to navigate back and forth to each slide in our slider. Adding an autoplay feature. We will dive deeper into React Hooks and optimize the slider both for performance and visual appeal. We will achieve this by tapping into useEffect and some new memoization helpers.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Tendencias Javascript y Web 2020. React, Next.js, Deno

Tendencias Javascript y Web 2020. React, Next.js, Deno. En este video te voy a mencionar algunas herramientas y frameworks que fueron, seguirán siendo o van a ser tendencia en este 2020. Entre ellas están React, Next.js, Deno, los Headless CMS como Strapi, entre otros.