Next.js image optimization for static site

2024-08-25

Next.js local image optimization for static site

Official Next.js documentation is still not perfect, and doesn't give me the answer I'm looking for.

config

next.config.js

const nextConfig = {
  reactStrictMode: true,
  eslint: {
    ignoreDuringBuilds: true,
  },
  output: "export",
  images: {
    unoptimized: true,
    loader: "imgix",
    path: "/",
  },
  trailingSlash: true,
}
 
module.exports = nextConfig

usage

// page.tsx
import Image from "next/image"
 
<Image
  src={project.image}
  alt={project.name}
  width={120}
  height={120}
/>