Next js app showing error while deploying to cloudflare pages

Hi community , recently i was trying to deploy a fresh next app(without any customisation) to cloudflare pages. But i am getting the follwing error

|15:59:57.708|Initializing build environment. This may take up to a few minutes to complete|
|16:00:44.325|Success: Finished initializing build environment|
|16:00:44.325|Cloning repository...|
|16:00:47.876|Success: Finished cloning repository files|
|16:00:48.765|Installing dependencies|
|16:00:48.781|Python version set to 2.7|
|16:00:52.311|v12.18.0 is already installed.|
|16:00:52.786|Now using node v12.18.0 (npm v6.14.4)|
|16:00:52.820|Started restoring cached build plugins|
|16:00:52.847|Finished restoring cached build plugins|
|16:00:53.294|Attempting ruby version 2.7.1, read from environment|
|16:00:54.794|Using ruby version 2.7.1|
|16:00:55.211|Using PHP version 5.6|
|16:00:55.250|5.2 is already installed.|
|16:00:55.254|Using Swift version 5.2|
|16:00:55.254|Started restoring cached node modules|
|16:00:55.257|Finished restoring cached node modules|
|16:00:55.487|Installing NPM modules using NPM version 6.14.4|
|16:00:57.716|npm WARN read-shrinkwrap This version of npm is compatible with [email protected], but package-lock.json was generated for [email protected] I'll try to do my best with it!|
|16:01:07.759|> [email protected] postinstall /opt/buildhome/repo/node_modules/core-js-pure|
|16:01:07.759|> node -e try{require('./postinstall')}catch(e){}|
|16:01:07.807|e[96mThank you for using core-js (e[94m e[96m) for polyfilling JavaScript standard library!e[0m|
|16:01:07.807|e[96mThe project needs your help! Please consider supporting of core-js on Open Collective or Patreon: e[0m|
|16:01:07.807|e[96m>e[94m e[0m|
|16:01:07.807|e[96m>e[94m e[0m|
|16:01:07.807|e[96mAlso, the author of core-js (e[94m e[96m) is looking for a good job -)e[0m|
|16:01:08.664|npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):|
|16:01:08.665|npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {os:darwin,arch:any} (current: {os:linux,arch:x64})|
|16:01:08.668|added 479 packages from 317 contributors and audited 480 packages in 10.995s|
|16:01:08.876|78 packages are looking for funding|
|16:01:08.877|  run `npm fund` for details|
|16:01:08.877|found 0 vulnerabilities|
|16:01:08.899|NPM modules installed|
|16:01:09.166|Installing Hugo 0.54.0|
|16:01:10.251|Hugo Static Site Generator v0.54.0-B1A82C61A/extended linux/amd64 BuildDate: 2019-02-01T10:04:38Z|
|16:01:10.251|Started restoring cached go cache|
|16:01:10.251|Finished restoring cached go cache|
|16:01:10.639|go version go1.14.4 linux/amd64|
|16:01:10.655|go version go1.14.4 linux/amd64|
|16:01:10.663|Installing missing commands|
|16:01:10.663|Verify run directory|
|16:01:10.663|Executing user command: npm run build|
|16:01:10.950|> [email protected] build /opt/buildhome/repo|
|16:01:10.950|> next build && next export|
|16:01:11.666|info  - Using webpack 5. Reason: Enabled by default|
|16:01:11.771|warn  - No build cache found. Please configure build caching for faster rebuilds. Read more:|
|16:01:14.808|Attention: Next.js now collects completely anonymous telemetry regarding usage.|
|16:01:14.812|This information is used to shape Next.js' roadmap and prioritize features.|
|16:01:14.812|You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:|
|16:01:14.855|info  - Checking validity of types...|
|16:01:16.340|info  - Creating an optimized production build...|
|16:01:29.950|info  - Compiled successfully|
|16:01:29.950|info  - Collecting page data...|
|16:01:30.141|info  - Generating static pages (0/3)|
|16:01:30.387|info  - Generating static pages (3/3)|
|16:01:30.388|info  - Finalizing page optimization...|
|16:01:30.396|Page                                Size     First Load JS|
|16:01:30.396|┌ ○ /                               6 kB           69.6 kB|
|16:01:30.396|├   └ css/ea6f1f42cebc7b8cbe53.css  675 B|
|16:01:30.396|├   /_app                           0 B            63.6 kB|
|16:01:30.396|├ ○ /404                            3.17 kB        66.8 kB|
|16:01:30.396|└ λ /api/hello                      0 B            63.6 kB|
|16:01:30.396|+ First Load JS shared by all       63.6 kB|
|16:01:30.396|  ├ chunks/framework.64eb71.js      42 kB|
|16:01:30.397|  ├ chunks/main.b8a670.js           20.2 kB|
|16:01:30.397|  ├ chunks/pages/_app.8d5abe.js     555 B|
|16:01:30.397|  ├ chunks/webpack.715970.js        804 B|
|16:01:30.397|  └ css/01db3197b29cb52779ce.css    203 B|
|16:01:30.406|λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)|
|16:01:30.407|○  (Static)  automatically rendered as static HTML (uses no initial props)|
|16:01:30.407|●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)|
|16:01:30.407|   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)|
|16:01:30.927|info  - Using webpack 5. Reason: Enabled by default|
|16:01:31.111|info  - using build directory: /opt/buildhome/repo/.next|
|16:01:31.120|info  - Copying static build directory|
|16:01:31.128|info  - No exportPathMap found in next.config.js. Generating map from ./pages|
|16:01:31.130|Error: Image Optimization using Next.js' default loader is not compatible with `next export`.|
|16:01:31.130|  Possible solutions:|
|16:01:31.130|    - Use `next start` to run a server, which includes the Image Optimization API.|
|16:01:31.130|    - Use any provider which supports Image Optimization (like Vercel).|
|16:01:31.130|    - Configure a third-party loader in `next.config.js`.|
|16:01:31.131|    - Use the `loader` prop for `next/image`.|
|16:01:31.131|  Read more:|
|16:01:31.131|    at /opt/buildhome/repo/node_modules/next/dist/export/index.js:14:785|
|16:01:31.131|    at async Span.traceAsyncFn (/opt/buildhome/repo/node_modules/next/dist/telemetry/trace/trace.js:6:584)|
|16:01:31.142|npm ERR! code ELIFECYCLE|
|16:01:31.142|npm ERR! errno 1|
|16:01:31.143|npm ERR! [email protected] build: `next build && next export`|
|16:01:31.143|npm ERR! Exit status 1|
|16:01:31.144|npm ERR! |
|16:01:31.144|npm ERR! Failed at the [email protected] build script.|
|16:01:31.144|npm ERR! This is probably not a problem with npm. There is likely additional logging output above.|
|16:01:32.212|npm ERR! A complete log of this run can be found in:|
|16:01:32.212|npm ERR!     /opt/buildhome/.npm/_logs/2021-06-22T10_31_31_144Z-debug.log|
|16:01:32.214|Failed: build command exited with code: 1|

Please help !

This problem

seems to be directly related to NEXT.js and this opened Issue there: _next/image 404 on next build && next export · Issue #18356 · vercel/next.js · GitHub

Some there worked around this by using next-optimized-images instead of next/image. May this helps.

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.