CODEWITHSUNDEEP
javascripthtmlreactjswebpacknext.js
TSTobias
TSTobias

Reputation: 273

Next.js SSG Image Optimization at Build Time

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.

Upvotes: 19

Views: 2863

Answers (2)

user8224814
user8224814

Reputation: 1

I hope this gives you some more ideas...

I had a similar problem and I ended up with a script (partially generated by Claude because I don't want to code logging etc) that builds optimised images.

It uses sharp as the image optimiser.

On build, the NextJS builder runs and build the application and create the static generated site in out folder, then the image optimiser kicks in and creates optimised images and puts them in out folder. The NextJS config has a custom loader which is used by Next to create the paths on the build time.

The repo is here. Please let me know you thoughts on it...

https://github.com/SaadAhmad123/arvo-sample/blob/main/apps/analyzer/scripts/ssg-image-optimizer.js

Upvotes: 0

dous
dous

Reputation: 15

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.

Upvotes: -1

Related Questions