See https://github.com/vercel/turbo/pull/4776
This adds support for:
* Default and custom global app 404 pages (`app/not-found`).
* Segment-level 404 pages (`app/segment/not-found`).
This also updates Turbopack:
* https://github.com/vercel/turbo/pull/4787 <!-- Tobias Koppers -
Bugfixes for free var and binding replacement -->
* https://github.com/vercel/turbo/pull/4789 <!-- Alex Kirszenberg -
Print a warning when importing Sass files -->
* https://github.com/vercel/turbo/pull/4776 <!-- Alex Kirszenberg -
Leave pathname formatting up to the caller -->
* https://github.com/vercel/turbo/pull/4790 <!-- Tobias Koppers - remove
inital compilation message by default -->
## TODO:
- [ ] ~~The dev overlay shows up when `notFound()` is called, it should
be hidden~~ (moved to WEB-980)
- [ ] ~~Navigating to the global 404 page doesn't work~~ (this is a bug
in Next.js, see NEXT-963)
- [x] Tests.
---------
Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>
### What?
allows to change blur mode for structured images
also improve performance for static metadata images in app dir by avoiding computing blur placeholder
### Why?
we might want to change the blur mode (in dicussion)
### How?
adds an enum to control the mode
### What?
- closes WEB-800
This PR mimics fallback google font behavior for the turbopack from https://github.com/vercel/next.js/pull/47428, replaces fallback to capsize and adjust read logics.
This PR does three things:
- Vendors the package `react-server-dom-webpack@experimental` as
`react-server-dom-webpack-experimental` similar to React and React DOM
- Upgrades all vendored React packages
- Re-lands the `experimentalReact` flag to switch between `@next` and
`@experimental` channels of React for app dir.
Fix NEXT-926.
### What?
fixes handling of GlobalError interop
adds a test case for client component bug
### Why?
app dir client component interop is broken
### Turbopack changes
* https://github.com/vercel/turbo/pull/4597 <!-- Tobias Koppers - add
rspack to our benchmark suite -->
* https://github.com/vercel/turbo/pull/4761 <!-- Tobias Koppers - Do not
use interop logic on proxy modules -->
### What?
add a test case
### Why?
Some packages expect the default export of a commonjs module to be the whole exports object when importing from ESM.
turbo PR: https://github.com/vercel/turbo/pull/4738
### What?
add .svg to the list of images that that return metadata
### Why?
.svg files should also return width and height
### How?
see https://github.com/vercel/turbo/pull/4741
We bind to an IPv6 unspecified address (`::`), which makes the old message say "started server on :::3000", and that's kinda ugly. The new message will say "[::]:3000".
This PR updates the way we preload fonts. Previously we tracked which
fonts we needed to preload for each layer and rendered a `<link
rel="preload" href="..." as="font" />` tag for each preloadable font.
This unfortunately gets blocked by data fetching and we want to be able
to hint these preloads as soon as possible. Now that React support Float
methods in RSC we can use `ReactDOM.preload(..., { as: "font" })` to
implement this functionality
This PR makes the following changes
1. expose a `preloadFont` method through the RSC graph
2. expose a `preconnect` metho through the RSC graph
3. refactor the preloads generation to use `preloadFont` instead of
rendering a preload link
4. If there are no fonts to preload but fonts are being used in CSS then
a `preconnect` asset origin is called instead of rendering a preconnect
link
5. instead of emitting a data attribute per font preload indicating
whether the project is using size-adjust we now emit a single global
meta tag. In the future we may get more granular about which fonts are
being size adjusted. In the meantime the current hueristic is to add
`-s` to the filename so it can still be inferred.
In the process of completing this work I discovered there were some bugs
in how the preconnect logic was originally implemented. Previously it
was possible to get multiple preconnects per render. Additionally the
preconnect href was always `"/"` which is not correct if you are hosting
your fonts at a CDN. The refactor fixed both of these issues
I want to do a larger refactor of the asset loading logic in App-Render
but I'll save that for a couple weeks from now
Additionally, the serialized output of preloads now omits the word
anonymous when using crossorigin so tests were updated to reflect
`crossorigin=""`
Additionally, tests were updated to no longer look for the size-adjust
data attribute on preloads
Additionally, There is a note about leaving a `{null}` render in place
to avoid a conflict with how the router models lazy trees. I'll follow
up with a PR addressing this
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.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(s) that you're making:
## For Contributors
### Improving Documentation or adding/fixing Examples
- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md
### Fixing a bug
- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md
### Adding a feature
- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md
## For Maintainers
- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change
### Why?
### How?
Closes NEXT-
Fixes #
-->
### What?
This PR changes turbopack's appDir source lookup to honor existing
behavior to ignore `_` started path. With this changes, turbopack able
to pass test
`test/e2e/app-dir/underscore-ignore-app-paths/underscore-ignore-app-paths.test.ts`,
fixes WEB-844.
Internally it simply amends two parts, first if given path starts with
_, do not add those into entrypoints to it will not be served. If path
starts with `%5F` instead, replacing path to _ so it can be served.
---------
Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>
### What?
We previously ran all route handlers with the edge runtime, which means
you can't use built in node.js modules
With this PR, the runtime can be selected as documented in the next.js
docs
Fixes WEB-873
Depends on https://github.com/vercel/turbo/pull/4491
This adds support for the new `output: 'export'` configuration, and
propagates the value through to our Node.js rendering code to render.
Unfortunately, we don't support page-level configs at the moment, so we
can't set a `export const config = { dynamic: 'force-dynamic' }` and
test that the export value is being received (I've manually verified it,
though).
Fixes WEB-842
Mostly mirrors the changed made in
https://github.com/facebook/react/pull/26632 to our SWC transform. The
implementation difference is that the AST transformer only adds a
general purpose wrapper call `createServerReference(id)` from an aliased
import, so we can easily change the underlying function in the bundler.
This change only affects the client layer (when `self.config.is_server
=== false`).
Needs to be landed after another React upgrade:
https://github.com/vercel/next.js/pull/48697.
cc @sebmarkbage.
This PR implements preloading of CSS from RSC.
1. The underlying Flight protocol was extended in
https://github.com/facebook/react/pull/26502 to allow sending hints from
RSC to SSR and Client runtimes. React was updated to include these
changes.
2. We now call `ReactDOM.preload()` for each stylesheet used in a
layout/page layer
There are a few implementation details to take note of
1. we were previously using the `.browser` variant of a few React
packages. This was a holdover from when there was just browser and node
and we wanted to use the browser variant b/c we wanted the same code to
work in edge/node runtimes. React now publishes a `.edge` variant which
is like `.browser` but expects to be server only. This is necessary to
get the opt-in for `AsyncLocalStorage`.
2. Even with the above change, AsyncLocalStorage was not patched on the
global scope until after React was loaded. I moved this into a module
which is loaded first
3. The component passed to RSC's `renderToReadableStream` is not
actually part of the RSC module graph. If I tried to call
`ReactDOM.preload()` inside that function or any other function defined
inside `app-render.tsx` file it would actually see the wrong instance of
`react-dom`. I added a new export on the RSC top level export which
exposes a `preloadStyle(...)` function which just delegates to
`ReactDOM.preload(...)`. This makes the preload run in the right module
graph
~There are a couple of bugs in React that this work uncovered that I
will upstream. We may want to delay merging until they are addressed.
I'll update this comment when that is complete.~
1. ~React, during SSR, can emit a preload for a style twice in some
circumstances because late discovered stylesheets don't consider whether
a preload has already been flushed when preparing to reveal a boundary
they are within~
2. ~React, during RSC updates on the client, can preload a style that is
already in the document because it currently only looks for existing
preload links and does not consider if there is a stylesheet link with
the same href.~
~both of these issues will not break functionality, they just make the
network tab look at bit more noisy. We would expect network deduping to
prevent multiple actual loads~
The above React bugs were fixed and included now in the React update in
this PR
---------
Co-authored-by: Shu Ding <g@shud.in>
