Skip to content

Commit fafec0a

Browse files
committed
readme styling fixes
1 parent 7306166 commit fafec0a

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

README.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,18 @@
1111

1212
<br />
1313

14-
## Motivation
14+
## Motivation
1515

16-
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 can be resolved by adding a regex pattern to `next.config.js`, but unfortunately, Next.js doesn't support that.
16+
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.
1717

1818
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)
1919

20-
You have to remember that (as always) there're some cons:
20+
You have to remember that there're some cons:
2121

2222
- You can create a security loophole if your regex isn't strict enough
2323
- 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)
2424

25-
## Installation
25+
## 🧰 Installation
2626

2727
```
2828
$ npm i --save next-image-proxy
@@ -32,7 +32,7 @@ $ npm i --save next-image-proxy
3232
$ yarn add next-image-proxy
3333
```
3434

35-
## Use
35+
## 💻 Use
3636

3737
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.
3838

@@ -49,10 +49,10 @@ and now you prefix the image you want to use:
4949
```tsx
5050
import NextImage from 'next/image'
5151

52-
{ /* O.F.C. */ }
53-
return (
54-
<NextImage src={`api/imageProxy?imageUrl=${originalUrl}`} />
55-
)
52+
{
53+
/* O.F.C. */
54+
}
55+
return <NextImage src={`api/imageProxy?imageUrl=${originalUrl}`} />
5656
```
5757

5858
## 🤲🏻 Contributing

0 commit comments

Comments
 (0)