_next/image 404 on next build && next export

[jericopulvera]

Bug report

Describe the bug

Images are 404 on next build && next export. Works properly next build && next start

To Reproduce

1. npx create-next-app --example image-component image-app
2. cd image-app
3. npx next build && npx next export && cd out && npx serve
4. visit localhost:5000

Screenshots

System information

• OS: macOS Mojave
• Version of Next.js: [e.g. 10.0.0]
• Version of Node.js: [e.g. 12.18.4]

[melvin2016]

Same for me too.

OS: macOS Mojave
Version of Next.js: v10
Version of Node.js: v12.17.0

In the development mode, it's working fine. But when using next export. the images are broken.

[muhaimincs]

same for me. On localhost it's ok but not on Netlify

[mclngl]

Instead of optimizing images at build time, Next.js 10 optimizes images on-demand, as users request them. Unlike static site generators and static-only solutions, your build times aren't increased, whether shipping 10 images or 10 million images.

I guess it probably requires the node server.

Also /_next/image?url=%2Fimages%2Fpicture.png&w=1200&q=75 this is what the endpoint looks like so it makes sense.

Passing the unoptimized prop should fix that, but at the expense of losing most of the benefits (no srcset added).

[nickroberts]

The image component would have to have some sort of static generation mode, where it would function like gatsby-image, and generate the optimized image at build time.

I think if you are using some sort of external service, such as Imgix, this shouldn't be an issue for built times, as it should be able to just generate the urls needed, and doesn't need to actually generate the images themselves.

I haven't used it, but I think the react-imgix component does this today.

[Timer]

