4
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

【Next.js】 Next.js11から画像コンポーネントのwidthとheightの指定が不要に

はじめに

先日2021/6/16にNext.js 11が発表されました。

Next.js 11

今回のアップデートでは、いくつもの機能改善が行われていますが、その中でも私がうれしかった改善を1つお伝えしたいと思います。

画像コンポーネントのwidthとheightの指定が不要になった

Before

Next.jsの画像コンポーネントは、widthheightの指定が必須でした。
このため予め画像の縦横の値を確認しなければならず、表示する画像の数が増えてくると、それなりに手間がかかっていました。

具体的には、以下のようなコードで、画像のwidthheightを指定する必要がありました。

import Image from 'next/image'

function Home() {
  return (
    <>
      <Image
        src='/vercel.svg'
        alt='logo'
        width={588}
        height={136}
      />
    </>
  )
}

After

これが今回のNext.js 11のアップデートにより、widthheightの指定が不要になりました。

コードは、以下の様になります。

import Image from 'next/image'
import logo from '../public/vercel.svg'

export default function Home() {
  return (
    <>
      <Image src={logo} alt='logo' />
    </>
  )
}

 2021-06-19 11.43.14.png

上の画像は、コードの実行結果です。
widthheightを指定しなくても縦横比が保たれていることが確認できます。
これで、予め画像を開いて縦横の値を確認する必要がなくなりました。

ただ画像の読み込みは、importで行う必要があります。
直接importで画像を指定することによってwidthheightが自動的に画像コンポーネントに提供されるからです。

もし以下の様なコードでimportを使わずに画像を指定すると、Unhandled Runtime Errorというエラーが発生してしまうので注意して下さい。

import Image from 'next/image'

export default function Home() {
  return (
    <>
      <Image src="/vercel.svg" alt="logo" />
    </>
  )
}

さいごに

画像コンポーネントの機能改善は、私にとって地味ながらもうれしいアップデートでした。

今日現在、新規にNext.jsプロジェクトを作成すると、新しいバージョンであるNext.js 11がインストールされます。
今回紹介した画像コンポーネントの機能も試すことができます。

ぜひ皆さんの環境で、新しいNext.js 11を試してみて下さい。

参考

next-11#automatic-size-detection-local-images

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
4
Help us understand the problem. What are the problem?