Next.jsでSSGするときの画像圧縮・webpについて【next/image不使用】

Title

Next.jsでSSGするときの画像圧縮・webpについて【next/image不使用】

Date

2021-08-24

Next.jsで静的サイトの生成(SSG)する際に<Image>next/image)を使うと上手くビルドできず、色々ハマったのでまとめます。

next-optimized-imagesの README を参考に進めます。

https://github.com/cyrilwanner/next-optimized-images

必要パッケージのインストール

まずはnext-optimized-imagesをインストールします。

npm install next-optimized-images

その他一通り必要なパッケージをインストールします。

npm install imagemin-mozjpeg imagemin-optipng imagemin-gifsicle imagemin-svgo svg-sprite-loader webp-loader lqip-loader responsive-loader jimp image-trace-loader

next.config の設定

場合によって異なるかと思いますが、以下のような感じで設定します。

今回は、画像パスを@publicから開始できるようにエイリアスも設定しています。

const path = require('path');
const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');
const { resolve } = require('path');

const nextConfig = {
  webpack: (config) => {
    // 画像パスを@publicから始められるようにエイリアスを設定
    config.resolve.alias['@public'] = resolve(__dirname, 'public');
    return config;
  },
  trailingSlash: true,
  webpack5: false,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')]
  },
  images: {
    disableStaticImages: true
  }
};

// next-optimized-imagesの設定
const imgConfig = {
  inlineImageLimit: 8192,
  imagesFolder: 'images',
  imagesName: '[name]-[hash].[ext]',
  handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif'],
  removeOriginalExtension: false,
  optimizeImages: true,
  optimizeImagesInDev: true,
  mozjpeg: {
    quality: 80
  },
  optipng: {
    optimizationLevel: 3
  },
  pngquant: false,
  gifsicle: {
    interlaced: false,
    optimizationLevel: 3
  },
  svgo: {
    // enable/disable svgo plugins here
  },
  webp: {
    preset: 'default',
    quality: 75
  }
};

module.exports = withPlugins([[optimizedImages, imgConfig]], nextConfig);

これで準備は完了です。

使い方

使う際はrequire()で画像を呼び出します。

それぞれのパターンで使い方を紹介します。

普通に img で使うパターン

export default () => <img src={require('@public/images/my-image.jpg')} />;

inline の svg を使うパターン

export default () => (
  <div
    dangerouslySetInnerHTML={{
      __html: require('@public/images/my-icon.svg?include')
    }}
  />
);

picture を使うパターン

export default () => (
  <picture>
    <source
      srcSet={require('@public/images/my-image.jpg?webp')}
      type="image/webp"
    />
    <source srcSet={require('@public/images/my-image.jpg')} type="image/jpeg" />
    <img src={require('@public/images/my-image.jpg')} />
  </picture>
);

その他パラメーターなどはこちらに詳しく載ってます。

まとめ

本サイトをリニューアルする際に、普通にnext/imageで書いていたところ、build 時にエラーが出ててしまい、結構色々調べて実装できました。

Next.jsSSGする際にはnext-optimized-imagesおすすめです。

制作パートナー(外注)をお探しの制作会社様・広告代理店様

お気軽にお問い合わせください。