Next.jsで背景イメージを実装する方法

そもそもNext.jsのImageコンポーネントとは

next/image からimportできるコンポーネント。 <img> を拡張していて「画像最適化」を行ってくれるもの。

手元にサイズが最適化された画像を持っているなら話は別ですが、持っていない人はこのコンポーネントを使う方がベターだと思います。

背景画像として使ってみる

1. next/Imageを使う

公式から

export default function Background() {
  return (
    <Image
      alt="Mountains"
      src={mountains}
      placeholder="blur"
      quality={100}
      fill
      sizes="100vw"
      style={{
        objectFit: 'cover',
      }}
    />
  )
}

fillというプロパティを使うといいらしい。

ただ、テキストを表に表示したいという場合は、z-indexの調整が必要です。

また、親のpositionにrelativeを指定するなど、自分以外のところまで修正したいといけない部分がちょっともやっとですね。

2. cssのbackground-imageとして指定

公式から

import { getImageProps } from 'next/image'
 
function getBackgroundImage(srcSet = '') {
  const imageSet = srcSet
    .split(', ')
    .map((str) => {
      const [url, dpi] = str.split(' ')
      return `url("${url}") ${dpi}`
    })
    .join(', ')
  return `image-set(${imageSet})`
}
 
export default function Home() {
  const {
    props: { srcSet },
  } = getImageProps({ alt: '', width: 128, height: 128, src: '/img.png' })
  const backgroundImage = getBackgroundImage(srcSet)
  const style = { height: '100vh', width: '100vw', backgroundImage }
 
  return (
    <main style={style}>
      <h1>Hello World</h1>
    </main>
  )
}

なんかコード多いなーという感じですね。

getImagePropsというものは nextのImageコンポーネントの内部で使われる画像最適化のための関数だそうです。

実装してみようじゃないか

簡単に実装してみました。

感想

どちらを使うか？に関しては、画像最適化という観点ではどちらでも大丈夫そうです。

書き方的に自分が楽な方を選べばいいと思います。

コードのリプレイスを行う場合、もともとのコードで背景イメージをどのように表示していたかにもよるのでその時の判断で使えば大丈夫だと思います。