:warning: Next has this feature built-in: If you're using Next.js 12.3 or higher, you don't have to use this library
Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component.
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:
Limitations:
$ npm i --save @blazity/next-image-proxy
# or
$ yarn add @blazity/next-image-proxy
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} />
}
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.
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.
git checkout -b feature/AmazingFeature
)git commit -m 'Add some AmazingFeature'
)git push origin feature/AmazingFeature
)