<!--
Thanks for opening a PR! Your contribution is much appreciated.
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:
-->
Fixes https://github.com/vercel/next.js/issues/44132
## Bug
- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
* Filter out the css chunk from `pages/`
* add indent for flight manifests in dev mode for development convenience
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
# Reverts vercel/next.js#43587
PR #43587 breaks the `placeholder="blur"` property on the `<Image />`
component by keeping the `blurStyles`, e.g. the blurred image, after the
image is loaded.
**This regression does _not_ introduce any breaking changes or bugs.**
---
The reason for the original PR was:
> This PR remove `React.useState()` from the `next/image` component. It
was only used in the `onError` case and it was causing Safari to become
very slow when there were many images on the same page. We were seeing
1s delay blocking the main thread when there were about 350 images on
the same page. Chrome and Firefox were not slow.
The original PR is a performance improvement for Safari on a corner
case.
Additionally, when tackling this performance improvement again, the
`blurStyle` needs to know when the the image is done loading so it can
get rid of the blur. The state is updated in `handeLoading()` and isn't
just used `onError`.
## Fixes issues
- Fixes#43829
- Fixes#43689
## To reproduce
For reference this when #43587 was pulled into Next.js
[v13.0.6-canary.3](https://github.com/vercel/next.js/blob/v13.0.6-canary.3/packages/next/client/image.tsx)
- Regress the `image.tsx` to
[v13.0.6-canary.2](https://github.com/vercel/next.js/blob/v13.0.6-canary.2/packages/next/client/image.tsx)
- Do a local build with the regressed `image.tsx` on (current canary
build)
[v13.0.8-canary.0](https://github.com/vercel/next.js/releases/tag/v13.0.8-canary.0)
- Example code, (import any image you like) make sure to use
`placeholder="blur"`
```typescript
import Image from 'next/image'
import CatImage from '../public/cat.png'
<Image
src={CatImage}
width={500}
height={500}
alt="Cat"
priority
placeholder="blur"
/>
```
- Image will still have the blur after the image is loaded
- Before and after screenshot
Co-authored-by: Steven <steven@ceriously.com>
<!--
Thanks for opening a PR! Your contribution is much appreciated.
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:
-->
Partial solutions for WEB-225.
One of the issue we want to improve is version bump process across
multiple dependencies sharing same transitive dependencies. There were
known cases of last-minute build failures of next-swc due to this. The
biggest thing is we have lot of dependenceis rely on swc_core, and
consolidating it altogether is tricky.
PR introduces `next-binding`, which reexports all the related
dependencies that next-swc and turbopack commonly uses. Unfortunately,
this is not a complete solution, but at least it'll make `upfront` cost
to turbopack when it try to update swc_core and others, so by the time
upgrading it in next-swc we expect minimal friction. Note not 0
friction: due to how cargo behaves for the merging all of the features,
there's still chances to have some build failures but meaningfully less
I believe.
I think the easiest way to describe before / after is having some
diagrams. This is rather simplified to illustrate problems easily, i.e
when it comes to actual build if there are same version of deps cargo
will dedupe, so below illustaration only would occur for non-compatible
version cases, etcs.
**Before**
```mermaid
graph TD
A[next-swc] --> B(next-dev)
A --> C(swc_core)
A --> D(swc_emotion)
D --> E(swc_core)
A --> F(styled_jsx)
F --> E
A --> G(mdxrs)
G --> H(swc_core)
B --> I(swc_core)
B --> J(swc_emotion)
J --> K(swc_core)
```
**After**
```mermaid
graph TD
A[next-swc] --> B(next-binding)
B --> C[swc_core]
B --> D[swc_emotion]
D --> I[swc_core]
B --> H[styled_jsx]
B --> F[next-dev]
B --> J[node-file-trace]
F --> C
H --> I
B --> E(mdxrs)
E --> G(swc_core)
```
You can see repeated dependencies (`swc_core`, `swc_emotion`) occurs lot more in next-swc in `before`, including next-swc top level direct import itself. In result, update process have to align between next-swc, turbopack, swc-plugins and others.
With newly proposed changes, `next-swc` no longer directly owns deps reduces those repetaed deps. At the moment of version bump, only `next-binding` need to be updated.
This brings small caveat however : next-swc does not directly update `swc_core`, but have to bump turbopack and its transitive dependencies. Given our bump process usually requires to bump up turbopack anyway, I wouldn't consider this as hard blocking though.
## Feature
NEXT-54
When there's an error in the one of the root level pages, there's no way to handle it. The team discussed this and decided there should be a global error boundary to pick up anything not handled further down in the tree. It can be called `global-error.js`.
Co-authored-by: Tim Neutkens <6324199+timneutkens@users.noreply.github.com>
Co-authored-by: Jiachi Liu <inbox@huozhi.im>
This should solve the problem that CSS hash happens before PostCSS
loaders.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/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`
- [ ]
[e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
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`](https://github.com/vercel/next.js/blob/canary/contributing.md)
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Co-authored-by: Jiachi Liu <inbox@huozhi.im>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Fixes#43854 , followup for #44011. Normalize the bundlePath so it works
in all cases
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
The json schema was incorrectly warning because `port: ''` is valid and we document and use it in examples. The empty string is different than undefined
- empty string: match only URLs without a port
- undefined: match URLs with any port
I noticed this when running one of our examples:
```
pnpm next dev examples/image-component
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn - Invalid next.config.js options detected:
- The value at .images.remotePatterns[0].port must be 1 character or more but it was 0 characters.
See more info here: https://nextjs.org/docs/messages/invalid-next-config
```
## Bug
The `findDOMNode` will be exported from ReactDOM in esm mode, but it's
not defined for SSR since SSR is using react-dom server stub bundle
which doesn't contain any thing. So `import { findDOMNode } from
'react-dom'` will error in that case with bundling.
Since it's only being used on client, we import ReactDOM and call
`ReactDOM.findDOMNode` to avoid bundling error and adding a condition to
tree-shake it off on client
[slack
thread](https://vercel.slack.com/archives/C03KAR5DCKC/p1670608621289259)
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
This PR fixes#41064.
In some particular cases, while using a middleware and shallow routing
the navigation get stucks and stop refreshing the page. After futher
investigation it seems that a line of code was added that causes the
router pathname to be incorrect and then making Next believe it's the
same page that is loading.
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/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`
- [ ]
[e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
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`](https://github.com/vercel/next.js/blob/canary/contributing.md)
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Add default head to app dir, when there's no`head.js`, use the default
head with the following meta tags
```html
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
```
It will be replaced if there's custom head.js in child layout.
NEXT-169
<!--
Thanks for opening a PR! Your contribution is much appreciated.
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:
-->
Fixes [#43367
(comment)](https://github.com/vercel/next.js/issues/43367#issuecomment-1338617317)
This fixes the issue in which pages that are in Route Groups return
status code 500 when built with `output: "standalone"` because of the
lack of required chunks in `.next/standalone/.next/server/chunks` by
handling their `.nft.json` files properly through using their
denormalized page paths, rather than their normalized ones to resolve
those files in `copyTracedFiles`.
## Bug
- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/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`
- [ ]
[e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
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`](https://github.com/vercel/next.js/blob/canary/contributing.md)
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Previously, query parameters were not available on 404 pages because
calling the router methods would change the pathname in the browser.
This change adds support for the query to update for those pages without
updating the path to include the basePath.
This additionally narrows some Typescript types that were previous set
to `any` which highlighted some type errors that were corrected.
Fixes: https://github.com/vercel/next.js/issues/35990
Co-authored-by: JJ Kasper <jj@jjsweb.site>
arrow function was trying to use arguments binding but wanted arguments
of the lambda not the nearest normal function. The narrowest change is
to convert to function expression. We could also use varargs rest syntax
since this runs in runtimes that should all support that I think. I
don't think it really matters though.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
Fixes#43895
There's a `is_server_components` condition introduced in #42426 but it's
always truthy so the `ssr:false` is not erased properly. Then in #42589
the flag is removed but also the optimization is removed as well. This
PR reverts the unexpected change removed in #42589 to keep the removal
for client dynamic imports on server side. Add tests to keep there's no
trace
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
## Context
There has been [some reports ](https://github.com/vercel/next.js/issues/42514)of OOMs-related crashes with Next 13. Whilst we're fixing the memory leaks that are causing this, some of which are caused by upstream issues, this PR makes Next.js' dev server restarts if it detects that it is gonna crash soon.
You can disable this behaviour by passing `__NEXT_DISABLE_MEMORY_WATCHER=1` to the env process.
## Details
Under the hood, we're using Node's cluster API to create a child worker that will basically watch the memory usage after every request and then kill itself if it goes over 90% of the maximum heap allowance.
## Test plan
I added manually a leaking function that I called before handling a request. I then manually tested that the server re-started when we were near the limit.
```
function createMemoryLeak() {
console.log('createMemoryLeak', process.memoryUsage().heapUsed / 1024 / 1024)
for (let i = 0; i < 10; i++) {
buffer.push(new Array(1000000).fill('a'))
}
}
```
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/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`
- [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) 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`](https://github.com/vercel/next.js/blob/canary/contributing.md)
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Currently `useSearchParams` bails out of static generation altogether, forcing the page to be dynamic. This behaviour is wrong. Instead it should still be statically generated, but `useSearchParams` should only run on the client.
This is achieved by throwing a "bailout to client rendering" error. If there's no suspense boundary the whole page will bailout to be rendered on the client. If there is a suspense boundary it will only bailout from that point.
~This PR also adds handling for `export const dynamic = 'force-static'` combined with `useSearchParams`. If it is enabled it will return an empty `ReadonlyURLSearchParams` and skip the bailout to client rendering. Since the `staticGenerationAsyncStorage` only is available on the server - `forceStatic` is sent to the `app-router` to enable sending an empty `URLSearchParams` to match the server response.~
https://github.com/vercel/next.js/pull/43603#discussion_r1042071542 the implementation was wrong, added skipped tests and todo comment for now.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/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`
- [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) 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`](https://github.com/vercel/next.js/blob/canary/contributing.md)
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm build && 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 doesn't change any behavior, its just refactoring.
- renamed `webpack/loaders/next-image-loader.js` to `.ts`
- moved duplicate code into shared function `optimizeImage()`
- support `height` as optional param
- convert `extension` to `contentType`
This will reduce the bundle size and also give user proper hint to upgrade to `head.js`
* Mark `next/head` as noop in app dir
* Add warning for users to check the upgration guide to migrate it to head.js
