blazity / next-image-proxy

🖼️ Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component.

⚠️ Next has this feature built-in: If you're using Next.js 12.3 or higher, you don't have to use this library

Next.js Image Proxy

Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component.

❔ Motivation

This library makes it possible to use next/image with dynamic domains. If you work with external providers, like Facebook, Instagram, Etsy, Medium, and others, the images often have dynamic subdomains. For example, you might get the first image from scontent-akl1-1.cdninstagram.com and the second one from scontent-akl3-1.cdninstagram.com. Although adding them one by one to the config could work temporarily, it would not be reliable since they can change at any time. The whole issue could be resolved by adding a regex pattern to next.config.js, but unfortunately, Next.js doesn't support that.

If you want to follow the discussion about Next.js supporting it outside of the box, please refer to this Discussion and this Pull Request

You have to remember that there're some cons:

• You can create a security loophole if your regex isn't strict enough
• Since it is a proxy, it will increase bandwidth costs. But the increase will be marginal unless you're working on big scale project (i.e. mils of requests per month)

Limitations:

• Might not work on Netlify
• Might not work with serverless-next.js

🧰 Installation

$ npm i --save @blazity/next-image-proxy

# or

$ yarn add @blazity/next-image-proxy

💻 Use

It is really simple to setup, you just need to add a new API route that exports one function. The name of the endpoint is up to you.

// pages/api/imageProxy.ts

import { withImageProxy } from '@blazity/next-image-proxy'

export default withImageProxy({ whitelistedPatterns: [/^https?:\/\/(.*).medium.com/] })

and now you prefix the image you want to use:

import NextImage from 'next/image'

export function SomeComponent() {
  const actualImageUrl = 'https://cdn-images-1.medium.com/max/1024/1*xYoAR2XRmoCmC9SONuTb-Q.png'

  return <NextImage src={`/api/imageProxy?imageUrl=${actualImageUrl}`} width={700} height={300} />
}

Support

If you're looking for help or simply want to share your thoughts about the project, we encourage you to join our Discord community. Here's the link: https://blazity.com/discord. It's a space where we exchange ideas and help one another. Everyone's input is appreciated, and we look forward to welcoming you.

🤲🏻 Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

• If you have suggestions for adding or removing projects, feel free to open an issue to discuss it, or directly create a pull request after you edit the README.md file with necessary changes.
• Create individual PR for each suggestion.

Creating A Pull Request

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

next-image-proxy's Issues

Unfortunately doesn't work well with Netlify

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/[email protected] 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/[email protected]

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

Fail when deploy to aws lambda using serverless

Hi, when I deploy my app to aws lambda using serverless nextjs. API will fail with 500 error in the image component with following message. Wonder what can be the cause ? Thanks.

"url" parameter is valid but upstream response is invalid

payload:

url=%2Fapi%2Fproxy%2Fimage%3FimageUrl%3Dhttps%3A%2F%2Fp2.music.126.net%2F3I-73aQn3YCw-2cZdK1fQw%3D%3D%2F109951166027478939.jpg%3Fparam%3D250y250&w=640&q=75

sample logs:

ERROR	Error processing upstream response due to error for key:  ...... Stack trace: TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'IncomingMessage'
    |     property 'req' -> object with constructor 'ClientRequest'
    --- property 'res' closes the circle
    at JSON.stringify (<anonymous>)
    at AwsPlatformClient.getObject (/var/task/index.js:110442:22)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async imageOptimizer (/var/task/index.js:92662:30)
    at async Runtime.handler (/var/task/index.js:110616:9)

Proxy strips some of the query params in URL

Hi. I've found out, that this package strips some query params in URL. For example if you pass instagram url for image, it contains some necessary hash as query params. Without them, image is not displayed and you will get Bad URL hash.

