blazity / next-image-proxy Goto Github PK
View Code? Open in Web Editor NEW๐ผ๏ธ Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component.
Home Page: https://next-image-proxy.vercel.app/
๐ผ๏ธ Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component.
Home Page: https://next-image-proxy.vercel.app/
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)
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
Warning
These dependencies are deprecated:
Datasource | Name | Replacement PR? |
---|---|---|
npm | @types/next |
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@types/react
, react
, react-dom
)user-agents
, @types/user-agents
)These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.
@types/react
, react
, react-dom
)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
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 :)
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
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.
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.
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'
}
@blazity/next-image-proxy
: 1.0.2
next
: 12.1.0
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.