4 |
7 |
8 |
9 | Next.js Image Proxy
5 |Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component.
6 |7 |
10 | 
11 | 
12 |
13 |
14 |
11 |
12 | 15 | 16 | ## ❔ Motivation 17 | 18 | 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. 19 | 20 | If you want to follow the discussion about Next.js supporting it outside of the box, please refer to this [Discussion](https://github.com/vercel/next.js/discussions/18429) and this [Pull Request](https://github.com/vercel/next.js/pull/27345) 21 | 22 | You have to remember that there're some cons: 23 | 24 | - You can create a security loophole if your regex isn't strict enough 25 | - 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) 26 | 27 | Limitations: 28 | - Might not work on Netlify 29 | - Might not work with serverless-next.js 30 | 31 | ## 🧰 Installation 32 | 33 | ``` 34 | $ npm i --save @blazity/next-image-proxy 35 | 36 | # or 37 | 38 | $ yarn add @blazity/next-image-proxy 39 | ``` 40 | 41 | ## 💻 Use 42 | 43 | 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. 44 | 45 | ```tsx 46 | // pages/api/imageProxy.ts 47 | 48 | import { withImageProxy } from '@blazity/next-image-proxy' 49 | 50 | export default withImageProxy({ whitelistedPatterns: [/^https?:\/\/(.*).medium.com/] }) 51 | ``` 52 | 53 | and now you prefix the image you want to use: 54 | 55 | ```tsx 56 | import NextImage from 'next/image' 57 | 58 | export function SomeComponent() { 59 | const actualImageUrl = 'https://cdn-images-1.medium.com/max/1024/1*xYoAR2XRmoCmC9SONuTb-Q.png' 60 | 61 | return