NextJS Build rendering 404 images

[marfin-lab]

Hi,

I’m new to deployments through netlify and I’m having a problem with my current build.

I develop a nextJS application locally, and yesterday I had a problem using a native component called next/image. It didn’t generate 5 images from my index page. But so many others worked. And the strange thing is, minutes ago, it worked normally.

As an solution attempt, I tried to redo my node_modules, since it was the webpack that was stuck without being able to generate the static assets. I deleted the node_modules folder, and ran an npm install to remake it, and with that it worked.

However, in my netlify environment, I don’t know how to do this kind of action, since the Continous Deployment is active, and in my Git repository there is no node_modules folder, and its build is done by netlify itself.

As a result, some assets are not being generated.

I tried to redo the build clearing cache, but without success.

Any suggestions on what I can do to fix the problem?

My deployment URL:
https://elated-franklin-1b5b5b.netlify.app/

Expected behavior:
Load all assets like my localhost server.

Above, my newest build log…

10:30:54 AM: Build ready to start
10:30:56 AM: build-image version: 73def8bb10593b9b818f44989a75ea508018ccb7 (focal)
10:30:56 AM: build-image tag: v4.5.2
10:30:56 AM: buildbot version: 8cd320132979d1a1a502e85e77b47b97cc7d659f
10:30:56 AM: Building without cache
10:30:56 AM: Starting to prepare the repo for build
10:30:58 AM: No cached dependencies found. Cloning fresh repo
10:30:58 AM: git clone https://github.com/marfin-lab/site-v2-frontend
10:30:59 AM: Preparing Git Reference refs/heads/main
10:31:00 AM: Parsing package.json dependencies
10:31:01 AM: Starting build script
10:31:01 AM: Installing dependencies
10:31:01 AM: Python version set to 2.7
10:31:02 AM: Downloading and installing node v16.13.2...
10:31:02 AM: Downloading https://nodejs.org/dist/v16.13.2/node-v16.13.2-linux-x64.tar.xz...
10:31:02 AM: Computing checksum with sha256sum
10:31:02 AM: Checksums matched!
10:31:06 AM: Now using node v16.13.2 (npm v8.1.2)
10:31:06 AM: Started restoring cached build plugins
10:31:06 AM: Finished restoring cached build plugins
10:31:06 AM: Attempting ruby version 2.7.2, read from environment
10:31:08 AM: Using ruby version 2.7.2
10:31:08 AM: Using PHP version 8.0
10:31:08 AM: Started restoring cached node modules
10:31:08 AM: Finished restoring cached node modules
10:31:09 AM: Installing NPM modules using NPM version 8.1.2
10:31:23 AM: added 370 packages, and audited 371 packages in 14s
10:31:23 AM: 66 packages are looking for funding
10:31:23 AM:   run `npm fund` for details
10:31:23 AM: found 0 vulnerabilities
10:31:23 AM: NPM modules installed
10:31:24 AM: Started restoring cached go cache
10:31:24 AM: Finished restoring cached go cache
10:31:24 AM: go version go1.16.5 linux/amd64
10:31:24 AM: go version go1.16.5 linux/amd64
10:31:24 AM: Installing missing commands
10:31:24 AM: Verify run directory
10:31:26 AM: ​
10:31:26 AM: ────────────────────────────────────────────────────────────────
10:31:26 AM:   Netlify Build                                                 
10:31:26 AM: ────────────────────────────────────────────────────────────────
10:31:26 AM: ​
10:31:26 AM: ❯ Version
10:31:26 AM:   @netlify/build 26.2.0
10:31:26 AM: ​
10:31:26 AM: ❯ Flags
10:31:26 AM:   baseRelDir: true
10:31:26 AM:   buildId: 61eab58ec88dfd0c5f2cfb31
10:31:26 AM:   deployId: 61eab58ec88dfd0c5f2cfb33
10:31:26 AM: ​
10:31:26 AM: ❯ Current directory
10:31:26 AM:   /opt/build/repo
10:31:26 AM: ​
10:31:26 AM: ❯ Config file
10:31:26 AM:   No config file was defined: using default values.
10:31:26 AM: ​
10:31:26 AM: ❯ Context
10:31:26 AM:   production
10:31:26 AM: ​
10:31:26 AM: ❯ Installing plugins
10:31:26 AM:    - @netlify/plugin-nextjs@4.2.0
10:31:41 AM: ​
10:31:41 AM: ❯ Loading plugins
10:31:41 AM:    - @netlify/plugin-nextjs@4.2.0 from Netlify app
10:31:43 AM: ​
10:31:43 AM: ────────────────────────────────────────────────────────────────
10:31:43 AM:   1. @netlify/plugin-nextjs (onPreBuild event)                  
10:31:43 AM: ────────────────────────────────────────────────────────────────
10:31:43 AM: ​
10:31:43 AM: No Next.js cache to restore.
10:31:43 AM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
10:31:43 AM: ​
10:31:43 AM: (@netlify/plugin-nextjs onPreBuild completed in 32ms)
10:31:43 AM: ​
10:31:43 AM: ────────────────────────────────────────────────────────────────
10:31:43 AM:   2. Build command from Netlify app                             
10:31:43 AM: ────────────────────────────────────────────────────────────────
10:31:43 AM: ​
10:31:43 AM: $ npm run build
10:31:43 AM: > build
10:31:43 AM: > next build
10:31:44 AM: info  - Loaded env from /opt/build/repo/.env.production
10:31:44 AM: warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
10:31:44 AM: info  - Checking validity of types...
10:31:44 AM: warn  - No ESLint configuration detected. Run next lint to begin setup
10:31:44 AM: info  - Creating an optimized production build...
10:32:02 AM: info  - Compiled successfully
10:32:02 AM: info  - Collecting page data...
10:32:06 AM: info  - Generating static pages (0/8)
10:32:06 AM: info  - Generating static pages (2/8)
10:32:06 AM: info  - Generating static pages (4/8)
10:32:07 AM: info  - Generating static pages (6/8)
10:32:07 AM: info  - Generating static pages (8/8)
10:32:07 AM: info  - Finalizing page optimization...
10:32:08 AM: Page                                       Size     First Load JS
10:32:08 AM: ┌ ● /                                      15 kB          99.6 kB
10:32:08 AM: ├   /_app                                  0 B            84.6 kB
10:32:08 AM: └ ○ /404                                   194 B          84.8 kB
10:32:08 AM: + First Load JS shared by all              84.6 kB
10:32:08 AM:   ├ chunks/framework-91d7f78b5b4003c8.js   42 kB
10:32:08 AM:   ├ chunks/main-257a65d19b40e622.js        29 kB
10:32:08 AM:   ├ chunks/pages/_app-bbb6dd122d55d74c.js  12.9 kB
10:32:08 AM:   ├ chunks/webpack-45f9f9587e6c08e1.js     729 B
10:32:08 AM:   └ css/7018c92e5132fa1d.css               3.74 kB
10:32:08 AM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
10:32:08 AM: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
10:32:08 AM: ​
10:32:08 AM: (build.command completed in 25s)
10:32:08 AM: ​
10:32:08 AM: ────────────────────────────────────────────────────────────────
10:32:08 AM:   3. @netlify/plugin-nextjs (onBuild event)                     
10:32:08 AM: ────────────────────────────────────────────────────────────────
10:32:08 AM: ​
10:32:08 AM: Patching /opt/build/repo/node_modules/next/dist/server/next-server.js
10:32:08 AM: Moving static page files to serve from CDN...
10:32:08 AM: Moved 0 files
10:32:08 AM: Netlify configuration property "redirects" value changed to [
10:32:08 AM:   { from: '/_next/static/*', to: '/static/:splat', status: 200 },
10:32:08 AM:   {
10:32:08 AM:     from: '/:locale/_next/static/*',
10:32:08 AM:     to: '/static/:splat',
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/_next/image*',
10:32:08 AM:     query: { url: ':url', w: ':width', q: ':quality' },
10:32:08 AM:     to: '/_ipx/w_:width,q_:quality/:url',
10:32:08 AM:     status: 301
10:32:08 AM:   },
10:32:08 AM:   { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 },
10:32:08 AM:   { from: '/cache/*', to: '/404.html', status: 404, force: true },
10:32:08 AM:   { from: '/server/*', to: '/404.html', status: 404, force: true },
10:32:08 AM:   { from: '/serverless/*', to: '/404.html', status: 404, force: true },
10:32:08 AM:   { from: '/traces', to: '/404.html', status: 404, force: true },
10:32:08 AM:   {
10:32:08 AM:     from: '/routes-manifest.json',
10:32:08 AM:     to: '/404.html',
10:32:08 AM:     status: 404,
10:32:08 AM:     force: true
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/build-manifest.json',
10:32:08 AM:     to: '/404.html',
10:32:08 AM:     status: 404,
10:32:08 AM:     force: true
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/prerender-manifest.json',
10:32:08 AM:     to: '/404.html',
10:32:08 AM:     status: 404,
10:32:08 AM:     force: true
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/react-loadable-manifest.json',
10:32:08 AM:     to: '/404.html',
10:32:08 AM:     status: 404,
10:32:08 AM:     force: true
10:32:08 AM:   },
10:32:08 AM:   { from: '/BUILD_ID', to: '/404.html', status: 404, force: true },
10:32:08 AM:   {
10:32:08 AM:     from: '/',
10:32:08 AM:     to: '/.netlify/functions/___netlify-handler',
10:32:08 AM:     status: 200,
10:32:08 AM:     force: true,
10:32:08 AM:     conditions: { Cookie: [Array] }
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/',
10:32:08 AM:     to: '/en-US',
10:32:08 AM:     status: 301,
10:32:08 AM:     conditions: { Language: [Array] },
10:32:08 AM:     force: true
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/api',
10:32:08 AM:     to: '/.netlify/functions/___netlify-handler',
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/api/*',
10:32:08 AM:     to: '/.netlify/functions/___netlify-handler',
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/android-icon-144x144.png',
10:32:08 AM:     to: '/images/favicon/android-icon-144x144.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/android-icon-192x192.png',
10:32:08 AM:     to: '/images/favicon/android-icon-192x192.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/android-icon-36x36.png',
10:32:08 AM:     to: '/images/favicon/android-icon-36x36.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/android-icon-48x48.png',
10:32:08 AM:     to: '/images/favicon/android-icon-48x48.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/android-icon-72x72.png',
10:32:08 AM:     to: '/images/favicon/android-icon-72x72.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/android-icon-96x96.png',
10:32:08 AM:     to: '/images/favicon/android-icon-96x96.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/apple-icon-114x114.png',
10:32:08 AM:     to: '/images/favicon/apple-icon-114x114.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/apple-icon-120x120.png',
10:32:08 AM:     to: '/images/favicon/apple-icon-120x120.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/apple-icon-144x144.png',
10:32:08 AM:     to: '/images/favicon/apple-icon-144x144.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/apple-icon-152x152.png',
10:32:08 AM:     to: '/images/favicon/apple-icon-152x152.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/apple-icon-180x180.png',
10:32:08 AM:     to: '/images/favicon/apple-icon-180x180.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/apple-icon-57x57.png',
10:32:08 AM:     to: '/images/favicon/apple-icon-57x57.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/apple-icon-60x60.png',
10:32:08 AM:     to: '/images/favicon/apple-icon-60x60.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/apple-icon-72x72.png',
10:32:08 AM:     to: '/images/favicon/apple-icon-72x72.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/apple-icon-76x76.png',
10:32:08 AM:     to: '/images/favicon/apple-icon-76x76.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/apple-icon-precomposed.png',
10:32:08 AM:     to: '/images/favicon/apple-icon-precomposed.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/apple-icon.png',
10:32:08 AM:     to: '/images/favicon/apple-icon.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/browserconfig.xml',
10:32:08 AM:     to: '/images/favicon/browserconfig.xml',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/favicon-16x16.png',
10:32:08 AM:     to: '/images/favicon/favicon-16x16.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/favicon-32x32.png',
10:32:08 AM:     to: '/images/favicon/favicon-32x32.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/favicon-96x96.png',
10:32:08 AM:     to: '/images/favicon/favicon-96x96.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/favicon.ico',
10:32:08 AM:     to: '/images/favicon/favicon.ico',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/manifest.json',
10:32:08 AM:     to: '/images/favicon/manifest.json',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/ms-icon-144x144.png',
10:32:08 AM:     to: '/images/favicon/ms-icon-144x144.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/ms-icon-150x150.png',
10:32:08 AM:     to: '/images/favicon/ms-icon-150x150.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/ms-icon-310x310.png',
10:32:08 AM:     to: '/images/favicon/ms-icon-310x310.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/favicon/ms-icon-70x70.png',
10:32:08 AM:     to: '/images/favicon/ms-icon-70x70.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/header/logo.png',
10:32:08 AM:     to: '/images/header/logo.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/hero/companies.png',
10:32:08 AM:     to: '/images/hero/companies.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/hero/hero.png',
10:32:08 AM:     to: '/images/hero/hero.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/pages/index/bg-cta.png',
10:32:08 AM:     to: '/images/pages/index/bg-cta.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/pages/index/inhouse.png',
10:32:08 AM:     to: '/images/pages/index/inhouse.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/pages/index/ondemand-ads.png',
10:32:08 AM:     to: '/images/pages/index/ondemand-ads.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/pages/index/ondemand-all.png',
10:32:08 AM:     to: '/images/pages/index/ondemand-all.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/pages/index/ondemand-content.png',
10:32:08 AM:     to: '/images/pages/index/ondemand-content.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/pages/index/ondemand-design.png',
10:32:08 AM:     to: '/images/pages/index/ondemand-design.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/pages/index/ondemand-video.png',
10:32:08 AM:     to: '/images/pages/index/ondemand-video.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/pages/index/select.png',
10:32:08 AM:     to: '/images/pages/index/select.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/pages/index/why-approval.png',
10:32:08 AM:     to: '/images/pages/index/why-approval.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/pages/index/why-customers.png',
10:32:08 AM:     to: '/images/pages/index/why-customers.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/pages/index/why-dashboard.png',
10:32:08 AM:     to: '/images/pages/index/why-dashboard.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/pages/index/why-professionals.png',
10:32:08 AM:     to: '/images/pages/index/why-professionals.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/pages/index/why-projects.png',
10:32:08 AM:     to: '/images/pages/index/why-projects.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/pages/index/why-quality.png',
10:32:08 AM:     to: '/images/pages/index/why-quality.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/pages/index/why-safe-buy.png',
10:32:08 AM:     to: '/images/pages/index/why-safe-buy.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/pages/index/why-time.png',
10:32:08 AM:     to: '/images/pages/index/why-time.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/pages/index/woman-smartphone.png',
10:32:08 AM:     to: '/images/pages/index/woman-smartphone.png',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/uploads/testimonial/everton.jpg',
10:32:08 AM:     to: '/images/uploads/testimonial/everton.jpg',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/images/uploads/testimonial/lucas.jpg',
10:32:08 AM:     to: '/images/uploads/testimonial/lucas.jpg',
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     status: 200
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/*',
10:32:08 AM:     to: '/.netlify/functions/___netlify-handler',
10:32:08 AM:     status: 200,
10:32:08 AM:     conditions: { Cookie: [Array] },
10:32:08 AM:     force: true
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/_next/data/gobVAyFQe4mhbWIpMTRHP/pt-BR.json',
10:32:08 AM:     to: '/.netlify/builders/___netlify-odb-handler',
10:32:08 AM:     status: 200,
10:32:08 AM:     force: true
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/pt-BR',
10:32:08 AM:     to: '/.netlify/builders/___netlify-odb-handler',
10:32:08 AM:     status: 200,
10:32:08 AM:     force: true
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/_next/data/gobVAyFQe4mhbWIpMTRHP/en-US.json',
10:32:08 AM:     to: '/.netlify/builders/___netlify-odb-handler',
10:32:08 AM:     status: 200,
10:32:08 AM:     force: true
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/en-US',
10:32:08 AM:     to: '/.netlify/builders/___netlify-odb-handler',
10:32:08 AM:     status: 200,
10:32:08 AM:     force: true
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/_next/data/gobVAyFQe4mhbWIpMTRHP/pt-BR/index.json',
10:32:08 AM:     to: '/.netlify/functions/___netlify-handler',
10:32:08 AM:     status: 200,
10:32:08 AM:     force: false
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/',
10:32:08 AM:     to: '/.netlify/functions/___netlify-handler',
10:32:08 AM:     status: 200,
10:32:08 AM:     force: false
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/_next/data/gobVAyFQe4mhbWIpMTRHP/en-US/index.json',
10:32:08 AM:     to: '/.netlify/functions/___netlify-handler',
10:32:08 AM:     status: 200,
10:32:08 AM:     force: false
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/en-US/',
10:32:08 AM:     to: '/.netlify/functions/___netlify-handler',
10:32:08 AM:     status: 200,
10:32:08 AM:     force: false
10:32:08 AM:   },
10:32:08 AM:   {
10:32:08 AM:     from: '/*',
10:32:08 AM:     to: '/.netlify/functions/___netlify-handler',
10:32:08 AM:     status: 200
10:32:08 AM:   }
10:32:08 AM: ].
10:32:08 AM: ​
10:32:08 AM: (@netlify/plugin-nextjs onBuild completed in 141ms)
10:32:08 AM: ​
10:32:08 AM: ────────────────────────────────────────────────────────────────
10:32:08 AM:   4. Functions bundling                                         
10:32:08 AM: ────────────────────────────────────────────────────────────────
10:32:08 AM: ​
10:32:08 AM: Packaging Functions from .netlify/functions-internal directory:
10:32:08 AM:  - ___netlify-handler/___netlify-handler.js
10:32:08 AM:  - ___netlify-odb-handler/___netlify-odb-handler.js
10:32:08 AM:  - _ipx/_ipx.js
10:32:08 AM: ​
10:32:30 AM: ​
10:32:30 AM: (Functions bundling completed in 21.9s)
10:32:30 AM: ​
10:32:30 AM: ────────────────────────────────────────────────────────────────
10:32:30 AM:   5. @netlify/plugin-nextjs (onPostBuild event)                 
10:32:30 AM: ────────────────────────────────────────────────────────────────
10:32:30 AM: ​
10:32:30 AM: Next.js cache saved.
10:32:30 AM: ​
10:32:30 AM: (@netlify/plugin-nextjs onPostBuild completed in 142ms)
10:32:30 AM: ​
10:32:30 AM: ────────────────────────────────────────────────────────────────
10:32:30 AM:   6. Deploy site                                                
10:32:30 AM: ────────────────────────────────────────────────────────────────
10:32:30 AM: ​
10:32:30 AM: Starting to deploy site from '.next'
10:32:30 AM: Creating deploy tree 
10:32:30 AM: Creating deploy upload records
10:32:31 AM: 19 new files to upload
10:32:31 AM: 2 new functions to upload
10:32:39 AM: Site deploy was successfully initiated
10:32:39 AM: ​
10:32:39 AM: (Deploy site completed in 9.2s)
10:32:39 AM: ​
10:32:39 AM: Starting post processing
10:32:39 AM: ────────────────────────────────────────────────────────────────
10:32:39 AM:   Netlify Build Complete                                        
10:32:39 AM: ────────────────────────────────────────────────────────────────
10:32:39 AM: ​
10:32:39 AM: (Netlify Build completed in 1m 13.1s)
10:32:39 AM: Post processing - HTML
10:32:40 AM: Caching artifacts
10:32:40 AM: Started saving node modules
10:32:40 AM: Finished saving node modules
10:32:40 AM: Started saving build plugins
10:32:40 AM: Finished saving build plugins
10:32:40 AM: Started saving pip cache
10:32:40 AM: Finished saving pip cache
10:32:40 AM: Started saving emacs cask dependencies
10:32:40 AM: Finished saving emacs cask dependencies
10:32:40 AM: Started saving maven dependencies
10:32:40 AM: Finished saving maven dependencies
10:32:40 AM: Started saving boot dependencies
10:32:40 AM: Finished saving boot dependencies
10:32:40 AM: Started saving rust rustup cache
10:32:40 AM: Finished saving rust rustup cache
10:32:40 AM: Started saving go dependencies
10:32:40 AM: Finished saving go dependencies
10:32:40 AM: Post processing - header rules
10:32:40 AM: Post processing - redirect rules
10:32:40 AM: Post processing done
10:32:42 AM: Site is live ✨
10:32:42 AM: Build script success
10:33:17 AM: Finished processing build request in 2m21.113752274s

[hillary]

Hey there, @marfin-lab

Thanks for your patience here! Are you still encountering this issue? If so, can you share your repo, a link to your deployed site, as well as any mitigation steps you have taken in the past four days?

Thanks!

[marfin-lab]

Hey Hillary, how are u doing?

Yea, still stuck on this. I’ll set my repo to public if this will help you!

Repo: https://github.com/marfin-lab/site-v2-frontend/
Deployed URL: https://v2.marfin.co/

I don’t know if there as a nextJS bug, or is a server issue.
Those images are in my /pages/index.js (loaded by StaticProps, in my page, you will find a OnDemand component, that i pass my static objects to load)

If i can help you with more info, just call me!

Some attempts:
moving my static data into my “final” component, where is loaded. It works, but I believe it is not a good practice to mix the data in the application.

In my dev server, i had the same problem, but works when i’ve erased my node_modules directory, and build a new one.

[hrishikesh]

Hey @marfin-lab,

When I checked your home page now, all the images loaded fine. Are you still seeing this?

[marfin-lab]

Hey @hrishikesh, mornin’! Thanks for reply!

I changed the next/image component in a way where if I push more parameters (width/height) it works. This way, instead of passing an full object via props, I just send the relative URL of the image, and that’s how it worked (I don’t know why).

For now, I’ll leave it at that. I believe prop drilling of an object may be causing a bug or conflict in this native NextJS component.

[jess]

Hi!

We recently updated our Essential Next.JS plugin from 3 to 4 and it’s causing the cached images on our website to appear broken (see screenshot). There isn’t a way to forcibly reset the cached images that I can see from the Next docs, but users are visiting the site and sometimes seeing what appear to be ‘broken’ images. Is there a fix you could recommend for this?

[hillary]

Hey there, @jess

Thanks so much for reaching out! Can you share your site URL as well as your project repo? Seeing how this is set up will help us advise you further.

[jess]

Hi @hillary, sure! The site is https://accountingleaderspodcast.com . I’ve rolled back to v3 of the plugin but still getting some issues with the cached version of the site, all is fine if you visit the site on a private browser/clean cache (so will probably work okay for you). If it is helpful this is one of the broken links for an image:

https://accountingleaderspodcast.com/nextimg/%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fstitcher.4d7637261e8a0a6088c28eafdcf0adbe.png/64/75?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fstitcher.4d7637261e8a0a6088c28eafdcf0adbe.png&w=64&q=75

I will speak to my technical manager now to make sure I have permission to share the repo and be back in a sec!

[jess]

Hi,

I’m writing this here in case anyone else comes across this issue and needs a solution. We did some further investigation & found the broken images were indeed related to caching issues – it appears that there are 301 redirects set on these images that were permanently being cached by the browser, so it was redirecting to broken urls. The urls were initially being redirected from /_next/image to /nextimg/ (broken) but are now being redirected from /_next/image to /_ipx/ so to fix this we added a few more properties onto the Image component in order to change the url being passed in to the img. Hope this helps you!

[hillary]

Hey there, @jess

Thank you so much for taking the time to come back and share your solution! This will definitely be beneficial for future Forums members who encounter something similar.

Happy building

[marfin-lab]

Yea, i did the same to fix my issue, @jess.

I don’t know why i can use some next/image components very well, and when i pass the image object via props, sometimes they broke. Probably, nextJs have some webpack issues when we need to generate images using the native component.

[gmdahri]

after deploying successfully, I am getting 404 error for my nextjs application. PLEASE HELP ME OUT

[Michael_Mannucci]

While I am glad this worked for you, this doesn’t seem like much of a real solution. This means you have one of two options:

1. Every time you need to deploy your site, you need to figure out some way to modify each image on the website to give it a new url.
2. You need to ditch importing images, losing benefits like automatic width and height, as well as automatic placeholder blur.

Obviously neither of those options are feasible.

So now I am faced with the problem that every time I deploy my client’s site, random images are not loading. Sometimes its 2 or 3, sometimes its more, but always different on each deploy.

I’d love to just move to Vercel, since my deploys on this site don’t have this issue, but then I lose out on Netlify forms.

Oh, the agony!