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

This is one of the recommended methods mentioned in the GitHub issue. I was, however, only able to find documentation on how to do this using third-party image optimization services (such as Cloudflare). It is unclear to me if this technique can be used to do local image optimization at build time.

5. Manually optimize new images before building the project

It may be possible to modify the build script in the package.json file to execute another script that optimizes all recently added images stored outside the public folder and copy those optimized versions into the public folder. Modifying the build script inside the package.json file might break automatic deployment with hosting sites such as Vercel.

---

Obviously, I could just deploy my application using SSR instead of using the export command. But I would like to avoid running a server just for the image optimization feature of Next.js.

Since this issue was last updated on Github a while ago, I was wondering if there are simpler approaches to optimize the images in the /public/ directory of a SSG project when using the export command to build the files.

None

Did you figure something out? Thanks :-) – Pulverable

Unfortunately, no. I eventually migrated my project to Astro which has working image optimization out of the box, and I am quite happy with it. They also improved image handling and optimization a lot with recent releases. – None

Answer 1

I don't know if I missed but did you try local images?

You may try to import local images and use it as src in Image tag.

import Image from 'next/image'
import profilePic from '../public/me.png'
 
export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  )
}

I am new at NextJS. I just thought maybe this can me the answer? At least a step to it.

Bibliogony