2024-08-25

Next.js image optimization for static site

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}
/>