{"id":18291728,"url":"https://github.com/blazity/next-image-proxy","last_synced_at":"2025-04-09T09:11:32.558Z","repository":{"id":37668010,"uuid":"465092890","full_name":"Blazity/next-image-proxy","owner":"Blazity","description":"🖼️ Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component.","archived":false,"fork":false,"pushed_at":"2024-10-29T18:19:55.000Z","size":250,"stargazers_count":79,"open_issues_count":13,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-29T20:26:06.128Z","etag":null,"topics":["image-optimization","image-proxy","next","nextjs","nextjs-plugin","nextjs-serverless","react"],"latest_commit_sha":null,"homepage":"https://next-image-proxy.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Blazity.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-01T23:44:48.000Z","updated_at":"2024-09-25T16:41:26.000Z","dependencies_parsed_at":"2022-07-09T08:00:58.945Z","dependency_job_id":"ede68d53-6761-4e39-b7ec-2ef574905132","html_url":"https://github.com/Blazity/next-image-proxy","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fnext-image-proxy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fnext-image-proxy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fnext-image-proxy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fnext-image-proxy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Blazity","download_url":"https://codeload.github.com/Blazity/next-image-proxy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248008630,"owners_count":21032556,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image-optimization","image-proxy","next","nextjs","nextjs-plugin","nextjs-serverless","react"],"created_at":"2024-11-05T14:14:58.190Z","updated_at":"2025-04-09T09:11:32.540Z","avatar_url":"https://github.com/Blazity.png","language":"TypeScript","readme":"\u003e :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](https://nextjs.org/blog/next-12-3#remote-patterns-stable)\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eNext.js Image Proxy\u003c/h1\u003e\n  \u003cp\u003eImage proxy for Next.js. Makes it possible to use dynamic domains in next/image component.\u003c/p\u003e \n  \u003cbr /\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@blazity/next-image-proxy\"\u003e\u003cimg alt=\"npm version badge\" src=\"https://img.shields.io/npm/v/@blazity/next-image-proxy\"\u003e\u003c/a\u003e\n  \u003cimg alt=\"license badge\" src=\"https://img.shields.io/npm/l/@blazity/next-image-proxy\"\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n## ❔ Motivation\n\nThis 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.\n\nIf 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)\n\nYou have to remember that there're some cons:\n\n- You can create a security loophole if your regex isn't strict enough\n- 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)\n\nLimitations:\n- Might not work on Netlify\n- Might not work with serverless-next.js\n\n## 🧰 Installation\n\n```\n$ npm i --save @blazity/next-image-proxy\n\n# or\n\n$ yarn add @blazity/next-image-proxy\n```\n\n## 💻 Use\n\nIt 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.\n\n```tsx\n// pages/api/imageProxy.ts\n\nimport { withImageProxy } from '@blazity/next-image-proxy'\n\nexport default withImageProxy({ whitelistedPatterns: [/^https?:\\/\\/(.*).medium.com/] })\n```\n\nand now you prefix the image you want to use:\n\n```tsx\nimport NextImage from 'next/image'\n\nexport function SomeComponent() {\n  const actualImageUrl = 'https://cdn-images-1.medium.com/max/1024/1*xYoAR2XRmoCmC9SONuTb-Q.png'\n\n  return \u003cNextImage src={`/api/imageProxy?imageUrl=${actualImageUrl}`} width={700} height={300} /\u003e\n}\n```\n\n## Support\n\nIf 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](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.\n\n## 🤲🏻 Contributing\n\nContributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\n- If you have suggestions for adding or removing projects, feel free to [open an issue](https://github.com/Blazity/next-saas-starter/issues/new) to discuss it, or directly create a pull request after you edit the _README.md_ file with necessary changes.\n- Create individual PR for each suggestion.\n\n\n### Creating A Pull Request\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblazity%2Fnext-image-proxy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblazity%2Fnext-image-proxy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblazity%2Fnext-image-proxy/lists"}