This commit implements the main proposal presented in
https://github.com/vercel/next.js/issues/39241
to add attribution to web vitals.
Attribution adds more specific debugging info to web vitals,
for example in the case of Cumulative Layout Shift (CLS),
we might want to know
> What's the first element that shifted when the single largest layout shift occurred?
on in the case of Largest Contentful Paint (LCP),
> What's the element corresponding to the LCP for the page?
> If it is an image, what's the URL of the image resource?
Attribution is *disabled* by default because it could potentially
generate a lot data and overwhelm the RUM backend.
It is enabled *per metric* (LCP, FCP, CLS, etc)
As part of this change, `web-vitals` has been upgraded to v3.0.0
This version contains minor bug fixes, please see changelog at
9fe3cc02c8Fixes#39241
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## 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.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Rename `optoutServerComponentsBundle` to `serverComponentsExternalPackages` which describes the feature better.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`
## 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.
- [ ] Errors have a helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
This PR adds a new `experimental.enableUndici` option to let the
developer switch from `next-fetch` to `undici` as the underlying
polyfill for `fetch` in Node.js.
In the current implementation, Next.js makes sure that `fetch` is always
available by using `node-fetch`. However, we do not polyfill in Node.js
18+, since those versions come with their own `fetch` implementation
already, built-in.
Node.js 18+ uses `undici` under the hood, so letting the developer use
`undici` earlier could make the migration easier later on.
Eventually, we hope to be able to stop polyfilling `fetch` in an
upcoming major version of Next.js, shipping less code.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## 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.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Co-authored-by: Balázs Orbán <info@balazsorban.com>
Co-authored-by: Sukka <isukkaw@gmail.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Co-authored-by: Steven <steven@ceriously.com>
Merge e2e tests customized `node_modules` with installed `node_modules`,
to let you debug easily locally without moving folder between
`node_modules` and `node_modules_bak`
Also add `optoutServerComponentsBundle` to config schema.
For some context:
[https://vercel.slack.com/archives/CGU8HUTUH/p1662124179102509](https://vercel.slack.com/archives/CGU8HUTUH/p1662124179102509)
Continuation of #40221 and #40227
Adds `experimental.fontLoaders`.
SWC next-font-loaders (#40221) transforms font loader (e.g. #40227) call
expressions into an import with the function call arguments as a query.
The imports will be matched by `next-font-loader`. It runs the
configured font loaders - emits font files and returns CSS. Exports are
added, and the font-family is made locally scoped. The returned CSS is
turned into a CSS module with `css-loader` which lets you consume the
font-family.
`FontLoaderManifestPlugin` creates a manifest of the preloaded font
files for each entrypoint. Preload/preconnect are then added in
`_document.tsx` if any font files were found for that path.
Co-authored-by: JJ Kasper <jj@jjsweb.site>
`config.experimental.serverComponents` is currently required to be
enabled or disabled together with `config.experimental.appDir` (which
means `serverComponents === appDir` otherwise it will throw) so there is
no reason to keep both of them. This PR removes `serverComponents` from
Next.js and only rely on `appDir` instead.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`
## 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.
- [ ] Errors have a helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
<!--
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## Feature
- [x] 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
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
- [ ] -->
## Feature
- [x] Implements https://github.com/vercel/next.js/discussions/40112
- [x] Integration tests added
Adds a new option to the current font optimization to enable
experimental font size adjust
The new `optimizeFonts` config will be
```
optimizeFonts: {
inlineFonts: true,
experimentalAdjustFallbacks: false,
},
```
To enable the feature, set `experimentalAdjustFallbacks: true`
`optimizeFonts: false` will disable the entire feature (including
inlining google font definition)
Co-authored-by: JJ Kasper <jj@jjsweb.site>
<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order to make sure your PR is handled as smoothly as possible we
request that you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->
This serves to add support for [Subresource
Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)
hashes for scripts added from the new app directory. This also has
support for utilizing nonce values passed from request headers (expected
to be generated per request in middleware) in the bootstrapping scripts
via the `Content-Security-Policy` header as such:
```
Content-Security-Policy: script-src 'nonce-2726c7f26c'
```
Which results in the inline scripts having a new `nonce` attribute hash
added. These features combined support for setting an aggressive Content
Security Policy on scripts loaded.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## 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.
- [x] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Co-authored-by: Steven <steven@ceriously.com>
<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order to make sure your PR is handled as smoothly as possible we
request that you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->
## Bug
- [X] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
Fixes#36251
This PR updates a few features from experimental to stable status:
- `next/future/image` component
- `remotePatterns` configuration
- `unoptimized` configuration
For historical reasons, Next.js has been falling back to polyfill certain Node.js APIs in the browser. `webpack` itself stopped doing it, and so should Next.js. This might unexpectedly break some packages in the ecosystem though, so it is being introduced as an experimental flag. These imports will now throw a `Module not found` error and the package maintainer should make sure that the library isn't relying on these Node.js APIs when the package is meant for browser usage.
Let's take a look at a common example, the `crypto` API, which can be imported as `import crypto from "crypto"` but [should already be available in browsers](https://caniuse.com/cryptography). Until now, Next.js has fallen back to use a polyfilled version for the import, which resulted in a bundle-size increase.
```js
import crypto from 'crypto'
import { useEffect } from 'react'
export default function Page() {
useEffect(() => {
console.log(crypto)
}, [])
}
```
it imports `crypto`, which currently resolves to [`crypto-browserify`](https://www.npmjs.com/package/crypto-browserify).
So the bundle will include `crypto-browserify` as well:
```sh
Page Size First Load JS
┌ ○ / 131 kB 213 kB # <--
└ ○ /404 194 B 82.2 kB
+ First Load JS shared by all 82 kB
├ chunks/framework-bcc2dc0ea27ab0c6.js 45.1 kB
├ chunks/main-dc2421aef72299b4.js 35.4 kB
├ chunks/pages/_app-a85935458980c5c2.js 708 B
└ chunks/webpack-9b312e20a4e32339.js 836 B
```
Here, we can just remove the import, as we are [safely accessing](https://nextjs.org/docs/migrating/from-create-react-app#safely-accessing-web-apis) the [Crypto Web API](https://caniuse.com/cryptography):
```diff
- import crypto from 'crypto'
import { useEffect } from 'react'
export default function Page() {
useEffect(() => {
console.log(crypto)
}, [])
}
```
Which will reduce the bundle size:
```sh
Page Size First Load JS
┌ ○ / 269 B 82.2 kB # <--
└ ○ /404 194 B 82.1 kB
+ First Load JS shared by all 81.9 kB
├ chunks/framework-bcc2dc0ea27ab0c6.js 45.1 kB
├ chunks/main-dc2421aef72299b4.js 35.4 kB
├ chunks/pages/_app-a85935458980c5c2.js 708 B
└ chunks/webpack-fd82975a6094609f.js 727 B
```
This is harder to detect if the `crypto` import is in a third-party package though. By setting `experimental: { fallbackNodePolyfills: false }`, Next.js will now fail at build-time and should show where the unnecessary import comes from, so the developer can reach out to the package maintainer to fix this issue.
Note: There might be differences between the living standard and some of these older polyfills, so you have to make sure your code works well without the polyfilled version.
Related feedback: https://twitter.com/lfredolo/status/1539608666026000384
# Bug
I would assume that this should be generated from TypeScript, but based on the [original PR](https://github.com/vercel/next.js/pull/38498/files) it wasn't clear that there was a way to generate these automatically.
Fixes the type of `styledComponents. topLevelImportPaths` and `styledComponents.meaninglessFileNames` so that it matches the [TypeScript type](https://github.com/vercel/next.js/blob/canary/packages/next/server/config-shared.ts#L457).
This was causing a warning here:
```
warn - Invalid next.config.js options detected:
- The value at .compiler.styledComponents must be a boolean but it was an object.
- The value at .compiler.styledComponents.meaninglessFileNames must be a boolean but it was an array.
- The value at .compiler.styledComponents must match exactly one schema in oneOf.
```
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm lint`
Co-authored-by: chaseadamsio <103162876+chaseadamsio@users.noreply.github.com>
`experimental.optimizeCss` from `next.config.js` can be an object containing the critters' option:
70a53e0789/packages/next/server/post-process.ts (L224-L232)
The PR corrects the ajv schema and the type definition of `experimental.optimizeCss`.
* Add next.config.js validation with ajv
* update manifest
* update lib type
* remove old tests
* update to pre-build validation code
* ensure validate output is ncced
* Apply suggestions from code review
Co-authored-by: Steven <steven@ceriously.com>
* Add example of typing next.config.js
Co-authored-by: Steven <steven@ceriously.com>
