This pull request adds "Vary: Accept" header to responses from the image optimizer (i.e. the /_next/image endpoint).
The image optimizer prefers re-encoding JPG files to WebP, but some browsers (such as Safari 14 on Catalina) do not yet support WebP. In such cases the optimizer uses the Accept header sent by the browser to send out a JPG response. Thus the optimizer's response may depend on the Accept header.
Potential caching proxies can be informed of this fact by adding "Vary: Accept" to the response headers. Otherwise WebP data may be served to browsers that do not support it, for example in the following scenario:
* A browser that supports WebP requests the JPG. The optimizer re-encodes it to WebP. The proxy caches the WebP data.
* After this another browser that doesn't support WebP requests the JPG. The proxy sends the WebP data to the browser.
- [x] Integration tests added
- [x] Make sure the linting passes
This adds a new prop, `onLoadingComplete()`, to handle the most common use case of `ref`.
I also added docs and a warning when using `ref` so we recommend the new prop instead.
- Fixes#18398
- Fixes#22482
This fixes the `font-optimization` test failing from the links/content changing slightly in the snapshot.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
This solves the main use case from Issue #19914.
Previously, we would set the `Cache-Control` header to a constant and rely on the server cache. This would mean the browser would always request the image and the server could response with 304 Not Modified to omit the response body.
This PR changes the behavior such that the `max-age` will propagate from the upstream server to the Next.js Image Optimization Server and allow browser caching. ("upstream" meaning external server or just an internal route to an image)
This PR does not change the `max-age` for static imports which will remain `public, max-age=315360000, immutable`.
#### Pros:
- Fewer HTTP requests after initial browser visit
- User configurable `max-age` via the upstream image `Cache-Control` header
#### Cons:
- ~~Might be annoying for `next dev` when modifying a source image~~ (solved: use `max-age=0` for dev)
- Might cause browser to cache longer than expected (up to 2x longer than the server cache if requested in the last second before expiration)
## Bug
- [x] Related issues linked using `fixes #number`
* fix: react 18 new hydration API
* support react 18
* compat latest react only, fix resolved version
* fix tests
* Some changes based on https://github.com/reactwg/react-18/discussions/5
* fix test
Co-authored-by: Tim Neutkens <timneutkens@me.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
This ensures API routes are not available under the locale path since API routes don't need to be localized and we don't provide the locale to the API in any way currently so the user wouldn't be aware if the localized API route was visited instead of the non-localized.
Fixes: https://github.com/vercel/next.js/issues/25790
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
Fixes#19862
Avoid executing `webpack` property on `loadableGenerated` of loadable component compiled from `next/dynamic` when `require.resolveWeak` is unavailable due to jest runtime missing `require.resolveWeak`.
## Bug
- [x] Related issues linked using `fixes #number`
- [x] unit tests added
This fixes non-stop reloading when visiting `_error` directly in development caused by the `statusCode` being 200 unexpectedly while HMR returns the page as `invalid` which triggers `on-demand-entries` to reload the page.
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
Fixes: https://github.com/vercel/next.js/issues/8036
x-ref: https://github.com/vercel/next.js/pull/8033
This makes sure we don't attempt flushing cache info to disk for `getStaticProps` `redirect` items with `revalidate`
Fixes: https://github.com/vercel/next.js/issues/20816
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
Fixes#26547
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
Currently, there is only a `hashChangeStart` and subsequent `hashChangeComplete` event and no props update (which would be used to get translations, etc.).
Happy for any feedback
fixes#23467
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
This strongly types `Router.events.on` and `Router.events.off`. Previously the event type was `string` but now it's `'routeChangeStart' | 'beforeHistoryChange' | 'routeChangeComplete' | 'routeChangeError' | 'hashChangeStart' | 'hashChangeComplete'`
## Bug
- ~[ ] Related issues linked using `fixes #number`~
- [x] Integration tests added
Closes#25679Closes#23753Closes#15497
Fixes#22329
## Bug
- [x] Related issues linked using fixes#22329
- [x] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
Updates the hotUpdateChunk to include `[runtime]` for web workers support.
Fixes#26152Fixes#19865Fixes#26144
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
This PR does a couple things:
1. Omit svg static imports if the user has defined custom webpack config with svg rule
2. Change TS type to `any` for svg imports to avoid conflicts with other plugins
The idea is that some users want to use `next/image` with static imports for most image types but not for svg and instead inline those images with a plugin.
- Fixes#25950
- Fixes#26130
- Fixes#26176
- Fixes#26196
- Fixes#26067
## Bug
- [x] Related issues linked using Fixes#26130
- [x] Integration tests added
Also logs a message when defaulting, and a warning when using a prerelease build of `react-dom` (e.g. the React 18 alpha) which are not officially supported.
Note: I've done this in `webpack-config.ts` instead of the Next.js config, as we don't actually want you to be able to opt-out *without* downgrading back to React 17, and so it ought to be entirely removed from the config eventually.
## Bug
- [x] Related issues linked using `fixes #26135 `
- [x] Integration tests added
fixes#26135
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #26135 `
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
In the `noscript` img version the correct `src` and `sizes` attributes are overwritten by not necessary inline declaration; in particular using the loaders the `src` attribute not take the right absolute path. I found this issue using a custom loader and because my site didn't indexing any images on the Google image search.
Fixes#24277
This PR is an attempt to fix#25943. The implementation is only a proposal and I'll be happy to take any feedback about it :)
Fixes: #25943
## Bug
- [X] Related issues linked using `fixes #number`
- [x] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
Fixes: https://github.com/vercel/next.js/issues/26163
- Enables excludeDefaultMomentLocales by default
- Adds distDir cleaning (See RFC #6009)
- Adds support for `PORT`
- Removes `router.events` from the server-side router as it should not be used server-side (long-standing todo that is potentially breaking). Note that it's still available as `Router.events` (import Router from 'next/router') and with `useRouter` in `useEffect`. Using it with `useEffect` is the correct way and I've updated the upgrading guide to reflect that
- Added webpack 5 to the upgrading guide
- Removed `Head.rewind` as it's been a no-op since Next.js 9.5 and can now be safely removed from user code
Fixes#11408Fixes#10338Fixes#5554
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
There are strict conditions for using `placeholder=blur` documented in #25949 but this will give the user a better understanding during `next dev` and links to the error.
- Error when `placeholder=blur` and no `blurDataURL`
- The Error for small images with `placeholder=blur` has been changed to a warning
- Added support for blurring a webp image
- Added error page linking to relevant docs
* Add delay to placeholder removal
* Increase jest timeout for image tests
* Use check instead of immediately expecting the result
Co-authored-by: Tim Neutkens <timneutkens@me.com>
Previously we were accepting a `s=1` query string parameter for static imports, but this is not necessary.
Instead, this PR looks at the file path to determine if the header should be `immutable`.
The nice thing here is we don't need to worry about someone trying `s=1` with an external image or 3rd party loader. In that case, we use the upstream `Cache-Control` header as usual.
This change also ensures we don't add the `immutable` header for `next dev`.
Related to PR #24993
## Bug
- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
fixes [#21606](https://github.com/vercel/next.js/issues/21606)
### Description
When using shallow routing and wanting to scroll to top by setting the `scroll` option to `true` it didn't work. This PR fixes this issue.
If you give a Static Image to the Image component, TypeScript will throw a type error. This Pull Request fixes it.
## Bug
- ~~Related issues linked using `fixes #number`~~
- [x] Integration tests added
## ~~Feature~~
- ~~Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.~~
- ~~Related issues linked using `fixes #number`~~
- ~~Integration tests added~~
- ~~Documentation added~~
- ~~Telemetry added. In case of a feature if it's used or not.~~
## ~~Documentation / Examples~~
- ~~Make sure the linting passes~~
---
follow-up #24993
cc @atcastle
* Enable webpack 5 by default for all apps
Still provides a way to opt-out using `webpack5: false` in next.config.js. Also throws an error for `future.webpack5`.
* Update tests
* Update test to run on webpack 4 instead of webpack 5
* disable webpack5 for legacy tests
* Fix stats-config for webpack4
* update tests
* update size for webpack4 test
* move basic suite first
* update basic test
* Add logs
* remove outdated testFutureDependencies job
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Fixes an issue where "env" would be ignored and would crash if there was no top level "presets". Also found that webpack did not invalidate the cache on changes to the babel config, so I also fixed that.
Co-authored-by: Steven <steven@ceriously.com>
Co-authored-by: Tim Neutkens <timneutkens@me.com>
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
* Remove deprecated features
In the next major version we'll want to merge this PR that removes some of the long-time deprecated features, it'll have a positive effect on bundle size.
* Update tests
* Update tests
* Change unsized to layout=fill in test
* Update sizes
* Update rotation test
* Update size limit test
* Update test
* Update test
* Update test
Makes sure a helpful error is shown for `<Link>` with multiple children
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
This ensures the `basePath` is correctly re-added to the `url` after resolving a dynamic route since the `url` stored in history is expected to already contain the `basePath`, an additional test has been added to ensure this is working correctly back/forward through history
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
Fixes: https://github.com/vercel/next.js/issues/25285
## Bug
- [x] fixes#24684
- [x] Integration tests added
Intentionally omitted changing the types for `GetServerSideProps` etc. as its imo less reasonable to leverage SSR with a sync `getServerSideProps`. Can of course change the type too if you consider that also a valid case.
This updates beforeFiles rewrites to continue instead of matching a public file/page immediately after a match, this allows all beforeFiles routes to be checked before matching the filesystem.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
This updates the `rewrites-has-condition` tests to not rely on the `browser.log` method since it's not available with ie11
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
## Summary
Follow up regression test for rewrites with a `has` condition throwing errors in older browsers #25208.
@timneutkens Let me know if this is what you had in mind? 😸
When Image Optimization is enabled, if the URL of the image is not correct as a regular expression (e.g. `/image.png?lang=c++`), Next.js will give an error and fail to build.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
Adds lint rules to the Next.js ESLint plugin to:
- Disallow importing `next/head` inside `pages/_document.js`
- Disallow importing `next/document` outside of `pages/_document.js`
Both rules will be surfaced as **errors** within the recommended config of the plugin.
Fixes#13712#13958
Adds a lint rule warning to the Next.js ESLint plugin if a custom Google Font is added at page-level instead of with a custom document (`.document.js`)
_Note: This will be generalized to include more font providers in the near future._
* fix check in externals that validate if the require is resolve-able for the server
* performance improvements
Fixes#23130
## Bug
- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
This updates this initial PR here https://github.com/vercel/next.js/pull/18146 to resolve merge conflicts and updates tests since we aren't able to update that PR itself.
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
Closes: https://github.com/vercel/next.js/pull/18146
* update webpack to 5.36.2
* use dependOn to optimize chunks
* disable vendor splitting for main and _app chunks
=> decreases bundle size in general, gets rid of the 2 extra vendor chunks shared by all pages.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
This is the image component implementation of the blurry placeholder as described in #24004. The matching server side implementation is currently planned.
## Feature
- [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issue #18858
- [x] Integration tests added
(Documentation and telemetry to follow after server side is implemented)
This PR re-includes ESLint with some notable changes, namely a guided setup similar to how TypeScript is instantiated in a Next.js application.
To add ESLint to a project, developers will have to create an `.eslintrc` file in the root of their project or add an empty `eslintConfig` object to their `package.json` file.
```js
touch .eslintrc
```
Then running `next build` will show instructions to install the required packages needed:
<img width="862" alt="Screen Shot 2021-04-19 at 7 38 27 PM" src="https://user-images.githubusercontent.com/12476932/115316182-dfd51b00-a146-11eb-830c-90bad20ed151.png">
Once installed and `next build` is run again, `.eslintrc` will be automatically configured to include the default config:
```json
{
"extends": "next"
}
```
In addition to this change:
- The feature is now under the experimental flag and requires opt-in. After testing and feedback, it will be switched to the top-level namespace and turned on by default.
- A new ESLint shareable configuration package is included that can be extended in any application with `{ extends: 'next' }`
- This default config extends recommended rule sets from [`eslint-plugin-react`](https://www.npmjs.com/package/eslint-plugin-react), [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks), and [`eslint-plugin-next`](https://www.npmjs.com/package/@next/eslint-plugin-next)
- All rules in [`eslint-plugin-next`](https://www.npmjs.com/package/@next/eslint-plugin-next) have been modified to include actionable links that show more information to help resolve each issue
* Try enabling Babel turbo mode
* Pass config file explicitly to babel turbo loader.
* Update NextBabelLoaderOptions to use `configFile` instead of `babelrc`.
* Re-add support for options passed to next/babel preset with new babel loader.
* Load babel config files depending on their file extension.
* Include `next/babel` if no Babel config is provided.
* Minor cleanup.
* Avoid duplicate `next/babel` entries.
* No need to pass configFile anymore.
* Fix multiple small issues in merging loader opts with cached config.
* Remove redundant logging (that also breaks a test).
* Include file extension CharacteristicsGermaneToCaching.
* bump
* Disable turboMode now that tests pass
Co-authored-by: Dale Bustad <dale@divmain.com>
This ensures when CSS requests stall that they are included in the route load timeout so that stalled CSS requests don't block us from falling back to a hard navigation. This handles a rare case noticed by @pacocoursey where a transition did not complete while attempting to load CSS assets.
## Bug
- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
Fixes#24056.
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
This expands on https://github.com/vercel/next.js/issues/24070 and ensures we show the dev overlay for additional cases like where `_app` or `_document` have syntax errors causing compilation to not be able to complete. This achieves showing the dev overlay even when compilation fails from a syntax error by doing a third minimal compilation in development with the needed client-side assets to render the dev overlay.
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
x-ref: https://github.com/vercel/next.js/issues/24070
This ensures that a duplicate locale key is not prepended to the path when navigating back (using browsers back button) to the root path containing query parameters or a hash value.
Current behaviour:
* `/fr?value=1` -> `/fr/another` -> click browser back button -> `/fr/fr?value=1`
* `/fr?value=1` -> `/fr?value=2` -> click browser back button -> `/fr/fr?value=1`
* `/fr#section` -> `/fr/another` -> click browser back button -> `/fr/fr#section`
* `/fr#section` -> `/fr#another` -> click browser back button -> `/fr/fr#section`
Fix:
Remove query string or hash value from path before determining whether to add the locale to the path in `addLocale` function.
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
Fixes: #24287
This adds an additional test for the change in https://github.com/vercel/next.js/pull/24079 to ensure top-level errors in `_document` are also handled correctly.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
Previously, we weren't recording most (all?) of the Next.js measurements like `Next.js-hydration` in Concurrent Mode. This was mainly because the new API doesn't accept a callback.
Instead of special casing this, I've refactored it so that the measurements are just recorded when Root first flushes (via `useLayoutEffect`), which should be more or less the same timing for the old API.
Concurrent Mode is a little trickier for two reasons:
1. Flushes might be (slightly) delayed due to time-slicing and prioritization
2. Selective hydration might skew measurements in cases where full hydration is aborted
I don't have a good answer for those yet, so they'll need to be addressed when the time comes.