Original url - https://scontent-vie1-1.cdninstagram.com/v/t51.2885-15/279932256_513097316976421_1336461854115078438_n.jpg?stp=dst-jpg_e15_fr_s1080x1080&_nc_ht=scontent-vie1-1.cdninstagram.com&_nc_cat=101&_nc_ohc=KA4tPehPL1kAX8TKyPO&edm=AIQHJ4wBAAAA&ccb=7-4&ig_cache_key=MjgzMDY2ODY0NjU2MTU0MjgwNg%3D%3D.2-ccb7-4&oh=00_AT_5fMeKcuaxSEgsF7gK8Ea0dIx3_B-BO-gme8kX-PLAMg&oe=6278BC58&_nc_sid=7b02f1

Url from req.query.imageUrl (here) - https://scontent-vie1-1.cdninstagram.com/v/t51.2885-15/279932256_513097316976421_1336461854115078438_n.jpg?stp=dst-jpg_e15_fr_s1080x1080

I did hot fix in my project, where I merge all parameters from the req.query object

 return async function (req: NextApiRequest, res: NextApiResponse) {
    const url = new URL(req.query.imageUrl as string);

    Object.keys(req.query).map((key) =>
      url.searchParams.append(key, req.query[key] as string),
    );

    const imageUrl = url.href;
}

e.q. req.query looks like this:

{
  imageUrl: 'https://scontent-vie1-1.cdninstagram.com/v/t51.2885-15/279134625_581177102981281_4896455919946074133_n.jpg?stp=dst-jpg_e35_p1080x1080',
  _nc_ht: 'scontent-vie1-1.cdninstagram.com',
  _nc_cat: '101',
  _nc_ohc: 'atp6SFVY-lQAX8tXXPY',
  edm: 'APU89FABAAAA',
  ccb: '7-4',
  ig_cache_key: 'MjgyNTU0NTUxNjg2MTExODA3OQ==.2-ccb7-4',
  oh: '00_AT-8Eq7IWIIVgibQPg38qrxlQdgcChy91m8OA3OjZalaOA',
  oe: '6279F331',
  _nc_sid: '86f79a'
}

Packages

@blazity/next-image-proxy : 1.0.2
next : 12.1.0

whitelistedPatterns option is necessary? can i skip it and make it completely dynamic?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency @types/lodash.merge to v4.6.9
• Update dependency @types/react to v17.0.80
• Update dependency @types/node to v18.19.31
• Update dependency eslint to v8.57.0
• Update dependency prettier to v3.2.5
• Update dependency typescript to v5.4.5
• Update dependency user-agents to v1.1.184 (user-agents, @types/user-agents)
• Update dependency @types/node to v20
• Update dependency eslint to v9
• Update dependency eslint-config-next to v14
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• Update react monorepo to v18 (major) (@types/react, react, react-dom)

Detected dependencies

npm

example/package.json

• @blazity/next-image-proxy 1.0.2
• next 12.3.4
• react 17.0.2
• react-dom 17.0.2
• @types/node ^18.0.0
• @types/react ^17.0.39
• eslint 8.46.0
• eslint-config-next 12.3.4
• typescript ^5.0.0

package.json

• isomorphic-unfetch ^4.0.0
• lodash.merge ^4.6.2
• user-agents ^1.0.934
• @types/lodash.merge ^4.6.6
• @types/next ^9.0.0
• @types/node ^18.0.0
• @types/react ^17.0.18
• @types/user-agents ^1.0.2
• microbundle ^0.15.0
• prettier ^3.0.0
• react >=16.0.0
• react-dom >=16.0.0
• typescript ^5.0.0
• next >=9.0.0
• react >=16.0.0
• react-dom >=16.0.0

---

• Check this box to trigger a request for Renovate to run again on this repository

Is it possible to add support for Edge Runtime?

Hello,

I was wondering whether it's possible or whether someone has found a way to proxy images successfully with Vercel's Edge Functions, as that would reduce the duration of initial, non-cached image requests by a lot.

I think that would make a great feature, but I couldn't find a way to proxy the requests successfully with the API of Vercel's Edge Runtime so far.

Next.js supports this feature starting on 12.3

Since version 12.3, Next.js supports the feature of having wildcard domains with next/image component. That info could probably be added to the repo's README file.