Previously we use custom webpack alias for specific react versions for non server side node runtime aliases. This PR alias the entire folders of `react/` and `react-dom/` so that no more alias in next.config is required but only the nodejs require hook.
* Alias `react` and `react-dom` by default
* Use `react@experimental` to run server components integration test
* Drop with-react-17 test util, add `__NEXT_REACT_CHANNEL` as an env var for testing and development to specify the react channel is 17 or new experimental version
* Adds tests to ensure `eslint-plugin-next`'s available rules are properly exported and recommended rules are defined correctly.
* Condenses imports.
* Sets default recommended value.
* replace Object.hasOwn for node 14
Co-authored-by: JJ Kasper <jj@jjsweb.site>
In a previous PR (#37278), the dependencies for benchmarks were moved to a subdirectory.
This ensures the same is done for other packages using `rimraf` which means we can remove it from the root package.json
This allows configuring / overriding the default options of the `styled-components` swc transform and allows using the `css` prop support, which was already implemented, but not available.
Edit: made the CSS prop transform run before the display name, so it gets picked up by that and receives the (deterministic) name.
Relates to #30802
### What's in there?
This is a followup of https://github.com/vercel/next.js/pull/37695.
For the dev server to clean stacktraces, we're decorating errors caught during code evaluation (`getServerSideProps` or middleware).
However, when these errors are asynchronously raised, we can't decorate them before processing them, leading to this fallback logic:
bf7bf8217f/packages/next/server/dev/next-dev-server.ts (L775-L779)
Thanks to latest improvement of the edge-runtime in 1.1.0-beta.4, we can now catch unhandled rejection and uncaught exception, and decorate them.
### How to test?
Please reuse the existing tests who already covered these cases:
`pnpm testheadless --testPathPattern middleware-dev-errors`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
* Refactor data fetching to support getting headers
* Relax `getNextPathnameInfo` type
* Add test for middleware internal redirects
* Export `ParsedRelativeUrl` type
* Refactor `getMiddlewareEffects`
* Move rewrite i18n test to middleware rewrite tests
* Fix bug parsing pathname info
* Normalize data requests to page requests for middleware
* Ensure there is a header `x-nextjs-matched-path` for middleware rewrites on data requests
* Extract `getDataHref` to a function
* Stop using `getDataHref` for flight
* Always set the query in `dataHref` independently of if it is SSG
* Add test for recursive rewrites
* Refactor dynamicPath validation to `matchHrefAndAsPath`
* Add `dataHref` to `FetchDataOutput`
* Extract `matchesMiddleware` function
* Add `hasMiddleware` option to `fetchNextData`
* Move preflight test
* Remove preflight test
* Add middleware prefetch tests
* Remove preflight
* Attempt to reduce bundle size
Include `withMiddlewareEffects` and `matchHrefAndAsPath` into `router`
Bring `getDataHref` back to `page-loader`
Bring `resolveDynamicRoute` back to `router`
* Reduce arg duplication for `withMiddlewareEffects`
* Remove some async/await and spreads to reduce bundle size
* Upgrade `edge-runtime` & clone `Request` on redirects to mutate headers
* Add some rewrite tests
Co-authored-by: Kiko Beats <josefrancisco.verdu@gmail.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
* test: upgrade playwright-chromium from 1.14.1 to 1.22.2
This is a prereq for #36490 because the Events Timing API
used to measure Interaction to Next Paint (INP, experiemental web vital)
is only available in Chromium >= v98.
* update test
Co-authored-by: JJ Kasper <jj@jjsweb.site>
This PR introduces [Edge Runtime](https://edge-runtime.vercel.app/) for emulating [Edge Functions](https://vercel.com/features/edge-functions) locally.
Every time you run a [middleware](https://nextjs.org/docs/advanced-features/middleware) locally via `next dev`, an isolated edge runtime context will be created.
These contexts have the same constraints as production servers, plus they don't pollute the global scope; Instead, all the code run in a vm on top of a Node.js process.
Additionally, `@edge-runtime/jest-environment` has been added to make easier testing Edge Functions in a programmatic way.
It dropped the following polyfills from Next.js codebase, since they are now part of Edge Runtime:
- abort-controller
- formdata
- uuid
- web-crypto
- web-streams
Co-authored-by: Gal Schlezinger <2054772+Schniz@users.noreply.github.com>
Although it’s not intended for use in TypeScript, TypeScript still offers some nice features when it’s used in next.config.js (completion, hovers, `"checkJs": true`).
## 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
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Linked to issue #32209.
## 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`
- [ ] 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
There is one tsec violation that is fixed in this PR:
### 1. ban-script-src-assignment: route-loader.ts
XSS can occur with the line script.src = src in appendScript(src, script) if src can be controlled by a malicious user. From tracing through the code, it was determined that src comes from the function `getFilesForRoute(route)`. The behaviour of this function differs depending on the environment (development vs. production), but in both cases the function will construct strings that lead to valid file paths. These strings depend on two variables: `assetPrefix` and `route`, but due to the nature of the constructed strings it was determined that the scripts here are safe to use. Thus, the solution was to promote these strings to `TrustedScriptURL`s. This is the Trusted Types way of declaring that the script URL passed to the DOM sink is safe from DOM XSS attacks.
To create a `TrustedScriptURL`, a policy needs to be created. This policy was put in its own file: `client/trusted-types.ts`. This policy has the name `nextjs`. If this name should be changed to something else, feel free to change it now. However, once it is released to the public and application developers begin using it, it may be harder to change the value since any application developers with a custom policy name allowlist would now need to update their `next.config.js` headers to allow this new name.
The code was tested in a sample application to ensure it behaved as expected.
This updates our `yarn next` command to leverage react v18 by default and removes the need for the test require hook/config modifying when testing react 18. There are some fixtures we need to investigate react 18 support in follow-ups:
- `test/integration/client-navigation-a11y`
- `test/integration/critical-css`
- `test/integration/custom-error-page-exception`
- `test/integration/font-optimization`
- AMP specific tests
- Updates the React 18 test suite to the latest React version.
- Upgrade `react-refresh` module
Fixes#35518Fixes#35703
## 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 `yarn lint`
Co-authored-by: Jiachi Liu <4800338+huozhi@users.noreply.github.com>
### Changes
* Remove top-level suspense boundary
* Pipe stream resolved from returned promimse of `renderToReadableStream`
* Remove jsx-runtime alias hack
### Test Changes
Since top level suspense boundary is removed, now content are filled in 1st SSR
## Bug
- [x] Fixes#33809
- [x] Related to #33218
- [x] Integration tests added: Usage of [html-validator](https://www.npmjs.com/package/html-validator) to validate the HTML.
- [x] Errors have helpful link attached, see `contributing.md` (N/A)
In PR #26968, we added Set of loaded images that was removed in #33474 erroneously.
We still need to track loaded images since we can't rely on `img.complete`, especially if the parent uses `react-virtualized`.
Tested on https://nextjs.org/showcase
## Feature
Implements feature requested in https://github.com/vercel/next.js/issues/30805.
A few people including myself have been looking to use Relay with Next.JS and want to use the new Rust Compiler. This is my stab at an implementation.
### How it works?
Finds all `graphql` tagged template experssions and replaces them with `require`s to the file generated by Relay.
### Where I need help
- I've only worked with Rust a handful of times so I would appreciate any feedback on my use of language features.
- Is there any performance overhead to many duplicate usages of `require`? I imagine there's a cache in place but I want to be sure.
- I've added some unit tests & integration tests but I might be missing some use cases. Feel free to comment some use cases I'm not thinking about.
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Documentation added
- I haven't added any docs since this is an experimental API.
## Documentation / Examples
You're expected to be running the Relay Compiler along side Next.JS when you're developing. This is pretty standard. I wouldn't expect people to have any problem with this.
### Usage
In your `next.config.js`
```js
module.exports = {
experimental: {
relay: {
language: 'typescript', // or 'javascript`
artifactDirectory: 'path/to/you/artifact/directory' // you can leave this undefined if you did not specify one in the `relay.json`
}
}
}
```
Co-authored-by: Tim Neutkens <6324199+timneutkens@users.noreply.github.com>
Fixes#33462
Tried upgrading to v3, but we rely on the `timeout` property:
e5dee17f77/packages/next/telemetry/post-payload.ts (L12)
Which was removed since it's non-standard:
https://github.com/node-fetch/node-fetch/blob/main/docs/v3-UPGRADE-GUIDE.md#the-timeout-option-was-removed
I wanted to keep this PR minimal, so I did not try to work around the above.
## 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 `yarn lint`
* Fix build-native jobs
* Update to latest turbo
* fix extra space
* fix windows shell
* Update to latest turbo
* Bump Turbo (#32703)
* Bump turbo to canary
* Bump turbo
* Update yaml too
* add less specific restore key
* update more restore keys
* Fix non-unique key and cache wasm build
* ensure turbo is installed for new jobs
* remove old wasm cache
* update directory check
* bump
* re-add if publish checks
Co-authored-by: Jared Palmer <jared@jaredpalmer.com>
This PR adds a new command to the `next` CLI.
Running `next info` will print useful information to the terminal about how/where Next.js is run. This information can be added to the Bug report when opening an issue in the repository.
This makes reporting issues more accurate and doesn't require the user to guess certain details, the command will retrieve it on their behalf.
Example output:
```sh
$ npx --no-install next info
Operating System:
Platform: linux
Version: #22-Ubuntu SMP Fri Nov 5 13:21:36 UTC 2021
Binaries:
Node: 16.13.0
npm: 8.1.0
Yarn: 1.22.17
pnpm: 6.24.2
Relevant packages:
next: 12.0.8-canary.14
react: 17.0.2
react-dom: 17.0.2
```
The idea is based on #32858
## 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`
- [ ] 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 `yarn lint`
Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
* Move resolve-url-loader into Next.js
Fixes#32157
Moves resolve-url-loader into Next.js and strips out all features that are not used like `rework` support. Will reduce install size as well as allow for optimizing the approach in the near future.
* Update precompiled
* Use loader-utils 2
* Update trace test
* Revert "Update trace test"
This reverts commit 7c09a07871cc0ab72d5fcd4151a2d8efbc1aad8f.
* Add es5-ext as it's used in trace tests
* Update join-function.js
* Update bundle5.js
Implements Turborepo for the Next.js repository and leverage it for native build caching.
Co-authored-by: Maia Teegarden <2865858+padmaia@users.noreply.github.com>
Removes `yarn test` from the scripts as it has the wrong options. `yarn testonly` or `yarn testheadless` are the way to run tests. Fixes#32031
## 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 `yarn lint`
## Bug
Fixes#31892
react 18: requires camelcase for those props
```
Warning: Invalid DOM property `imagesrcset`. Did you mean `imageSrcSet`
```
react 17: requires lowercase for those props
```
Warning: React does not recognize the `imageSrcSet` prop on a DOM element.
```
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
### Utils
* Add command `yarn next-react-18 test/integration/any-react-18-app/`
* Add util `withReact18`
```js
const withReact18 = require('../../react-18/test/with-react-18')
module.exports = withReact18({
experimental: {
concurrentFeatures: true,
},
})
```
Generally, AVIF quality can be lower compared to WebP so we can adjust this for the user so that it looks roughly the same depending on if the browser supports AVIF or WebP.
- Fixes#31254
- Related to https://github.com/lovell/sharp/issues/2850
## 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 `yarn lint`
Related to: https://github.com/vercel/next.js/issues/30802
Ensuring that our tests are not broken with latest React changes.
## 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 `yarn lint`
## 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 `yarn lint`
* Remove prebuilt binaries from repo
* Prefer locally built binary
* Add binary packages as optionalDependencies
* Remove build-native workflow for prebuilt binaries
* Remove binaries from checkCompiled job
* Change build-native command to default to dev
* Add build-native-dev and have tests depend on it
* Update contributing
* Run ls to make inspect artifact download
* Use correct artifact download path
* Try using reusable workflows
* Resort to duplication for now
* Inspect artifact download
* Ensure native is copied for PR stats
* Copy after ref checkout and log binaries for PR stats
* fix typo
* copy right before linking/packing
* Use fs.copy
* fix test for now
Co-authored-by: jj@jjsweb.site <jj@jjsweb.site>
## Bug
- [x] 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
I updated rust dependencies and node dependencies.
* Use recommended pattern in testing example
Since the official linter for testing library, `eslint-plugin-testing-library` recommends using `screen` to write queries, this MR updates the testing library example to follow the pattern recommended by the linter.
> DOM Testing Library (and other Testing Library frameworks built on top of it) exports a screen object which has every query (and a debug method). This works better with autocomplete and makes each test a little simpler to write and maintain.
> This rule aims to force writing tests using built-in queries directly from screen object rather than destructuring them from render result. Given the screen component does not expose utility methods such as rerender() or the container property, it is correct to use the render returned value in those scenarios.
See the `prefer-screen-queries` rules docs for more info: https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/prefer-screen-queries.md
* Update devDependencies
* Install and configure test linting
* Use recommended pattern in test
* Update test names for consistency
* Update docs
* Set jest environment in each file
* Use root true in `with-jest` eslint config
* Ensure nested .eslintrcs are not loaded for repo lint
Co-authored-by: jj@jjsweb.site <jj@jjsweb.site>
* Move unit tests to one folder
* Migrate unit tests to TypeScript
* add test types to lint
* Ensure ts(x) tests are run with util
* Add tsx extension to jest config
* bump
This updates our `jest` configuration to no longer use `babel-jest` and instead uses `@swc/jest` which is much faster. This also updates to the latest version of `jest`, fixes our `tsconfig.json` used for tests (previously types in `node_modules` weren't resolved correctly), and ensures `next/dist` isn't un-necessarily transpiled in `jest`.
Timings for `yarn testheadless test/unit/` on CI
- before: 3m 30s - 4m ([example run](https://github.com/vercel/next.js/runs/3394701995))
- after: under 1m ([example run](https://github.com/vercel/next.js/pull/28400/checks?check_run_id=3395161621))
Timings for `yarn testheadless test/unit/` locally on m1 mac
- before: 90.16 seconds
- after: 29.92 seconds
## Feature
I was struggling to get my local dev build working as a local package.json override, and types do not seem to be generated by `yarn dev`, so I had to figure out a cohesive way to build the project start-to-finish (and also clean the project).
Building the project and all types ended up just being `yarn prepublish`, here aliased as `yarn build`, and I added a `yarn clean` script. These two together should make it very difficult for any contributor to be confused how to generate a final build including all type declarations.
- [ ] 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
- [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
b2a888c144/contributing.md (building)
* Use sharp for image transformations when available
* Refactor resizeImage and add sharp warning
* only show sharp warning once per instance
* Modify sharp error message
* Add documentation for optional sharp dependency
* Update docs/basic-features/image-optimization.md
Co-authored-by: Steven <steven@ceriously.com>
* Import types for sharp
* Update lockfile
* Add testing against sharp
* use fs-extra for node 12
* Rename test sharp path variable
* Apply suggestions from code review
Co-authored-by: Steven <steven@ceriously.com>
* update squoosh specific test
* Apply suggestions from code review
Co-authored-by: Steven <steven@ceriously.com>
* update tests
* Apply suggestions from code review
Co-authored-by: Steven <steven@ceriously.com>
Co-authored-by: Steven <steven@ceriously.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
`@swc/core` will trigger a very rare complication issue on mac m1, it's fixed in version 1.2.66
x-ref: https://github.com/swc-project/swc/pull/1939
cc @kdy1
## 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
- Use SWC to compile Next.js core server files
- Ensure only @babel/runtime/helpers/interopRequireDefault helper is used
Just an initial comparison to compare size difference of this change.
## 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
