### What
Use `next-flight-loader` to transform the client components into client
reference in middleware and instrumentation.
Add related required webpack aliases, such as alias for
`react-server-dom-webpack`
### Why
issue reported in
https://github.com/vercel/next.js/pull/65424#issuecomment-2128902585
### What
Add copy stack trace button to copy the original stacktrace in error
overlay.
It will be a dimmed red button with disallowed cursor when it's found
not able to copy.
#### Video
https://github.com/vercel/next.js/assets/4800338/c44e0bf8-f340-41ba-8ee8-4b94fdc298e1
### Why
Makes error reporting easier, users can do one-click to copy the
original text
### What
Removing the `/[...catchall]/<metadata image convention>.js` case from
docs
### Why
Since og image and icon routes are using catch-all routes to handle the
both single or multiple routes. For instance:
`app/opengraph-image.js` can possibly generate two cases:
- single route: `/opengraph-image`
- multi routes with `generateImageMetadata()`: `/opengraph-image/[id]`
We're not able to detect if there's `generateImageMetadata` defined in
the file before mapping the routes, and decided to create the different
routes to either `/opengraph-image` or `/opengraph-image/[id]`. That's
why we're using a catch-all routes to handle them rn.
Related #48106
Related #57349
### What?
Because `createMultiHtmlMatcher` does not use `await` keyword internally
and is not an async function, all `await` in front of the match function
returned from `createMultiHtmlMatcher` was removed in
`test/e2e/app-dir/metadata/metadata.test.ts`.
The JSDoc for `createMultiHtmlMatcher` was also modified.
Co-authored-by: Jiachi Liu <inbox@huozhi.im>
In preparation for the following request adapter work, this removes a
helper function for checking if a request is an RSC one, instead
preferring to use the metadata directly.
This helps readability because we know where it's coming from, and it
keeps the implementation simple.
This allows us to set breakpoints and debug e2e tests without
encountering a timeout after 60 seconds. For example, using:
```
NEXT_E2E_TEST_TIMEOUT=1000000 NODE_OPTIONS=--inspect-brk pnpm test-dev test/e2e/app-dir/metadata/metadata.test.ts
```
Notably, this change also affects the turbopack dev tests in the CI,
where `NEXT_E2E_TEST_TIMEOUT` is currently set to 240 seconds. Since the
same env variable is also used for `jest.setTimeout()`, a test timeout
will now most likely occur due to jest timing out, and not a specific
playwright check (i.e. `waitForElementByCss` or `waitForCondition`)
timing out. This sounds acceptable to me.
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What
* Error on case that readable stream controller tries to close but
stream is either errored or unfinished
* Delay the DOMContentLoaded event to avoid "Connection Closed" error
### Why
Regarding to the new error about readbale stream controller, the new
error we added here is for identifying the connection is closing before
the last bit has been received that's an error case not intentional
close. It's not a proper state for close more for erroring.
As for adding the queuing for the task of dom content loaded callback,
after investigation, I found that if the DOMLoaded execute earlier the
readable stream controller cuold close earlier on client, which lead to
the "Connection Closed." error. Hence we added a `queueMicroTask` here
to delay it after hydrate call.
x-ref: [slack
thread](https://vercel.slack.com/archives/C01A2M9R8RZ/p1715188343813489)
### What
It's not helpful to see the network issue of fetching error on reading
nextjs version in dev overlay
### Why
Error case:
<img width="400"
src="https://github.com/vercel/next.js/assets/4800338/a7852d9b-1f98-4098-8498-a3b832efdbb0">
This should just be ignored, it's fine that the fetching is failed.
There're so many fetch errors code, it's easy to try-catch on fetch
instead of enumerate all the codes
Using the hostname `::` enables dual-stack support. This prevents
`ECONNREFUSED` errors when running tests locally, and `localhost` being
resolved to `::1` (IPv6) instead of `127.0.0.1` (IPv4).
Updates `with-react-hook-form` example by bumping react-hook-form and
other dependencies to their latest versions, along with a minor cleanup
of the UI.
---------
Co-authored-by: Sam Ko <sam@vercel.com>
During integration testing, previously, calls to `next build` could rely
on the project (the Next.js project) level ESLint configuration. In
order to correct this, a new `lint` option was added to `nextBuild` that
can be passed to enabled linting. If this is `false` or `undefined`, a
`--no-lint` argument will be passed to `next build` to prevent it from
running.
Old logic from the pages router was previously being hit during
development. This was more apparent when PPR was enabled as it was
mixing dynamic + static rendering in development which propagated to
errors. This change ensures that requests that are made with `RSC: 1`
are not marked as `/_next/data` URL's, and don't use the same logic
paths.
Previously it was a bit confusing because we used the variable
`isDataReq` in a few places that made it hard to tell what it was
referring to. In this case, the `isDataReq` is actually only used by the
pages router. This renames the `isDataReq` to `isNextDataRequest` to
make it clearer, as well as refactors to ensure that it's not used in
the paths for app routes.
Also to better represent the rendering modes the `supportsDynamicHTML`
variable was renamed to `supportsDynamicResponse`.
Fixes#66241
Revert the revert in #66049
It was erroring in pages api with importing `react-dom/server` as this
is disallowed in app but shouldn't be in pages. It's caused by we're
validating middleware layer as server components but edge pages api is
still bundled in the same layer, where we shouldn't apply the check.
* Separate the api in api layers, and while handling middleware
warnings, checking api layer as well
* No need to check layers while handling externals in edge compiler
* Found a bug that we shouldn't check if `config.transpilePackages` is
defined then we enable `externalDir`, removed that condition. It fails
the telemetry tests case build with code change from this PR.
Add more tests for pages dir and middleware
| | `react` condition | `react-dom/server` condition |
| ---- | ---- | ---- |
| middleware (edge) | react-server | not allowed, failed with dev/build
checks |
| pages/api edge | default condition | default condition |
| pages/api node | default condition | default condition |
Updates `create-next-app` template CSS:
- Declares variable font weights in `localFont` options and removes
instances of `font-synthesis: none`
- Removes Geist font variables from Tailwind config files
- Adds fallback sans typefaces to the `body` CSS
Co-authored-by: Sam Ko <sam@vercel.com>
#64186 removed the pages router implementation from the `with-apollo`
example and replaced it with an app router implementation.
Unfortunately, it did so in an unsupported way.
At this point, we can not support any streaming SSR scenario without
additional helper packages - in the case of the app router, it is vital
to use the `@apollo/experimental-nextjs-app-support` package.
This PR switches the example to our officially supported patterns.
<!-- 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
- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
### Adding or Updating 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
### What?
### Why?
### How?
Closes NEXT-
Fixes #
-->
### What?
Updates create-next-app's templates' `.gitignore` files for parity with
[Yarn's official
recommendations](https://v3.yarnpkg.com/getting-started/qa#which-files-should-be-gitignored),
accounting for Yarn's modern Plug-n-Play functionality.
Fixes#65586
### Why?
New projects initialized with create-next-app presently add various
extraneous files from the Yarn cache to the initial commit. This is most
notable in the case of the Next SWC binary, which may exceed 100M in
some environments and prevent users from pushing their new projects to
free GitHub repositories without rewriting the commit history or setting
up Git LFS.
### How?
I've opted to follow the recommendations for
non-[Zero-Install](https://yarnpkg.com/features/caching#zero-installs)
configurations as Zero-Install may necessitate additional configuration
and present additional complications for unsuspecting users, so I think
it's best left up to the user to opt-in.
Contrary to the example `.gitignore`s provided by Yarn, I've excluded
the `.yarn/sdks` directory as it contains IDE-specific tooling which I
think is also best left up to the user to opt-in to including.
I have retained the current `.gitignore`'s exclusion of the `/.pnp`
directory for backwards compatibility with older versions of Yarn.
### What?
This fixes the "Migrating from Create React App" guide and add some
minor improvements
### Why?
The existing guide was broken due to `next start` not working anymore
when using `output: 'export'` and because the TypeScript configuration
was outdated.
### How?
I've validated the guide by going through each steps on [this
PR](https://github.com/IGassmann/cra-to-nextjs/pull/1).
---------
Co-authored-by: Lee Robinson <me@leerob.io>
