© 2025 JWS

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

  • JavaScript
  • Next.js
  • Image

目次

  1. 必要パッケージのインストール
  2. next.configの設定
  3. 使い方
    1. 普通にimgで使うパターン
    2. inlineのsvgを使うパターン
    3. pictureを使うパターン
  4. まとめ

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

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

[https://github.com/cyrilwanner/next-optimized-images](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.jsでSSGする際にはnext-optimized-imagesおすすめです。

Share

Blogs