Next.jsで、画像アップロード時に Webp変換する

概要:

前のNext.jsの、画像アップロードに Webp画像変換を追加する例となります
npm は、sharp　を使う例です

---

環境

• Next.js : 10.1.3
• react: 17.0.2
• node 14
• npm / sharp
• npm / multer

---

関連

https://qiita.com/Black-Yamasan/items/3f3b73e422dce883f498

---

前の参考ページ

https://zenn.dev/knaka0209/books/2f0e049833a8c4/viewer/0a4980

---

参考のコード

https://gist.github.com/kuc-arc-f/2abe3dc7047c598db7a8231bb9cf3d2d

file_upload.js :

webp変換部分で、 quality =75　にした場合

実行すると 指定フォルダに、webp形式画像が保存されます

file_upload.js

const changeWebpImages = (imgPath, outputDir, outputFilePath) => {
  const fileName = outputFilePath.split('/').reverse()[0]; // 拡張子を含む画像ファイル名
  const imgName = fileName.split('.')[0]; // 拡張子を除く画像ファイル名
  sharp(imgPath)
    .webp({
      quality: 75
    })
    .toFile(`${outputDir}${imgName}.webp`, (err) => {
      if ( err ) console.error(err);
      return;
    });
};

....