Skip to content

Commit 0869b73

Browse files
committed
feat: add to Readme
1 parent e66ae0b commit 0869b73

File tree

1 file changed

+33
-19
lines changed

1 file changed

+33
-19
lines changed

README.md

Lines changed: 33 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,23 @@ commands separately will not work, because the Next.js Runtime will not generate
1515

1616
If you use [`next/image`](https://nextjs.org/docs/basic-features/image-optimization), your images will be automatically
1717
optimized at runtime, ensuring that they are served at the best size and format. The image will be processed on the
18-
first request which means it may take longer to load, but the generated image is then cached at the edge and served as a
19-
static file to future visitors. By default, Next.js will deliver WebP images if the browser supports it. WebP is a new
20-
image format with wide browser support that will usually generate smaller files than png or jpg. You can additionally
21-
enable the AVIF format, which is often even smaller in filesize than WebP. The drawback is that with particularly large
22-
images AVIF may take too long to generate, meaning the function times-out. You can configure
18+
first request which means it may take longer to load, but the generated image is then cached and served as a static file
19+
to future visitors. By default, Next.js will deliver WebP images if the browser supports it. WebP is a new image format
20+
with wide browser support that will usually generate smaller files than png or jpg. You can additionally enable the AVIF
21+
format, which is often even smaller in filesize than WebP. The drawback is that with particularly large images AVIF may
22+
take too long to generate, meaning the function times-out. You can configure
2323
[the supported image formats](https://nextjs.org/docs/api-reference/next/image#acceptable-formats) in your
2424
`next.config.js` file.
2525

26+
### Enabling Edge Images
27+
28+
It is possible to run image content negotiation on the edge. This allows images to be processed on the first request,
29+
and then in future loads, it will be served from cache on the edge.
30+
2631
In order to deliver the correct format to a visitor's browser, this uses a Netlify Edge Function. In some cases your
27-
site may not support Edge Functions, in which case it will instead fall back to delivering the original file format. You
28-
may also manually disable the Edge Function by setting the environment variable `NEXT_DISABLE_EDGE_IMAGES` to `true`.
32+
site may not support Edge Functions, in which case it will instead fall back to delivering the original file format.
33+
34+
To turn on Edge image handling for Next/Image, set the environment variable `NEXT_FORCE_EDGE_IMAGES` to `true`
2935

3036
## Returning custom response headers on images handled by `ipx`
3137

@@ -44,23 +50,28 @@ by targeting the `/_next/image/*` route:
4450

4551
## Disabling included image loader
4652

47-
If you wish to disable the use of the image loader which is bundled into the runtime by default, set the `DISABLE_IPX` environment variable to `true`.
53+
If you wish to disable the use of the image loader which is bundled into the runtime by default, set the `DISABLE_IPX`
54+
environment variable to `true`.
4855

49-
This should only be done if the site is not using `next/image` or is using a different loader (such as Cloudinary or Imgix).
56+
This should only be done if the site is not using `next/image` or is using a different loader (such as Cloudinary or
57+
Imgix).
5058

51-
See the [Next.js documentation](https://nextjs.org/docs/api-reference/next/image#built-in-loaders) for image loader options.
59+
See the [Next.js documentation](https://nextjs.org/docs/api-reference/next/image#built-in-loaders) for image loader
60+
options.
5261

5362
## Next.js Middleware on Netlify
5463

5564
Next.js Middleware works out of the box on Netlify. By default, middleware runs using Netlify Edge Functions. For legacy
5665
support for running Middleware at the origin, set the environment variable `NEXT_DISABLE_NETLIFY_EDGE` to `true`. Be
5766
aware that this will result in slower performance, as all pages that match middleware must use SSR.
5867

59-
For more details on Next.js Middleware with Netlify, see the [middleware docs](https://docs.netlify.com/integrations/frameworks/next-js/middleware/).
68+
For more details on Next.js Middleware with Netlify, see the
69+
[middleware docs](https://docs.netlify.com/integrations/frameworks/next-js/middleware/).
6070

6171
### Limitations
6272

63-
Due to how the site configuration is handled when it's run using Netlify Edge Functions, data such as `locale` and `defaultLocale` will be missing on the `req.nextUrl` object when running `netlify dev`.
73+
Due to how the site configuration is handled when it's run using Netlify Edge Functions, data such as `locale` and
74+
`defaultLocale` will be missing on the `req.nextUrl` object when running `netlify dev`.
6475

6576
However, this data is available on `req.nextUrl` in a production environment.
6677

@@ -112,8 +123,9 @@ following ways:
112123

113124
### From the UI (Recommended):
114125

115-
You can go to the [UI](https://app.netlify.com/plugins/@netlify/plugin-nextjs/install) and choose the site to install the Next.js Runtime on. This method
116-
is recommended because you will benefit from auto-upgrades to important fixes and feature updates.
126+
You can go to the [UI](https://app.netlify.com/plugins/@netlify/plugin-nextjs/install) and choose the site to install
127+
the Next.js Runtime on. This method is recommended because you will benefit from auto-upgrades to important fixes and
128+
feature updates.
117129

118130
### From `npm`:
119131

@@ -139,18 +151,20 @@ If you previously set these values, they're no longer needed and should be remov
139151
- `external_node_modules` in `netlify.toml`
140152
- The environment variable `NEXT_USE_NETLIFY_EDGE` can be removed as this is now the default
141153

142-
The `serverless` and `experimental-serverless-trace` targets are deprecated in Next.js 12, and all builds with this Next.js
143-
Runtime will now use the default `server` target. If you previously set the target in your `next.config.js`, you should
144-
remove it.
154+
The `serverless` and `experimental-serverless-trace` targets are deprecated in Next.js 12, and all builds with this
155+
Next.js Runtime will now use the default `server` target. If you previously set the target in your `next.config.js`, you
156+
should remove it.
145157

146158
If you currently use redirects or rewrites on your site, see
147159
[the Rewrites and Redirects guide](https://docs.netlify.com/integrations/frameworks/next-js/redirects-and-rewrites/) for
148160
information on changes to how they are handled in this version. In particular, note that `_redirects` and `_headers`
149161
files must be placed in `public`, not in the root of the site.
150162

151163
## Using with pnpm
152-
If your site uses pnpm to manage dependencies, currently you must [enable public hoisting](https://pnpm.io/npmrc#public-hoist-pattern).
153-
The simplest way to do this is to create a `.npmrc` file in the root of your project with the content:
164+
165+
If your site uses pnpm to manage dependencies, currently you must
166+
[enable public hoisting](https://pnpm.io/npmrc#public-hoist-pattern). The simplest way to do this is to create a
167+
`.npmrc` file in the root of your project with the content:
154168

155169
```ini
156170
public-hoist-pattern[]=*

0 commit comments

Comments
 (0)