Next.js SSG Image Optimization at Build Time

Question

Problem

I am trying to use image optimization for local files inside the public directory in a SSG Next.js project.

There have been quite a few discussions on Github about introducing the possibility to use the next/image for image optimization at build time. However, at this moment, the next/image component does not work with the static site export.

See: https://github.com/vercel/next.js/discussions/19065

---

Solutions Attempts / Ideas

From what I could find, there are a few different actions that can be taken:

1. Set the unoptimized flag in the next.config.js file to completely disable image optimization for all next/image components

While this gets rid of the errors, pictures are now unoptimized in the build output directory.

2. Replace all <Image /> tags with standard <img />

Like the first approach, this leads to images being unoptimized. If you are using ESLint, you would also have to disable the no-img-element rule to get rid of the errors.

3. Use a third-party library specifically for Next.js to enable image optimization at build-time

I was only able to find two libraries that can be used to achieve this. The recommended package in the GitHub thread is called next-optimized-images and seems to be the more popular solution to this problem. However, by looking at the repositories commit history, it becomes obvious that this project has been abandoned and is no longer updated for newer versions of Next.js. The README.md of this project mentions an upcoming third version (found on the canary branch) which hasn't seen a new commit in 3 years as well.

The other project I was able to find is called next-image-export-optimizer. This package is updated quite frequently but it also requires a lot of steps to be set up and necessitates changes throughout the whole application. I dislike the idea of replacing the Image component with some library-specific image component.

4. Implement a custom custom image loader

这是GitHub问题中提到的推荐方法之一。然而，我只能找到有关如何使用第三方图像优化服务（例如 Cloudflare）执行此操作的文档。我不清楚这种技术是否可以用于在构建时进行本地图像优化。

5. 在构建项目之前手动优化新图像

可以修改文件build中的脚本package.json来执行另一个脚本，该脚本优化存储在public文件夹外部的所有最近添加的图像，并将这些优化版本复制到该public文件夹​​中。修改文件build内的脚本package.json可能会破坏 Vercel 等托管站点的自动部署。

---

显然，我可以使用 SSR 而不是使用export命令来部署我的应用程序。但我想避免仅仅为了 Next.js 的图像优化功能而运行服务器。

由于这个问题上次在Github上更新不久，我想知道在使用命令构建文件时是否有更简单的方法来优化/public/SSG项目目录中的图像。export