I believe the solution here is to fail next export unless if you configure a 3rd party image optimizer service (can't use the default one as it requires next start).

[sethlarkin]

I am having this problem as well trying to deploy on Netlify. Could anyone explain why this doesn't show up after exporting and running next start locally?

[marlonmarcello]

@Timer that should be listed on the documentation as well. I had the same realization as everybody here, I thought that the image would just work.

[nahtnam]

I tried to use next-on-netlify and that doesn't seem to work either. Maybe the serverless handlers that are outputted also don't have the processor?

[eloquentmack]

This post helped me understand and compare next/image and next-optimized-images
https://dev.to/jameswallis/next-image-and-next-optimized-images-a-brief-comparison-4c4i

[Jaynam07]

Any solution to this?

[eloquentmack]

@Jaynam07: I ended up not using next/image, but instead using next-optimized-images. I didn't find any other solution right now, I'm hoping it will be supported at some point (or at least Netlify adds support to next-on-netlify).

[Timer]

We'll need to add something like this to packages/next/export/index.ts:

  if (!options.buildExport) {
    const isDefaultImageLoader =
      !nextConfig.images.loader || nextConfig.images.loader === 'default'
    if (isDefaultImageLoader) {
      Log.error(
        "next export cannot be used with Next.js' default image loader, as it relies on `next start`."
      )
      // stop export ...
    }
  }

However, it's tricky because we cannot error for projects that don't use next/image at all—this would be a breaking change.

[maxwellpopescu]

So I take it the Next Image component will generate the correct URLs/srcsets from Cloud providers which have their own loader. In which case, next export and next/image will be fine.

For those of us serving from a CMS which does not have its own loader in Next/Image, can we expect them to be added in the future? Many CMS CDNs also have on-the-fly image optimization.

As it stands, Cloudinary/Imgix/Akamai loaders are baked into the component, but it wouldn't really be feasible to add loaders for all the other providers like that.

[elitan]

We'll need to add something like this to packages/next/export/index.ts:

  if (!options.buildExport) {
    const isDefaultImageLoader =
      !nextConfig.images.loader || nextConfig.images.loader === 'default'
    if (isDefaultImageLoader) {
      Log.error(
        "next export cannot be used with Next.js' default image loader, as it relies on `next start`."
      )
      // stop export ...
    }
  }

However, it's tricky because we cannot error for projects that don't use next/image at all—this would be a breaking change.

That will show an error during next export I presume, but what about actually generate the images during the next export (and not just for next start)?

EDIT: I made a feature request here: #19065 (Optimize images during next build)

[flaviut]

The discussion is at #19065, specifically.

The maintainers are using 👍s on the discussion to gauge interest. Please 👍 it if you've run into this.

[lokesh14v]

Do images work after the next build is taken
am still facing these 404 issues

[barayuda]

any update about this bug?

Just got an error when tried next/image in NextJS 10
I updated my next.config.js like this
module.exports = { target: "serverless", images: { domains: ["images.ctfassets.net"], }, };
I tried to deploy NextJS+Contentful to Netlify and got these errors

11:36:57 AM: > next export
11:36:57 AM: info  - using build directory: /opt/build/repo/.next
11:36:57 AM: info  - Copying "static build" directory
11:36:58 AM: info  - No "exportPathMap" found in "next.config.js". Generating map from "./pages"
11:36:58 AM: Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
Possible solutions:
11:36:58 AM:   - Use `next start`, which starts the Image Optimization API.
11:36:58 AM:   - Use Vercel to deploy, which supports Image Optimization.
11:36:58 AM:   - Configure a third-party loader in `next.config.js`.
11:36:58 AM: Read more: https://err.sh/next.js/export-image-api
11:36:58 AM:     at exportApp (/opt/build/repo/node_modules/next/dist/export/index.js:14:712)
11:36:58 AM: npm ERR! code ELIFECYCLE
11:36:58 AM: npm ERR! errno 1

Is there next/image loader for Netlify?
Cause, the possibility of fixing mention here https://err.sh/next.js/export-image-api we need to use a loader to optimize external images

[Chamnol007]

Please check your image src if you are using basePath.
I got the same problem, when changing from <img /> to <Next/Image>

[sahanatroam]

having the same issue now on latest Next.js version. the image keep saying 404.

[leerob]

One thing that's important to clarify here: next/image does work with next export if you're specifying a custom loader. This makes sense, because you're not using a server when you export a static site – so you're deferring image optimization to somewhere else that has a sever.

As mentioned above, there's an open issue for running image optimization at build time. Just wanted to clarify the discussion here 😄

[Sir-Chasington]

having the same issue now on latest Next.js version. the image keep saying 404.

Did you ever find a solution, or is there one? I am having the same issue on Heroku

[dallinwright]

Same here, can't export anything at the moment with aws-amplify.

[ameernormie]

I stopped using next/image and simply switched to next-optimized-images.

[inezabonte]

Guess I'll use the same approach.

[jedireza]

having the same issue now on latest Next.js version. the image keep saying 404.

Did you ever find a solution, or is there one? I am having the same issue on Heroku

I just ran into this on Heroku and noticed my logs had something like:

Module did not self-register: '/app/.heroku/heroku-nodejs-plugin/heroku-nodejs-plugin.node'.

See: heroku/heroku-buildpack-nodejs#727

After I disabled Enhanced Language Metrics and restarted the dynos things started working again.

Hope this helps.

[inezabonte]

I deployed my app on Vercel and it works fine there. But again it depends on the use case since we have different needs. If you don't mind switching platforms you can try Vercel. If it's not possible for you then next-optimized-images is another solution.

[owaishanif786]

using next-optimzed-images in next.config.js but still error

module.exports = withPlugins([
  [
    optimizedImages,
    {
      // these are the default values so you don't have to provide them if they are good enough for your use-case.
      // but you can overwrite them here with any valid value you want.
      inlineImageLimit: 8192,
      imagesFolder: 'images',
      imagesName: '[name]-[hash].[ext]',
      handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif'],
      removeOriginalExtension: false,
      optimizeImages: true,
      optimizeImagesInDev: false,
      mozjpeg: {
        quality: 80,
      },
      optipng: {
        optimizationLevel: 3,
      },
      pngquant: false,
      gifsicle: {
        interlaced: true,
        optimizationLevel: 3,
      },
      svgo: {
        // enable/disable svgo plugins here
      },
      webp: {
        preset: 'default',
        quality: 75,
      },
    },
  ],
])

info - No "exportPathMap" found in "next.config.js". Generating map from "./pages"
Error: Image Optimization using Next.js' default loader is not compatible with next export.
Possible solutions:
- Use next start to run a server, which includes the Image Optimization API.
- Use any provider which supports Image Optimization (like Vercel).
- Configure a third-party loader in next.config.js.
- Use the loader prop for next/image.
Read more: https://nextjs.org/docs/messages/export-image-api

[eliobricenov]

using next-optimzed-images in next.config.js but still error

module.exports = withPlugins([
  [
    optimizedImages,
    {
      // these are the default values so you don't have to provide them if they are good enough for your use-case.
      // but you can overwrite them here with any valid value you want.
      inlineImageLimit: 8192,
      imagesFolder: 'images',
      imagesName: '[name]-[hash].[ext]',
      handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif'],
      removeOriginalExtension: false,
      optimizeImages: true,
      optimizeImagesInDev: false,
      mozjpeg: {
        quality: 80,
      },
      optipng: {
        optimizationLevel: 3,
      },
      pngquant: false,
      gifsicle: {
        interlaced: true,
        optimizationLevel: 3,
      },
      svgo: {
        // enable/disable svgo plugins here
      },
      webp: {
        preset: 'default',
        quality: 75,
      },
    },
  ],
])

info - No "exportPathMap" found in "next.config.js". Generating map from "./pages"
Error: Image Optimization using Next.js' default loader is not compatible with next export.
Possible solutions:

• Use next start to run a server, which includes the Image Optimization API.
• Use any provider which supports Image Optimization (like Vercel).
• Configure a third-party loader in next.config.js.
• Use the loader prop for next/image.
  Read more: https://nextjs.org/docs/messages/export-image-api

+1

Still have the error.

[JYeop]

Anyone has resolved this issue? Still have this error after export.

[inezabonte]

@JYeop I switched to vercel for hosting. Solved the issue for me

[chemicalkosek]

using next-optimzed-images in next.config.js but still error

After a quick look it seems you misinterpreted your solution.
Adding next-optimized-images will not make next/image work on next export without third party loaders.
next-optimized-images is not a loader, it's a different image solution than next/image.

If you want to do next export you can swap out all next/image components (<Image />) with next-optimized-images ones.
Or define a loader like imgix or cloudinary.
Or deploy to Vercel.

[nvh95]

This is how I made next/image works with next export. The idea is to wrap next/image into components/Image.js and provide it a custom loader.

// next.config.js
module.exports = {
  reactStrictMode: true,
+  images: {
+   loader: "custom",
+ },
};

// components/Image.js
import NextImage from "next/image";

const customLoader = ({ src }) => {
  return src
}

export default function Image(props) {
  return (
    <NextImage
      {...props}
      loader={customLoader}
    />
  );
}

// pages/index.js
- import Image from 'next/image'
+ import Image from 'components/Image'

export default function Home() {
  return (
    <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
  )
}

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.