bmstefanski
commented
2 years ago 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
- https://deploy-preview-22--portfolio-lea.netlify.app/
- 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 https://github.com/netlify/netlify-plugin-nextjs/issues/1220#issuecomment-1045119511
alianza
ascorbic
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