This pull request fixes `<Image />` not updating when new props are passed by removing external DOM mutations and relying on React to do it instead.
As an added bonus, I've extracted the intersection observer from both the `<Image />` and `<Link />` component, as their instance can be shared!
The increase in size is minor (+3B), and actually a decrease for apps using both `<Image />` and `<Link />`.
---
Fixes#18698Fixes#18369
While we were fixing how Next.js handled CSS, we added a complex prefetch, preload, fetch sequence to acquire the CSS asset.
This unnecessarily overcomplicated what could've been only a `fetch()` from the very start!
---
Fixes#16932
This corrects this test failing from an arrow function being used in ie11 which isn't supported natively
```
● Production Usage › Dynamic import › default behavior › should not remove css styles for same css file between page transitions
JavascriptError: Error executing JavaScript
at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
```
This upgrades to ncc@0.25.0 and fixes the previous bugs including:
* ncc not referenced correctly in build
* Babel type errors
* node-fetch, etag, chalk and raw-body dependencies not building with ncc - these have been "un-ncc'd" for now. As they are relatively small dependencies, this doesn't seem too much of an issue and we can follow up in the tracking ncc issue at https://github.com/vercel/ncc/issues/612.
* `yarn dev` issues
Took a lot of bisecting, but the overall diff isn't too bad here in the end.
This adds inlining for Babel and the Babel plugins used in next.
This is based to the PR at https://github.com/vercel/next.js/pull/18823.
The approach is to make one large bundle and then separate out the individual packages from that in order to avoid duplications.
In the first attempt the Babel bundle size was 10MB... using "resolutions" in the Yarn workspace to reduce the duplicated packages this was brought down to a 2.8MB bundle for Babel and all the used plugins which is exactly the expected file size here.
This will thus add a 2.8MB download size to the next package, but save downloading any babel dependencies separately, removing a large number of package dependencies from the overall install.
This pull request speeds up Next.js' rendering pipeline by fetching data, parsing it, and loading it into memory instead of only doing the network request.
This will mainly result in improved Firefox/Safari performance since they handled prefetch incorrectly—only Chrome did it right. This also gets us closer to being able to use `no-store` in our caching headers!
---
Fixes#18639
x-ref #18802
This PR prints a pretty error when the Image `src` property is a [protocol-relative URL](https://www.paulirish.com/2010/the-protocol-relative-url/).
> Update 2014.12.17:
> Now that SSL is encouraged for everyone and doesn’t have performance concerns, this technique is now an anti-pattern. If the asset you need is available on SSL, then always use the https:// asset.
Fixes#18536
Serverside Dynamically loaded CSS module file insertion adds css-files as usual static files with special data-n-p tag, that is used in page transition logic. That files get removed on page transition cause they are not explicitly required in scope of page.
Mini-css-extract-plugin adds style tags at chunk insertion without any tags and leave them be, no matter how many page transitions were made.
I removed data-n-p tag from dynamically loaded css module files and added new data-n-d tag for it.
Fixes#16950
This makes sure we don't incorrectly strip locale characters from the path if it is not a locale prefix e.g. `/fr` should not be removed from `/frank`. Additional tests have been added to ensure this isn't stripped for this case.
Fixes: https://github.com/vercel/next.js/issues/18332
When visiting a non-locale prefixed path (`/hello` instead of `/fr/hello`) we don't trigger locale redirects currently so if another locale is matched we need to ensure this is reset to the `defaultLocale` for rendering to prevent a mis-match on the client and the server.
This also fixes hydration errors from occurring with `asPath` for `getServerSideProps` pages due to `normalizeLocalePath` expecting only a pathname and `asPath` containing `hash` and `query values also.
Fixes: https://github.com/vercel/next.js/issues/18337
Fixes: https://github.com/vercel/next.js/issues/18510
This adds support for passing `statusCode` in a `redirect` from `getServerSideProps` or `getStaticProps` which matches the `redirect` shape allowed to be returned for `redirects` in `next.config.js`
Closes: https://github.com/vercel/next.js/issues/18350
Older versions of Safari (and other browsers) do not support webp format so we were incorrectly falling back to png.
This PR fixes#18509 so that we fallback to the original image format if a modern format like webp was not explicitly provided in the Accept header.
Tests were added to ensure that the Accept header for Safari, Firefox, and Chrome work properly.
This makes sure we don't use invalid `x-now-route-matches` which can occur when `i18n` default locale is visited and a prerendered page is matched. To correct this we first check if we are able to derive the correct params from the URL and then bail on parsing `x-now-route-matches` if we are. Additional test cases are being added in the builder to ensure we don't regress on this
x-ref: https://github.com/vercel/next.js/discussions/18443Fixes#18602
This PR deprecates the `unsized` property from NextImage because the property did not accomplish the desired effect.
Users should rely on one of the new layouts instead:
- `<Image layout="fixed" />`
- `<Image layout="intrinsic" />`
- `<Image layout="responsive" />`
- `<Image layout="fill" />`
The `unsized` property will continue to work as-is in production but is deprecated and will throw in dev.
---
### TODO:
- [x] test `layout=fill` in typescript types
- [x] test `layout=fill` render behavior
- [x] test that `unsized` switches to `layout=fill`
- [x] test `next dev` erroring on `unsized`
- [ ] layout docs (tracked in issue #18554)
- [ ] both `layout=fill` and `layout=responsive` use all deviceWidths in the srcset
---
Fixes#18541
Co-authored-by: Steven <steven@ceriously.com>
This PR introduces a new `layout` property.
This allows 3 possible values (`fixed`, `intrinsic`, or `responsive`) which solve many use cases we have seen since 10.0.0 and will hopefully avoid usage of `unsized`.
Fixes#18351
Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
This ensures we provide the current `locale`, `locales`, and `defaultLocale` in the context when rendering the 404 for a blocking SSG page
Fixes: https://github.com/vercel/next.js/issues/18505
This makes sure custom-routes function properly with i18n support. Since the `locale` is stripped from the `pathname` this re-adds when checking custom-routes to allow the locale to be matched against
Closes: https://github.com/vercel/next.js/issues/18349
* Add err.sh for missing images domain
* Apply suggestions from code review
Co-authored-by: Steven <steven@ceriously.com>
* Update test
Co-authored-by: Steven <steven@ceriously.com>
This ensures that when using a `pages/404` file with `getStaticProps` that we call `getStaticProps` in `fallback: 'blocking'` mode
Fixes: https://github.com/vercel/next.js/issues/18293
This does two things:
- Rename `iconSizes` to `imageSizes`.
- Give priority to `imageSizes` regardless of `deviceSizes` as a means to opt-out of the srcset behavior.
* Fix test without expect for redirects from getStaticProps/getServerSideProps
* Fix browser back issue of redirects from getServerSideProps / getStaticProps
This separates the `next.config.js` property `images.sizes` into to properties: `images.deviceSizes` and `images.iconSizes`.
The purpose is for images that are not intended to take up the majority of the viewport.
Related to #18122
This adds checks to ensure that less than 50 domain and size items are configured and no sizes are less than 0 or greater than 10,000
x-ref: https://github.com/vercel/next.js/issues/18122
Co-authored-by: Steven <steven@ceriously.com>
There was a bug when the user defines a width on the Image component, but a larger size image is requested.
This is because the browser uses the `srcset` to decide which image size to request and we had the srcset basically hardcoded.
This PR fixes the behavior so that the `srcset` will never be larger than the `width` defined on the component.
It also fixes a bug where the preload srcset did not match the img srcset.
- Related to #18147
- Related to #18122
We currently always accept requests to the new `/_next/image` endpoint, even when it should not be used.
Instead, we should check to see if the default loader is used as a signal to enable this API.
Other loaders (such as cloudinary) will not go through the Next.js API so there is no need to expose this, instead we 404.
- Analogous to https://github.com/vercel/vercel/pull/5321
- Related to #18122
For many users refactoring from `<img>` to `<Image>`, we can often support their properties as-is.
The exception was width/height.
This PR allows the `<Image>` component to accept strings for `width` and `height` just like `<img>`.
Related to #18122
Previously, vector images like svg were being converted to webp and resized.
However, vector images already handle any size so we can bypass the same we do for animated images.
Related to #18122
The `w` parameter in the Image Optimization API is the requested size of the image and should only be resized if the source image is larger than the requested size. This PR fixes the behavior to prevent accidental upscaling, for example icon images.
This PR updates the `<Image>` component to follow the same property naming as native `<img>`.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-loading
This currently allows two values,`loading=lazy` and `loading=eager`, but there might be new values added in a future spec.
cc @atcastle
This updates the fallback 404 handling to render the correct 404 page on the client when a 404 is returned from fetching the data route on a fallback page on the client. This prevents us from having to rely on a cache to be updated by the time we reload the page to prevent non-stop reloading.
This also adds handling in serverless mode to ensure the correct 404 page is rendered when leveraging fallback: 'blocking' mode.
Additional tests for the fallback: 'blocking' 404 handling will be added in a follow-up where returning notFound from `getServerSideProps` is also added.
This makes sure the `locales` are passed to `getStaticPaths` and also disables the removing the default locale from the path when the default locale is the preferred header. It also updates tests to ensure the domain redirects are working as expected.
x-ref: https://github.com/vercel/next.js/pull/17370
This updates the new image optimizer endpoint to instead of relying on the `host` and `proto` headers for relative files to use the internal route handling in `next-server` to load files from the public directory. The existing tests for relative files with the endpoint should cover these changes
This makes sure the image optimizer doesn't de-animate images by transforming them with sharp since sharp doesn't currently handle outputting animated images
x-ref: https://github.com/vercel/next.js/pull/17749
This makes sure the correct `initialRevalidateSeconds` field is populated in the `prerender-manifest` for non-dynamic SSG pages since they will be inserted into the `initialPageRevalidationMap` under their locale prefixed variant with `i18n` enabled
x-ref: https://github.com/vercel/next.js/pull/17370
This PR adjust the Web Vitals reporting to be called *after* rendering occurs. It used to work like this, but React's render method is no longer synchronous—so we have to do it in an effect.
Existing tests should cover this code path, and IMO it's unfeasible to test that it's invoked _after_ hydration.
Also removed the `&& ST` condition which is not relevant to Web Vitals.
This adds the i18n config items to the routes-manifest so that they can accessed in the builder. This doesn't increment the routes-manifest version as existing value shapes haven't been modified and an additional non-breaking value is being added
x-ref: https://github.com/vercel/next.js/pull/17370
This adds the `locale` prop for `next/link` to allow transitioning between locales client-side and also allows passing the locale to `router.push/replace` via the transition options similar to `shallow` e.g. `router.push('/another', '/another, { locale: 'nl' })`
x-ref: https://github.com/vercel/next.js/pull/17370
This updates to set the `NEXT_LOCALE` cookie to the default locale when the user prefers a different locale from the default in their `accept-language` header but visits the default locale path e.g. `/en-US` with a `accept-language` preferred header of `nl` will set the `NEXT_LOCALE=en-US` header and then redirect to `/`
x-ref: https://github.com/vercel/next.js/pull/17370
While working on https://github.com/vercel/next.js/pull/17755 noticed a couple of cases that needed fixing and broke them out to this PR to make that one easier to review. One fix is for `ssgCacheKey` where it wasn't having the `locale` prefix stripped correctly due to the locales no longer being populated under the server instances `renderOpts` and the second fix is for the `asPath` not being set to `/` when the `locale` is the only part in the URL e.g. `/en` became an empty string `""`
x-ref: https://github.com/vercel/next.js/pull/17370
Follow-up to https://github.com/vercel/next.js/pull/17370 this adds mapping of locales to domains and handles default locales for specific domains also allowing specifying which locales can be visited for each domain.
This PR also updates to output all statically generated pages under the locale prefix to make it easier to locate/lookup and to not redirect to the default locale prefixed path when no `accept-language` header is provided.
Follow-up PR to #17370 this adds generating auto-export, non-dynamic SSG, and fallback pages with all locales. Dynamic SSG pages still control which locales the pages are generated with using `getStaticPaths`. To further control which locales non-dynamic SSG pages will be prerendered with a follow-up PR adding handling for 404 behavior from `getStaticProps` will be needed.
x-ref: https://github.com/vercel/next.js/issues/17110
This is a follow-up to https://github.com/vercel/next.js/pull/16973 which adds handling for the breaking change in the latest version of css-loader that causes unresolved file references in `url` or `import` to cause the build to fail. This fixes it by adding our own resolve checking and when it fails disabling the `css-loader`'s handling of it.
Fixes: https://github.com/vercel/next.js/issues/17701
Follow-up PR to https://github.com/vercel/next.js/pull/17370 when the path is not prefixed with a locale and the default locale is the detected locale it doesn't redirect to locale prefixed variant. If the default locale path is visited and the default locale is visited this also redirects to the root removing the un-necessary locale in the URL.
This also exposes the `defaultLocale` on the router since the RFC mentions `Setting a defaultLocale is required in every i18n library so it'd be useful for Next.js to provide it to the application.` although doesn't explicitly spec where we want to expose it. If we want to expose it differently this can be updated.
This adds the initial changes outlined in the [i18n routing RFC](https://github.com/vercel/next.js/discussions/17078). This currently treats the locale prefix on routes similar to how the basePath is treated in that the config doesn't require any changes to your pages directory and is automatically stripped/added based on the detected locale that should be used.
Currently redirecting occurs on the `/` route if a locale is detected regardless of if an optional catch-all route would match the `/` route or not we may want to investigate whether we want to disable this redirection automatically if an `/index.js` file isn't present at root of the pages directory.
TODO:
- [x] ensure locale detection/populating works in serverless mode correctly
- [x] add tests for locale handling in different modes, fallback/getStaticProps/getServerSideProps
To be continued in fall-up PRs
- [ ] add tests for revalidate, auto-export, basePath + i18n
- [ ] add mapping of domains with locales
- [ ] investigate detecting locale against non-index routes and populating the locale in a cookie
x-ref: https://github.com/vercel/next.js/issues/17110
Prior to this pull request, Next.js would immediately decode all URLs sent to its server (via `path-match`).
This was rarely needed, and Next.js would typically re-encode the incoming request right away (see all the `encodeURIComponent`s removed in PR diff). This adds unnecessary performance overhead.
Long term, this will also help prevent weird encoding edge-cases like #10004, #10022, #11371, et al.
---
No new tests are necessary for this change because we've extensively tested these edge cases with existing tests.
One test was updated to reflect that we skip decoding in a 404 scenario.
Let's see if all the existing tests pass!
This makes sure we have the correct `asPath` value to prevent breaking hydration for `getServerSideProps` pages and doesn't re-use the `resolvedUrl` value for the `asPath` and instead creates a separate `resolvedAsPath` value that only removes the `_next/data` prefix from the path. Additional tests have been added in the `getServerSideProps` suite to ensure correct `asPath` with rewrites.
Fixes: https://github.com/vercel/next.js/issues/17113
Fixes SSG pages that start with `/api` not being detected as SSG pages. This also adds tests to ensure this is working correctly in the `prerender` suite.
x-ref: https://github.com/vercel/next.js/issues/17091
This continues off of https://github.com/vercel/next.js/pull/17081 and provides this normalized `asPath` value in the context provided to `getServerSideProps` to provide the consistent value since the request URL can vary between direct visit and client transition and the alternative requires building the URL each time manually.
Kept this change separate from https://github.com/vercel/next.js/pull/17081 since this is addressing a separate issue and allows discussion separately.
Closes: https://github.com/vercel/next.js/issues/16407
This normalizes the `asPath` for `getServerSideProps` and `getStaticProps` pages to ensure it matches the value that would show on the client instead of a) the output pathname when revalidating or generating a fallback or b) the `_next/data` URL on client transition.
Fixes: https://github.com/vercel/next.js/issues/16542
This uses the "Expand directories" feature introduces in Prettier 2.0 to automatically format all supported file types.
Also, I fixed some badly formatted files.
This makes sure we properly resolve a rewrite when only the `href` value is used. This was causing a full-reload and was missed in the existing test since we weren't making sure a full navigation didn't occur which has been added in this PR.
Fixes: https://github.com/vercel/next.js/issues/16974
Removes `next-head-count`, improving support for 3rd party libraries that insert or append new elements to `<head>`.
---
This is more or less what a solution with a `data-` attribute would look like, except that instead of directly searching for elements with that attribute, we serialize the elements expected in `<head>` and then find them/assume ownership of them during initialization (in a manner similar to React's reconciliation) based on their properties.
There are two main assumptions here:
1. Content is served with compression, so duplicate serialization of e.g. inline script or style tags doesn't have a meaningful impact. Storing a hash would be a potential optimization.
2. 3rd party libraries primarily only insert new, unique elements to head. Libraries trying to actively manage elements that overlap with those that Next.js claims ownership of will still be unsupported.
The reason for this roundabout approach is that I'd really like to avoid `data-` if possible, for maximum compatibility. Implicitly adding an attribute could be a breaking change for some class of tools or crawlers and makes it otherwise impossible to insert raw HTML into `<head>`. Adding an unexpected attribute is why the original `class="next-head"` approach was problematic in the first place!
That said, while I don't expect this to be more problematic than `next-head-count` (anything that would break in this new model also should have broken in the old model), if that does end up being the case, it might make sense to just bite the bullet.
Fixes#11012Closes#16707
---
cc @Timer @timneutkens
This makes sure to the page path is the expected version to trigger refreshing on the client and adds additional tests to make sure it is working properly with these page variants.
Closes: https://github.com/vercel/next.js/issues/16938
This makes sure to strip the trailing slash before attempting to resolve the `href` against pages/dynamic routes and adds tests ensuring the correct pages are resolved with `trailingSlash: true` enabled.
Fixes: https://github.com/vercel/next.js/issues/16872
This makes sure we only pass the as value's `pathname` instead of the full value so that we don't accidentally include `query` values while resolving the rewrites. This also adds tests to ensure the rewrites are resolved with the correct query values when only providing `href` and when manually mapping them with `href` and `as`
Fixes: https://github.com/vercel/next.js/issues/16825
This adds initial support for reloading the page when `getStaticProps`, `getStaticPaths`, or `getServerSideProps` were changed for a page by triggering a reload when the server output for a page has changed but the client output has not since these methods aren't included in the client output.
Closes: https://github.com/vercel/next.js/issues/13949
This is a small change to the image post-processor logic. When it's looking for images to preload, it will now ignore SVGs, as these are rarely the relevant images for LCP.
This pull request replaces our client-side style transitions with `<style>` tags over async `<link rel=stylesheet>` tags. This should fix some edge cases users see with Chrome accidentally causing a FOUC.
This also removes the need to perform an async operation before starting the render, which should remove any perceivable navigation delay.
---
Fixes#16289
This pull request reuses existing `<link rel=stylesheet>` tags if their `href` matches instead of recreating it. This is in effort to fix an edge case where the browser will FOUC on the tag swap.
This behavior should be sufficiently covered by all the existing CSS cases, as misbehavior would result in the resulting CSS styles being incorrect.
To prevent FOUC, discussed in #10557 i need to store information about css file dependencies for chunk. Right now current implementation just throws away everything but js.
Can there be more than one css file in chunk? If no - code will be simplified.
closes#10557
When navigating from a non-shallow page to a page that was navigated to shallowly in history it causes incorrect page data to be shown since an incorrect shallow navigation is done. We can only maintain shallow routing when the current page was navigated to shallowly and the page being navigated to in history was also navigated to shallowly. Additional tests to ensure this behavior is working has also been added.
Closes: https://github.com/vercel/next.js/issues/7395
Closes: https://github.com/vercel/next.js/issues/14928
Fixes: https://github.com/vercel/next.js/issues/16028
This pull request correctly tracks render cancelation behavior. Prior to this PR, we'd have an unhandled rejection that left the app in a bad state and no routeChangeError event was fired.
---
Closes#16424Fixes#16445
This makes sure to also check if a dynamic route matched after resolving a rewrite on the client to match behavior on the server. It also adds tests for this behavior to ensure it is working properly.
Fixes: https://github.com/vercel/next.js/issues/16454
This fixes a client-side file not being transpiled correctly when rewrites are used. The cross browser tests have been updated to make sure there are rewrites so the related code is included and not dead-code eliminated'
Closes: https://github.com/vercel/next.js/issues/16440
This corrects the case where `/index` is used during revalidation for an optional catch-all route and `index` is passed as a param even though it should be undefined. This also adds test cases to make sure the params are normalized correctly
Fixes: https://github.com/vercel/next.js/issues/16366
We were accidentally allowing data requests to be rendered unconditionally. Instead, we should also check them against the staticPaths result and 404 when appropriate.
---
Fixes#15383
This fixes page checking failing due to the trailing slash being present which causes pages to proxied by a rewrite when they shouldn't be. This also adds additional tests to ensure rewriting to an external resource is working correctly with `trailingSlash: true`
Fixes: https://github.com/vercel/next.js/issues/15700
This corrects the basePath being required check for filesystem routes to not consider the public folder catch-all route since it always matches even if the public file isn't present and instead moves the basePath check inside of the public-folder catch-all. Tests already exist that catch this by adding a public folder to the existing `basepath` test suite
Fixes: https://github.com/vercel/next.js/issues/16332
Closes: https://github.com/vercel/next.js/pull/16350
This interpolates the dynamic values and rebuilds the request URL for fallback SSG pages since the proxy uses the output path for non-prerendered pages on Vercel which can cause inconsistent request URL/`asPath` values for SSG pages. This also adds tests to ensure the `asPath` is correctly updated
Fixes: https://github.com/vercel/next.js/issues/16269
Prior to this PR, `loadPage` would call `loadScript` which would then report if the script failed to load.
This was problematic because `loadScript` notified a failure to load via `pageRegisterEvents`, which would not set the `pageCache` value for future requests.
This means a one-off promise rejection would happen, [in lieu of being] typically consumed within the client-side router, causing a server-side reload.
However, when `loadPage` was used independently (i.e. to preload pages), this promise rejection would be ignored as a preload failure.
When the real routing request comes in, the `loadPage` function skips its attempt to load the `<script>` because it was already in the DOM, and the router would stop functioning.
---
To fix this behavior, I've removed erroneous emits on `pageRegisterEvents` to only happen during the page registration lifecycle (its intended use).
The new behavior is that `loadScript` returns a `Promise` that `loadPage` can track, and if any of the page(s) scripts fail to load, we mark the entire page as errored in `pageCache`. This ensures future requests to `loadPage` will always immediately reject with a `PAGE_LOAD_ERROR`, which causes the server-side redirect at the appropriate point.
---
Fixes#16333
This fixes an edge case where every dozen or so transitions you'll see a flash depending on what's happening on the main thread at the time.
I'm not sure it's possible to test for this case, so we'll just have to do more field testing with this.
This PR replaces `prop-types-exact` (only used in this location) with manual property checking.
Right now, malformed properties sent to `<Link>` are silently handled and only emit a warning in the console.
This leads to confusing/unexpected errors because we try to read a value that is undefined.
To fix this, we'll now throw a proper error when `<Link>` is misused. **This still isn't optimal, however, because we don't have a component stack trace we can give the user**.
We're not going to be able to give the user actionable instructions until React 16.14 at a minimum.
---
Fixes#13951Fixes#16107Closes#13962
This pull request adds a test case for the reproduction provided in #12445. This bug is specifically caused when loading the next page before navigation has actually occurred.
---
Fixes#12445
This fixes the incorrect `/_next/data` URL being generated on client transition due to the `as` value passed to `getRouteInfo` having the `basePath` which is used while interpolating the values for dynamic routes, specifically root catch-all routes. A regression test has also been added to ensure this is working
Closes: https://github.com/vercel/next.js/issues/15747
This updates to not automatically append params to the query for rewrites if one or more of the params are already used in the destination's path. No other behavior is being changed and if the user still wants the params in the query after using them in the destination's path they can manually add them like with redirects.
Closes: https://github.com/vercel/next.js/issues/15626
This adds the following Node.js core polyfills only when the import is used:
- `path`
- `stream`
- `vm`
- `crypto`
- `buffer`
Fixes#15948
We'll have a separate issue about adding warnings for the usage of these modules in the browser, some polyfills like crypto are quite heavy and generally not needed for most applications (included accidentally through node_modules).
Fixes#15928
---
This would cause us to print the message too early and open the browser to a server that wasn't started yet. This waits until we're listening, but before the app is ready fully.
Since we now use query parameters to pass dynamic route params while routing on Vercel, this makes sure we normalize the request URL before populating the `asPath`
Fixes: https://github.com/vercel/next.js/issues/15879
This PR adds a second experimental post-processing step for the framework introduced by @prateekbh in #14746. The image post-processing step scans the rendered document for the first few images and uses a simple heuristic to determine if the images should be automatically preloaded.
Analysis of quite a few production Next apps has shown that a lot of sites are taking a substantial hit to their [LCP](https://web.dev/lcp/) score because an image that's part of the "hero" element on the page is not preloaded and is getting downloaded with lower priority than the JavaScript bundles. This post-processor should automatically fix that for a lot of sites, without causing any real performance effects in cases where it fails to identify the hero image.
This feature is behind an experimental flag, and will be subject to quite a bit of experimentation and tweaking before it's ready to be made a default setting.
Next.js plugins like `@next/mdx` inject additional webpack loaders to compile files, but they omit the necessary loader for Fast Refresh to work.
Instead of making these files deopt out of Fast Refresh, we can automatically detect and inject the loader in these cases.
Fixes#13574
By popular request, this pull request adds support for returning `fallback: 'blocking'` from `getStaticPaths`.
This new mode will cause unknown paths to be rendered on-demand ("SSR") without the static (placeholder) fallback.
This feature is **currently experimental and should not be used in production yet**. It's currently flagged behind `unstable_`:
```
fallback: 'unstable_blocking'
```
TODO:
- [x] Next.js tests
- [ ] Add Vercel support
- [ ] Vercel tests
---
Fixes#15637
