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

はじめに

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

Next.js 11

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

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

Before

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

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

import Image from 'next/image'

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

After

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

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

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

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

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

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

もし以下の様なコードで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