Can't solve this error in next.js Deploying on Netlify. Imported Image and tag throwing the error

Question

I have tried to remove the code in the index.js line:4 and line:15 then deployed on netlify (Working properly but image not coded but I want the image).

Now, when I try to do like the code below. It is getting me this error. I just only put line:4 and line:15.

This is my Index.js

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import phd from "../images/phd.jpg";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <Image src={phd} alt='' width="500" height="400"></Image>
      </div>
    </div>
  )
}

This is my app.js

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

This is the error I'm facing on netlify.

3:13:45 PM: ────────────────────────────────────────────────────────────────
3:13:45 PM:   1. @netlify/plugin-nextjs (onPreBuild event)                  
3:13:45 PM: ────────────────────────────────────────────────────────────────
3:13:45 PM: 
3:13:45 PM: No Next.js cache to restore.
3:13:45 PM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
3:13:45 PM: 
3:13:45 PM: (@netlify/plugin-nextjs onPreBuild completed in 21ms)
3:13:45 PM: 
3:13:45 PM: ────────────────────────────────────────────────────────────────
3:13:45 PM:   2. Build command from Netlify app                             
3:13:45 PM: ────────────────────────────────────────────────────────────────
3:13:45 PM: 
3:13:45 PM: $ npm run build
3:13:46 PM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
3:13:46 PM: npm WARN config location in the cache, and they are managed by
3:13:46 PM: npm WARN config     [`cacache`](http://npm.im/cacache).
3:13:46 PM: > myapp@0.1.0 build
3:13:46 PM: > next build
3:13:46 PM: warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
3:13:46 PM: info  - Checking validity of types...
3:13:48 PM: info  - Creating an optimized production build...
3:13:56 PM: Failed to compile.
3:13:56 PM: 
3:13:56 PM: ./images/phd.jpg
3:13:56 PM: Error: Call retries were exceeded
3:13:56 PM:     at ExperimentalWorker.initialize (/opt/build/repo/node_modules/next/dist/compiled/jest-worker/index.js:1:16721)
3:13:56 PM:     at ExperimentalWorker._onExit (/opt/build/repo/node_modules/next/dist/compiled/jest-worker/index.js:1:17655)
3:13:56 PM:     at Worker.emit (node:events:527:28)
3:13:56 PM:     at Worker.emit (node:domain:475:12)
3:13:56 PM:     at Worker.[kOnExit] (node:internal/worker:278:10)
3:13:56 PM:     at Worker.<computed>.onexit (node:internal/worker:198:20)
3:13:56 PM: Import trace for requested module:
3:13:56 PM: ./pages/index.js
3:13:56 PM: > Build failed because of webpack errors
3:13:56 PM: 
3:13:56 PM: ────────────────────────────────────────────────────────────────
3:13:56 PM:   "build.command" failed                                        
3:13:56 PM: ────────────────────────────────────────────────────────────────
3:13:56 PM: 
3:13:56 PM:   Error message
3:13:56 PM:   Command failed with exit code 1: npm run build (https://ntl.fyi/exit-code-1)
3:13:56 PM: 
3:13:56 PM:   Error location
3:13:56 PM:   In Build command from Netlify app:
3:13:56 PM:   npm run build
3:13:56 PM: 
3:13:56 PM:   Resolved config
3:13:56 PM:   build:
3:13:56 PM:     command: npm run build
3:13:56 PM:     commandOrigin: ui
3:13:56 PM:     environment:
3:13:56 PM:       - NEXT_PRIVATE_TARGET
3:13:56 PM:     publish: /opt/build/repo/.next
3:13:56 PM:     publishOrigin: ui
3:13:56 PM:   plugins:
3:13:56 PM:     - inputs: {}
3:13:56 PM:       origin: ui
3:13:56 PM:       package: '@netlify/plugin-nextjs'
3:13:56 PM: Caching artifacts
3:13:56 PM: Started saving node modules
3:13:56 PM: Finished saving node modules
3:13:56 PM: Started saving build plugins
3:13:56 PM: Finished saving build plugins
3:13:56 PM: Started saving pip cache
3:13:56 PM: Finished saving pip cache
3:13:56 PM: Started saving emacs cask dependencies
3:13:56 PM: Finished saving emacs cask dependencies
3:13:56 PM: Started saving maven dependencies
3:13:56 PM: Finished saving maven dependencies
3:13:56 PM: Started saving boot dependencies
3:13:56 PM: Finished saving boot dependencies
3:13:58 PM: Creating deploy upload records
3:13:56 PM: Started saving rust rustup cache
3:13:56 PM: Finished saving rust rustup cache
3:13:56 PM: Started saving go dependencies
3:13:56 PM: Finished saving go dependencies
3:13:58 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
3:13:58 PM: Failing build: Failed to build site
3:13:58 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
3:13:58 PM: Finished processing build request in 43.146759075s```

Answer 1

Next.js provides "public" folder for Static File Serving. You can find the details here . Put your image in public folder and change index.js as following:

 import Head from 'next/head' import Image from 'next/image' import styles from '../styles/Home.module.css' export default function Home() { return ( <div className={styles.container}> <Head> <title>Create Next App</title> <meta name="description" content="Generated by create next app" /> <link rel="icon" href="/favicon.ico" /> </Head> <div> <Image src='/phd.jpg' alt='' width="500" height="400"></Image> </div> </div> ) }

Can't solve this error in next.js Deploying on Netlify. Imported Image and tag throwing the error

Question

1 answers

solution1
1 2022-06-24 10:27:54

Can't solve this error in next.js Deploying on Netlify. Imported Image and tag throwing the error

Question

1 answers

solution1 1 2022-06-24 10:27:54

solution1
1 2022-06-24 10:27:54