Unfortunately doesn't work well with Netlify

[alianza]

First of all amazing workaround for a stupid shortcoming of the Next.js Image component. Though unfortunately this solution doesn't properly work on Netlify. I also needed to use Medium.com images reliably. I didn't even have to change your example regex :)

Builds logs (or link to your logs)

Netlify Build logs

8:17:27 PM: Build ready to start
8:17:33 PM: build-image version: 122b31996ccaffd45d820a452d6227f8312110cc (focal)
8:17:33 PM: build-image tag: v4.5.3
8:17:33 PM: buildbot version: 7eafb394e33f42f945c880ce4ac17c149867813a
8:17:33 PM: Fetching cached dependencies
8:17:34 PM: Starting to download cache of 606.4MB
8:17:40 PM: Finished downloading cache in 6.378523736s
8:17:40 PM: Starting to extract cache
8:17:53 PM: Finished extracting cache in 12.874588428s
8:17:53 PM: Finished fetching cache in 19.307493073s
8:17:53 PM: Starting to prepare the repo for build
8:17:53 PM: Preparing Git Reference refs/heads/next-image-proxy
8:17:54 PM: Parsing package.json dependencies
8:17:55 PM: Starting build script
8:17:55 PM: Installing dependencies
8:17:55 PM: Python version set to 2.7
8:17:55 PM: Started restoring cached node version
8:17:56 PM: Finished restoring cached node version
8:17:56 PM: v16.14.0 is already installed.
8:17:57 PM: Now using node v16.14.0 (npm v8.3.1)
8:17:57 PM: Started restoring cached build plugins
8:17:57 PM: Finished restoring cached build plugins
8:17:57 PM: Attempting ruby version 2.7.2, read from environment
8:17:58 PM: Using ruby version 2.7.2
8:17:58 PM: Using PHP version 8.0
8:17:58 PM: Started restoring cached yarn cache
8:18:00 PM: Finished restoring cached yarn cache
8:18:00 PM: No yarn workspaces detected
8:18:00 PM: Started restoring cached node modules
8:18:00 PM: Finished restoring cached node modules
8:18:01 PM: Installing NPM modules using Yarn version 1.22.10
8:18:01 PM: yarn install v1.22.10
8:18:01 PM: [1/4] Resolving packages...
8:18:01 PM: success Already up-to-date.
8:18:01 PM: Done in 0.19s.
8:18:01 PM: NPM modules installed using Yarn
8:18:02 PM: Started restoring cached go cache
8:18:02 PM: Finished restoring cached go cache
8:18:02 PM: go version go1.16.5 linux/amd64
8:18:02 PM: go version go1.16.5 linux/amd64
8:18:02 PM: Installing missing commands
8:18:02 PM: Verify run directory
8:18:03 PM: ​
8:18:03 PM: ────────────────────────────────────────────────────────────────
8:18:03 PM:   Netlify Build                                                 
8:18:03 PM: ────────────────────────────────────────────────────────────────
8:18:03 PM: ​
8:18:03 PM: ❯ Version
8:18:03 PM:   @netlify/build 26.4.0
8:18:03 PM: ​
8:18:03 PM: ❯ Flags
8:18:03 PM:   baseRelDir: true
8:18:03 PM:   buildId: 6228fd476ca984000954caae
8:18:03 PM:   deployId: 6228fd476ca984000954cab0
8:18:03 PM: ​
8:18:03 PM: ❯ Current directory
8:18:03 PM:   /opt/build/repo
8:18:03 PM: ​
8:18:03 PM: ❯ Config file
8:18:03 PM:   /opt/build/repo/netlify.toml
8:18:03 PM: ​
8:18:03 PM: ❯ Context
8:18:03 PM:   branch-deploy
8:18:03 PM: ​
8:18:03 PM: ❯ Loading plugins
8:18:03 PM:    - @netlify/plugin-nextjs@4.2.7 from Netlify app
8:18:05 PM: ​
8:18:05 PM: ────────────────────────────────────────────────────────────────
8:18:05 PM:   1. @netlify/plugin-nextjs (onPreBuild event)                  
8:18:05 PM: ────────────────────────────────────────────────────────────────
8:18:05 PM: ​
8:18:05 PM: Next.js cache restored.
8:18:05 PM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
8:18:05 PM: ​
8:18:05 PM: (@netlify/plugin-nextjs onPreBuild completed in 125ms)
8:18:05 PM: ​
8:18:05 PM: ────────────────────────────────────────────────────────────────
8:18:05 PM:   2. Build command from Netlify app                             
8:18:05 PM: ────────────────────────────────────────────────────────────────
8:18:05 PM: ​
8:18:05 PM: $ yarn next:build
8:18:05 PM: yarn run v1.22.10
8:18:05 PM: $ next build
8:18:06 PM: info  - Checking validity of types...
8:18:06 PM: warn  - No ESLint configuration detected. Run next lint to begin setup
8:18:06 PM: info  - Creating an optimized production build...
8:18:12 PM: info  - Compiled successfully
8:18:12 PM: info  - Collecting page data...
8:18:13 PM: info  - Generating static pages (0/10)
8:18:13 PM: info  - Generating static pages (2/10)
8:18:13 PM: info  - Generating static pages (4/10)
8:18:13 PM: info  - Generating static pages (7/10)
8:18:13 PM: info  - Generating static pages (10/10)
8:18:13 PM: info  - Finalizing page optimization...
8:18:13 PM: Page                                            Size     First Load JS
8:18:13 PM: ┌ ● / (ISR: 60 Seconds) (517 ms)                4.57 kB          88 kB
8:18:13 PM: ├   └ css/23788d6ffad26442.css                  1.7 kB
8:18:13 PM: ├   /_app                                       0 B            71.2 kB
8:18:13 PM: ├ ○ /404                                        194 B          71.4 kB
8:18:13 PM: ├ ● /about                                      597 B            88 kB
8:18:13 PM: ├ λ /api/imageProxy                             0 B            71.2 kB
8:18:13 PM: ├ ● /articles (ISR: 60 Seconds) (435 ms)        1.42 kB        88.8 kB
8:18:13 PM: ├   └ css/d7bbcb250cfd73e8.css                  2.41 kB
8:18:13 PM: ├ ● /contact                                    876 B          88.3 kB
8:18:13 PM: ├   └ css/4afa3f1ef696f251.css                  2.07 kB
8:18:13 PM: ├ ● /portfolio                                  1.11 kB        88.5 kB
8:18:13 PM: ├   └ css/716fda278d359c8b.css                  2.23 kB
8:18:13 PM: └ ● /portfolio/[postId] (600 ms)                661 B            88 kB
8:18:13 PM:     ├ /portfolio/2022-02-22_testblog2 (328 ms)
8:18:13 PM:     ├ /portfolio/2022-02-21_testblog
8:18:13 PM:     └ /portfolio/2022-02-23_test-artikel-3
8:18:13 PM: + First Load JS shared by all                   71.2 kB
8:18:13 PM:   ├ chunks/framework-5f4595e5518b5600.js        42 kB
8:18:13 PM:   ├ chunks/main-01df828e572375b9.js             27.6 kB
8:18:13 PM:   ├ chunks/pages/_app-0619249a764ab9f8.js       669 B
8:18:13 PM:   ├ chunks/webpack-5752944655d749a0.js          840 B
8:18:13 PM:   └ css/3e5748d608be8bd2.css                    2.98 kB
8:18:13 PM: λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
8:18:13 PM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
8:18:13 PM: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
8:18:13 PM:    (ISR)     incremental static regeneration (uses revalidate in getStaticProps)
8:18:13 PM: Done in 8.25s.
8:18:13 PM: ​
8:18:13 PM: (build.command completed in 8.4s)
8:18:13 PM: ​
8:18:13 PM: ────────────────────────────────────────────────────────────────
8:18:13 PM:   3. @netlify/plugin-nextjs (onBuild event)                     
8:18:13 PM: ────────────────────────────────────────────────────────────────
8:18:13 PM: ​
8:18:13 PM: Patching /opt/build/repo/node_modules/next/dist/server/base-server.js
8:18:13 PM: Done
8:18:13 PM: Moving static page files to serve from CDN...
8:18:13 PM: Moved 12 files
8:18:13 PM: Netlify configuration property "redirects" value changed to [
8:18:13 PM:   { from: '/_next/static/*', to: '/static/:splat', status: 200 },
8:18:13 PM:   {
8:18:13 PM:     from: '/_next/image*',
8:18:13 PM:     query: { url: ':url', w: ':width', q: ':quality' },
8:18:13 PM:     to: '/_ipx/w_:width,q_:quality/:url',
8:18:13 PM:     status: 301
8:18:13 PM:   },
8:18:13 PM:   { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 },
8:18:13 PM:   { from: '/cache/*', to: '/404.html', status: 404, force: true },
8:18:13 PM:   { from: '/server/*', to: '/404.html', status: 404, force: true },
8:18:13 PM:   { from: '/serverless/*', to: '/404.html', status: 404, force: true },
8:18:13 PM:   { from: '/traces', to: '/404.html', status: 404, force: true },
8:18:13 PM:   {
8:18:13 PM:     from: '/routes-manifest.json',
8:18:13 PM:     to: '/404.html',
8:18:13 PM:     status: 404,
8:18:13 PM:     force: true
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/build-manifest.json',
8:18:13 PM:     to: '/404.html',
8:18:13 PM:     status: 404,
8:18:13 PM:     force: true
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/prerender-manifest.json',
8:18:13 PM:     to: '/404.html',
8:18:13 PM:     status: 404,
8:18:13 PM:     force: true
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/react-loadable-manifest.json',
8:18:13 PM:     to: '/404.html',
8:18:13 PM:     status: 404,
8:18:13 PM:     force: true
8:18:13 PM:   },
8:18:13 PM:   { from: '/BUILD_ID', to: '/404.html', status: 404, force: true },
8:18:13 PM:   {
8:18:13 PM:     from: '/api',
8:18:13 PM:     to: '/.netlify/functions/___netlify-handler',
8:18:13 PM:     status: 200
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/api/*',
8:18:13 PM:     to: '/.netlify/functions/___netlify-handler',
8:18:13 PM:     status: 200
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/favicon.ico',
8:18:13 PM:     to: '/favicon.ico',
8:18:13 PM:     conditions: { Cookie: [Array] },
8:18:13 PM:     status: 200
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/admin/config.yml',
8:18:13 PM:     to: '/admin/config.yml',
8:18:13 PM:     conditions: { Cookie: [Array] },
8:18:13 PM:     status: 200
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/admin/index.html',
8:18:13 PM:     to: '/admin/index.html',
8:18:13 PM:     conditions: { Cookie: [Array] },
8:18:13 PM:     status: 200
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/images/10610_3707769300997_775215996_n.jpg',
8:18:13 PM:     to: '/images/10610_3707769300997_775215996_n.jpg',
8:18:13 PM:     conditions: { Cookie: [Array] },
8:18:13 PM:     status: 200
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/images/124010.png',
8:18:13 PM:     to: '/images/124010.png',
8:18:13 PM:     conditions: { Cookie: [Array] },
8:18:13 PM:     status: 200
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/images/instagram_icon.png.webp',
8:18:13 PM:     to: '/images/instagram_icon.png.webp',
8:18:13 PM:     conditions: { Cookie: [Array] },
8:18:13 PM:     status: 200
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/images/medium-512.webp',
8:18:13 PM:     to: '/images/medium-512.webp',
8:18:13 PM:     conditions: { Cookie: [Array] },
8:18:13 PM:     status: 200
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/images/p1100057.jpg',
8:18:13 PM:     to: '/images/p1100057.jpg',
8:18:13 PM:     conditions: { Cookie: [Array] },
8:18:13 PM:     status: 200
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/images/p1100062.jpg',
8:18:13 PM:     to: '/images/p1100062.jpg',
8:18:13 PM:     conditions: { Cookie: [Array] },
8:18:13 PM:     status: 200
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/images/yasman.png',
8:18:13 PM:     to: '/images/yasman.png',
8:18:13 PM:     conditions: { Cookie: [Array] },
8:18:13 PM:     status: 200
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/styles/content.module.css',
8:18:13 PM:     to: '/styles/content.module.css',
8:18:13 PM:     conditions: { Cookie: [Array] },
8:18:13 PM:     status: 200
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/styles/variables.css',
8:18:13 PM:     to: '/styles/variables.css',
8:18:13 PM:     conditions: { Cookie: [Array] },
8:18:13 PM:     status: 200
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/*',
8:18:13 PM:     to: '/.netlify/functions/___netlify-handler',
8:18:13 PM:     status: 200,
8:18:13 PM:     conditions: { Cookie: [Array] },
8:18:13 PM:     force: true
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/_next/data/2D1eUfXsOHob3T0YCa03W/articles.json',
8:18:13 PM:     to: '/.netlify/builders/___netlify-odb-handler',
8:18:13 PM:     status: 200,
8:18:13 PM:     force: true
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/articles',
8:18:13 PM:     to: '/.netlify/builders/___netlify-odb-handler',
8:18:13 PM:     status: 200,
8:18:13 PM:     force: true
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/_next/data/2D1eUfXsOHob3T0YCa03W/index.json',
8:18:13 PM:     to: '/.netlify/builders/___netlify-odb-handler',
8:18:13 PM:     status: 200,
8:18:13 PM:     force: true
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/',
8:18:13 PM:     to: '/.netlify/builders/___netlify-odb-handler',
8:18:13 PM:     status: 200,
8:18:13 PM:     force: true
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/_next/data/2D1eUfXsOHob3T0YCa03W/portfolio/:postId.json',
8:18:13 PM:     to: '/.netlify/builders/___netlify-odb-handler',
8:18:13 PM:     status: 200,
8:18:13 PM:     force: false
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/portfolio/:postId',
8:18:13 PM:     to: '/.netlify/builders/___netlify-odb-handler',
8:18:13 PM:     status: 200,
8:18:13 PM:     force: false
8:18:13 PM:   },
8:18:13 PM:   {
8:18:13 PM:     from: '/*',
8:18:13 PM:     to: '/.netlify/functions/___netlify-handler',
8:18:13 PM:     status: 200
8:18:13 PM:   }
8:18:13 PM: ].
8:18:13 PM: ​
8:18:13 PM: (@netlify/plugin-nextjs onBuild completed in 74ms)
8:18:13 PM: ​
8:18:13 PM: ────────────────────────────────────────────────────────────────
8:18:13 PM:   4. Functions bundling                                         
8:18:13 PM: ────────────────────────────────────────────────────────────────
8:18:13 PM: ​
8:18:13 PM: Packaging Functions from .netlify/functions-internal directory:
8:18:13 PM:  - ___netlify-handler/___netlify-handler.js
8:18:13 PM:  - ___netlify-odb-handler/___netlify-odb-handler.js
8:18:13 PM:  - _ipx/_ipx.js
8:18:13 PM: ​
8:18:25 PM: ​
8:18:25 PM: (Functions bundling completed in 11.9s)
8:18:25 PM: ​
8:18:25 PM: ────────────────────────────────────────────────────────────────
8:18:25 PM:   5. @netlify/plugin-nextjs (onPostBuild event)                 
8:18:25 PM: ────────────────────────────────────────────────────────────────
8:18:25 PM: ​
8:18:26 PM: Next.js cache saved.
8:18:26 PM: ​
8:18:26 PM: (@netlify/plugin-nextjs onPostBuild completed in 161ms)
8:18:26 PM: ​
8:18:26 PM: ────────────────────────────────────────────────────────────────
8:18:26 PM:   6. Deploy site                                                
8:18:26 PM: ────────────────────────────────────────────────────────────────
8:18:26 PM: Creating deploy upload records
8:18:26 PM: ​
8:18:26 PM: Starting to deploy site from '.next'
8:18:26 PM: Creating deploy tree 
8:18:26 PM: 33 new files to upload
8:18:26 PM: 3 new functions to upload
8:18:35 PM: Site deploy was successfully initiated
8:18:35 PM: ​
8:18:35 PM: (Deploy site completed in 9s)
8:18:35 PM: ​
8:18:35 PM: ────────────────────────────────────────────────────────────────
8:18:35 PM:   Netlify Build Complete                                        
8:18:35 PM: ────────────────────────────────────────────────────────────────
8:18:35 PM: Starting post processing
8:18:35 PM: ​
8:18:35 PM: (Netlify Build completed in 31.5s)
8:18:35 PM: Caching artifacts
8:18:35 PM: Started saving node modules
8:18:35 PM: Finished saving node modules
8:18:35 PM: Started saving build plugins
8:18:35 PM: Finished saving build plugins
8:18:35 PM: Started saving yarn cache
8:18:35 PM: Post processing - HTML
8:18:36 PM: Processing form - contact
8:18:36 PM: Detected form fields:
8:18:36 PM:  - name
8:18:37 PM:  - email
8:18:37 PM:  - message
8:18:37 PM: Finished saving yarn cache
8:18:37 PM: Started saving pip cache
8:18:37 PM: Finished saving pip cache
8:18:37 PM: Started saving emacs cask dependencies
8:18:37 PM: Finished saving emacs cask dependencies
8:18:37 PM: Started saving maven dependencies
8:18:37 PM: Finished saving maven dependencies
8:18:37 PM: Started saving boot dependencies
8:18:37 PM: Finished saving boot dependencies
8:18:37 PM: Started saving rust rustup cache
8:18:37 PM: Finished saving rust rustup cache
8:18:37 PM: Started saving go dependencies
8:18:37 PM: Finished saving go dependencies
8:18:37 PM: Build script success
8:18:38 PM: Post processing - header rules
8:18:38 PM: Post processing - redirect rules
8:18:38 PM: Post processing done
8:18:42 PM: Site is live ✨
8:19:58 PM: Finished processing build request in 2m24.865233186s

Using @netlify/plugin-nextjs@4.2.7

See this branch deployment of this commit: https://github.com/alianza/portfolio-lea/tree/f1bb1249c5a08d372810c4a467f74779dd7c708c

https://6228fd5efb25a900089c73dd--portfolio-lea.netlify.app/ (Sometimes the images of articles fail to load (Medium.com))

Following error in dev tools console as well: GET https://leashamaa.nl/_ipx/w_640,q_75/%2Fapi%2FimageProxy%3FimageUrl%3Dhttps%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F1024%2F1%2AMQIsvhUnGoPahH4-OGTkyA.jpeg?url=%2Fapi%2FimageProxy%3FimageUrl%3Dhttps%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F1024%2F1*MQIsvhUnGoPahH4-OGTkyA.jpeg&w=640&q=75 502

[bmstefanski]

Hi, thanks for the issue 😃 I took a look at the link you provided, and the link from penult commit and it looks like everything works & loads well on the desktop and when I tried scaling down the resolution to mobile, then it started to crash

1. https://deploy-preview-22--portfolio-lea.netlify.app/
2. https://6228fd5efb25a900089c73dd--portfolio-lea.netlify.app/

but not sure if it is a problem with the library or Netlify internals (I am not very familiar with Netlify), because some people experience similar issues here opennextjs/opennextjs-netlify#1220 (comment)

[alianza]

Sometimes it the images are loaded correctly on this deploy https://deploy-preview-22--portfolio-lea.netlify.app/. But sometimes they don't load and the log can be seen in the dev tools console. After refreshing it typically does load the images correctly. I also suspect this has something to do with Netlify's implementation of the Api routes in Next.js. Thanks for the linking of the netlify-plugin-next issue maybe a solution will pop up there. Once again amazing work on this though!

[ascorbic]

The Netlify error appears to be because the source image isn't sending a content-type header. The IPX handler is checking to see if it's an image before trying to resize it, but as the header is msising it's throwing the error. It could in theory be changed to allow missing headers.

[alianza]

Hey @ascorbic, nice to see you here too :). Could this explain why it's only failing sometimes? Would the headers only be sent sometimes? What could be done to fix the issue?

[ascorbic]

I'm not sure. The fix would be to make it fail more gracefully on missing headers. A PR would be welcome for that

[bmstefanski]

Hi @alianza, were you able to resolve this issue, or is it still happening?

[alianza]

Hey @bmstefanski, I resorted to not using this package for externally sourced images. So now I'm not having any issues, but I can't use the Next.js Image component. As far as I know the same issue still persists.

[bmstefanski]

Thanks for the reply. I cannot commit to fixing it right now, so will leave the issue open and will add a note about the limitation to the readme