Commit graph

5528 commits

Author SHA1 Message Date
Vercel Release Bot
1e5a21cbdc
Update Turbopack development test manifest (#64838)
This auto-generated PR updates the development integration test manifest
used when testing Turbopack.
2024-04-22 08:04:57 +02:00
Sebastian Silbermann
512d342f3b
Update @testing-library/react used in tests (#64851)
Closes NEXT-3183
2024-04-21 21:47:39 +00:00
Zack Tanner
b914ad8192
fix interception route rewrite regex not supporting hyphenated segments (#64805)
The function we use to generate a string with named parameters to pass
into `path-to-regexp` currently doesn't properly handle non-word
characters (namely, for the purposes of this bugfix, hyphens). As a
result, `pathToRegexp` will convert something like `/foo/:bar-baz` into
`/^\/foo(?:\/([^\/#\?]+?))-baz[\/#\?]?$/i`, effectively only treating
the `:foo` as part of the regex capture group and leaving a dangling
-baz.

This means using an interception route within a dynamic segment (such as
`/foo/[bar-baz]`) would not properly trigger the route interception

Fixes #64766
2024-04-19 18:11:32 -06:00
Jeffrey Zutt
c1ca6ac92b
fix: remove traceparent from cachekey should not remove traceparent from original object (#64727)
### What?

I submitted PR #64499 , it got merged, but it contains a mistake.
I'm terribly sorry about this!

By removing the traceparent from the cachekey, we mistakenly removed the
header from the original object.
Causing the actual request to be executed without the traceparent
header.

### Why?

Creating a cachekey should not alter the original object.

### How?

Flip the arguments for Object.assign

---------

Co-authored-by: Jeffrey <jeffrey@jeffreyzutt.nl>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
2024-04-19 23:13:58 +00:00
Vercel Release Bot
e3f74e0454
Update Turbopack development test manifest (#64762)
This auto-generated PR updates the development integration test manifest
used when testing Turbopack.
2024-04-19 12:14:14 +00:00
Balázs Orbán
a532e32eca
Reapply "chore(test): run related E2E deploy tests on PRs" (#64682) (#64712) 2024-04-19 11:02:43 +02:00
Will Binns-Smith
61a0f09c59
Turbopack: Don’t show stack traces for internal modules (#64228)
See
ac7607f977/packages/next/src/client/components/react-dev-overlay/server/shared.ts (L59-L62).

Test Plan: Added an e2e test.


Closes PACK-2919
2024-04-18 16:56:24 -07:00
Wyatt Johnson
64e2ffc1e0
[actions] Enforce body limit using Transform stream (#64694)
<!-- 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?

This ensures that the body limit option is enforced on all request
bodies sent to the Node.js runtime, not just the multipart field size
limits.

### Why?

The documentation states that this should limit the body size,
previously it only limited the field size.

### How?

This uses a `Transform` stream from Node.js. [Based on my
benchmarks](https://gist.github.com/wyattjoh/c470d98095da2f95f5920396aba2a206)
using the transform stream added next to no overhead, yet it did
simplify the implementation quite a bit. Assuming this is due to the
already performant stream support within Node.js.
 

Closes NEXT-3151
2024-04-18 16:04:20 -06:00
Zack Tanner
fd4466e8d1
fix root page revalidation when redirecting in a server action (#64730)
When a server action triggers a redirect, we're incorrectly applying a
refresh marker to the segment they were on, rather than the segment they
were being redirected to. As a result, when revalidation occurs (via
`revalidateX` or `router.refresh()`), the top-level segment would be
replaced with data for an incorrect segment.

For example, if triggering a redirect action from `/redirect` to `/`,
the router state tree would save a reference to `/redirect`. The next
time a refresh or revalidate happens, it'd refresh the segment data for
`/redirect` instead of `/`.

Fixes #64728


Closes NEXT-3156
2024-04-18 19:32:35 +00:00
Tim Neutkens
1bce086a55
Fix next-swc native binary write in tests (#64744)
## What?

In the past folks on the team have reported that anytime the SWC /
Turbopack binary changes they had to suddenly run `pnpm build-native` in
`packages/next-swc`, even though they didn't build from source before.
While investigating optimizing packing for tests I found that it's
copying the native binary into the original repository not the temporary
repository, which then keeps the file there, even after the tests
finish. This fixes the path to use the tmp repository instead.


<!-- 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 #

-->


Closes NEXT-3157
2024-04-18 11:43:51 -07:00
Zack Tanner
39661815d8
prevent erroneous route interception during lazy fetch (#64692)
When the router cache can't find a cache node for the requested segment,
it performs a request to the server to get the missing data. This
request to the server currently will always include the `next-url`
header, and on soft-navigations, the router will route the request to
the intercepted handler. This lazy fetch is treated as a soft navigation
by the server, and will incorrectly return data for the intercepted
route.

Similar to the handling in `router.refresh`, and the server action
reducer, we should not include the `next-url` header if there's no
interception route currently in the tree, as otherwise we'll be
erroneously triggering the intercepted route.

Fixes #64676
Closes NEXT-3146
2024-04-18 13:22:13 +00:00
Vercel Release Bot
c14c0bd3c7
Update Turbopack development test manifest (#64709)
This auto-generated PR updates the development integration test manifest
used when testing Turbopack.
2024-04-18 10:59:50 +02:00
Zack Tanner
10d5c278bc
Revert "fix TypeError edge-case for parallel slots rendered multiple times" (#64690)
Reverts vercel/next.js#64271

This appears to be causing problems rendering error boundaries on SPA
navigations and needs further investigation

Closes NEXT-3150
2024-04-17 23:45:20 +00:00
Jiachi Liu
81defe2b6d
Fix: resolve mixed re-exports module as cjs (#64681)
### Why

If you have a client entry that mixing `default` re-export and `*`
re-export, atm we cannot statically analyze all the exports from this
the boundary, unless we can apply barrel file optimization for every
import which could slow down speed.

```js
// index.js
'use client'
export * from './client'
export { default } from './client'
```

Before that happen we high recommend you don't mixing that and try to
add the client directive to the leaf level client module. We're not able
to determine what the identifiers are imported from the wildcard import
path. This would work if we resolved the actual file but currently we
can't.

### What

When we found the mixing client entry module like that, we treat it as a
CJS client module and include all the bundle in client like before what
we have the client components import optimization.

Ideally we could warn users don't apply the client directive to these
kinda of barrel file, and only apply them to where we needed.


Fixes #64518 
Closes NEXT-3119
2024-04-18 01:06:29 +02:00
JJ Kasper
3aa3f51f2d
Revert "chore(test): run related E2E deploy tests on PRs" (#64682)
Reverting for now as this is failing on all PRs 

Reverts vercel/next.js#63763

Closes NEXT-3147

x-ref: [slack
thread](https://vercel.slack.com/archives/C04DUD7EB1B/p1713391373933249)
x-ref: [slack
thread](https://vercel.slack.com/archives/C04KC8A53T7/p1713385017892539)
2024-04-17 22:40:21 +00:00
Patrick Dahms
048697bd55
fix(next-server): 'quiet' setting delegate for custom server (#64512)
## Info

I did not create a GitHub issue, but this PR for fixing the issue. Hope
that's okay.

## The bug

We run a 'normal' custom server described here:
https://nextjs.org/docs/pages/building-your-application/configuring/custom-server

```ts
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const port = 3000;
const app = next({ dev, port, quiet: !dev })
const handle = app.getRequestHandler()
// ...
```

The `quiet` settings is missed in some deeper Next.js internal api
calls. For that reason, the setting did not work at all. This works only
in production mode.

## Testing

I tried to implement a test in `/test/production/custom-server` but I
failed to get the `stderr` messages. When someone give me some guidance,
I will add a new test.

Here are some criteria:

- need: custom server with `quiet: true` setting
- need: a next.js page with thrown error. e.g. `export const
getServerSideProps = () => { throw new Error('failed') }`
- need: collect all `stderr` messages

I tested the fix in our project by editing the files in `node_modules`
-- it worked.

## Background

We upgrade our project from next `13.3.4` to `14.2.0` and saw this
regression. I can not tell in which version this bug was added. We run a
Next.js + 'custom server' + Docker setup. Because we have a lot of
traffic, we need to suppress the standard Next.js logging and using our
own logging.


<!-- 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 #

-->
2024-04-17 13:07:50 -07:00
Jiachi Liu
1e3a1cbaab
Upgrade typescript to 5.3 (#64043)
Closes NEXT-2997

---------

Co-authored-by: eps1lon <sebastian.silbermann@vercel.com>
2024-04-17 18:35:29 +02:00
Tim Neutkens
1fd93eed90
Improve top level await coverage (#64508)
## What?

- Changes webpack output target to `es6` (required for `async function`
output)
- Adds tests for top level await in server components and client
components (App Router)
- Converted the async-modules tests to `test/e2e`
- Has one skipped test that @gnoff is going to look into. This shouldn't
block merging this PR 👍


Adds additional tests for top level `await`.

Since [Next.js
13.4.5](https://github.com/vercel/next.js/releases/tag/v13.4.5) webpack
has top level await support enabled by default.

Similarly Turbopack supports top level await by default as well.

TLDR: You can remove `topLevelAwait: true` from the webpack
configuration.


In writing these tests I found that client components are missing some
kind of handling for top level await (async modules) so I've raised that
to @gnoff who is going to have a look.

<!-- 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 #

-->


Closes NEXT-3126
Fixes https://github.com/vercel/next.js/issues/43382
2024-04-17 17:44:40 +02:00
Balázs Orbán
3192172898
chore(test): run related E2E deploy tests on PRs (#63763) 2024-04-17 11:06:23 +00:00
Shu Ding
754fadacf3
Revert "fix(next): global not-found not working on multi-root layouts" (#64601)
Reverts #63053.

Closes NEXT-3135
2024-04-17 11:19:18 +02:00
Jiachi Liu
8b82225fea
Fix ASL bundling for dynamic css (#64451)
### Why

For app page rendering on edge, the `AsyncLocalStorage` (ALS) should be
bundled as same instance across layers. We're accessing the ALS in
`next/dynamic` modules during SSR for preloading CSS chunks. There's a
bug that we can't get the ALS store during SSR in edge, I digged into it
and found the root cause is:

We have both import paths:
`module (rsc layer) -> request ALS (shared layer)`
`module (ssr layer) -> request ALS (shared layer)`

We expect the ALS to be the same module since we're using the same layer
but found that they're treated as different modules due to applying
another loader transform on ssr layer. They're resulted in the same
`shared` layer, but with different resource queries. This PR excluded
that transform so now they're identical across layers.


### What

For webpack, we aligned the loaders applying to the async local storage,
so that they're resolved as the same module now.

For turbopack, we leverage module transition, sort of creating a new
`app-shared` layer for these modules, and apply the transition to all
async local storage instances therefore the instances of them are only
bundled once.
To make the turbopack chanegs work, we change how the async local
storage modules defined, separate the instance into a single file and
mark it as "next-shared" layer with import:

```
any module -> async local storage --- use transition, specify "next-shared" layer ---> async local storage instance
```

Closes NEXT-3085
2024-04-17 10:18:09 +02:00
Zack Tanner
f93ae7c89e
fix TypeError edge-case for parallel slots rendered multiple times (#64271)
### What
When rendering a parallel slot multiple times in a single layout, in
conjunction with using an error boundary, the following TypeError is
thrown:

> Cannot destructure property 'parallelRouterKey' of 'param' as it is
null

### Why
I'm not 100% sure of the reason, but I believe this is because of how
React attempts to dededupe (more specifically, "detriplficate") objects
that it sees getting passed across the RSC -> client component boundary
(and an error boundary is necessarily a client component). When React
sees the same object twice, it'll create a reference to that object and
then use that reference in future places where it sees the object. My
assumption is that there's a bug somewhere here, as the `LayoutRouter`
component for the subsequent duplicated parallel slots (after the first
one) have no props, hence the TypeError.

### How
Rather than passing the error component as a prop to `LayoutRouter`,
this puts it as part of the `CacheNodeSeedData` data structure. This is
more aligned with other properties anyway (such as `loading` and `rsc`
for each segment), and seems to work around this bug as the
`initialSeedData` prop is only passed from RSC->client once.

EDIT: Confirmed this is also fixed after syncing the latest React, due
to https://github.com/facebook/react/pull/28669

Fixes #58485
Closes NEXT-2095
2024-04-17 01:18:06 +00:00
Zack Tanner
ddf2af59c6
fix incorrect refresh request when basePath is set (#64589)
`initialCanonicalUrl` differs from the `canonicalUrl` that gets set on
the client, such as when there's a basePath set.

This hoists the `canonicalUrl` construction up so we can re-use it when
adding refetch markers to the tree.

This also renames `pathname` -> `path` since it also includes search
params. I added a test to confirm no extra erroneous fetches happened in
both cases.

Fixes #64584


Closes NEXT-3130
2024-04-16 18:01:46 -07:00
Zack Tanner
e9aeb9e1b9
memoize layout router context (#64575)
Since `AppRouterState` is promise-based (so we can `use` the values and
suspend in render), the state itself isn't stable between renders. Each
action corresponds with a new Promise object. When a link is hovered, a
prefetch action is dispatched, even if the prefetch never happens (for
example, if there's already a prefetch entry in the cache, and it
doesn't need to prefetch again). In other words, the prefetch action
will be dispatched but won't necessarily change the state.

This means that these no-op actions that don't actually change the state
values will trigger a re-render. Most of the context providers in
`AppRouter` are memoized with the exception of `LayoutRouter` context.
This PR memoizes those values so that consumers are only notified of
meaningful updates.

Fixes #63159


Closes NEXT-3127
2024-04-16 16:23:39 -07:00
Vercel Release Bot
065cefd29d
Update Turbopack development test manifest (#64579)
This auto-generated PR updates the development integration test manifest
used when testing Turbopack.
2024-04-16 21:01:48 +02:00
Jiachi Liu
2a1e17063b
fix: filter out middleware requests in logging (#64549)
### What

When middleware.js is present, the logging is duplicated. We should
filter out the 1st middleware request and only log the actual one going
through request handler / renderer

Closes NEXT-3125
2024-04-16 16:17:06 +02:00
Zack Tanner
9fb775e2f8
fix refresh behavior for discarded actions (#64532)
When an action is marked as "discarded", we enqueue a refresh, since the
navigation event will be invoked immediately without waiting for the
action to finish. We refresh because it's possible that the discarded
action triggered some sort of mutation/revalidation, and we want the
router to still be able to respond to that new data.

However there's a bug in this logic -- it'll only enqueue the refresh
action if there were no other actions in the queue, ignoring the case
where something is still in the queue. This makes sure that the refresh
is handled after `runRemainingActions` finishes.

When adding a test for the server component case (which doesn't hit this
refresh branch), I noticed `LayoutRouter` caused React to suspend
indefinitely, because it got stuck in the `use(unresolvedThenable)`
case. We should only suspend indefinitely if we kicked off a the
`SERVER_PATCH` action, as otherwise it's possible nothing will ever
break out of that branch.

Fixes #64517
Closes NEXT-3124
2024-04-16 06:56:48 -07:00
Jiachi Liu
fa30290353
Fix cjs client components tree-shaking (#64558)
## What

Determine if the client module is a CJS file and `default` export is
imported, then we include the whole module instead of using webpack
magic comments to only extract `default` export.

## Why

Unlike ESM, The `default` export of CJS module is not just `.default`
property, we need to include `__esModule` mark along with `default`
export to make it function properly with React client module proxy


Fixes #64518
Closes NEXT-3119
2024-04-16 15:06:42 +02:00
Jimmy Lai
d52d32f423
perf: improve Pages Router server rendering performance (#64461)
### What

This PR's goal is to improve the throughput performance of the Next.js
server when handling Pages Router routes.

Note that the results from this are very synthetic and do not represent
the real-life performance of an application. If we only wanted to handle
hello worlds, we could probably make this even faster but on production,
a slow fetch call to your DB is probably what's slowing you down.

I'll look into App Router next.

### Why?

I guess I got nerd-sniped into it 😃 

### How?

A few optimizations:
- I looked deeply at the pipeline for rendering a Pages Router page. I
noticed a lot of intermediary streams being created here and there to
eventually be concatenated to a simple string. I think this is probably
left over code from when we wanted to support streaming there and so
there's some code that was shared with the App Router, which we
absolutely don't need I think. I refactored it to be slightly simpler
with just a few string concats here and there.
- misc: I removed some redundant Promises being created here and there
and added a small inline optimisation to eliminate `if (renderOpts.dev)`
code in production.

### Nummies

Test setup: hello world pages router app, next start + autocannon

- requests handled in 10s: 18k  -> 33K, **~80% improvement**
- avg latency: 4.89ms -> 2.8ms, **~42% improvement**
- avg req/res: 1846.5 -> 2983.5, **~61% improvement**

Before

<img width="742" alt="image"
src="https://github.com/vercel/next.js/assets/11064311/658e7ade-eba7-4604-a7c9-619bd51a5ec8">

vs

after

<img width="880" alt="image"
src="https://github.com/vercel/next.js/assets/11064311/2f46cf69-b788-4db2-bf90-6f65dc7abd82">




<!-- 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 #

-->


Closes NEXT-3103
2024-04-16 14:25:45 +02:00
Vercel Release Bot
abf3ca2d7d
Update Turbopack development test manifest (#64546)
This auto-generated PR updates the development integration test manifest
used when testing Turbopack.
2024-04-16 10:47:25 +00:00
Tobias Koppers
064788fee3
fix HMR for cases where chunking changes (#64367)
* test case for https://github.com/vercel/turbo/pull/7947
* fix source map retrieval for HMR-updated assets

Closes PACK-2944
2024-04-16 12:36:41 +02:00
Adam Jones
f563940f69
next/script: Correctly apply async and defer props (#52939)
### Summary

Fixes #52935

`next/script` has a `Script` component that supports an `async` prop.
However, when scripts are loaded with the `async` prop set to false, the
script is loaded as if async was set to true. This may cause scripts to
execute out of order. Repro:
https://github.com/domdomegg/next-async-script-reproduction

I think this is occurring because Next uses setAttribute to set the
async and defer attributes. However, this is not a valid way to set
these properties on a script. This is because . Demo:
https://jsfiddle.net/6ktpfae1/

This PR fixes this behaviour by using removeAttribute after calling
setAttribute (rather than using setAttribute "false"). This appears to
result in correct behaviour.

Given it appears this workaround was already applied in `next/head`,
I've harmonised the code between these two.

### Next steps

I think this PR is ready for review. I acknowledge there are no test
changes, but there are no existing tests for `next/script` at all and
creating them I think would be disproportionally difficult given issues
in #52943.

---------

Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
Co-authored-by: Sam Ko <sam@vercel.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
2024-04-15 15:01:50 -07:00
Will Binns-Smith
f79440260c
Turbopack: Allow client components to be imported in app routes (#64520)
Resolves #64412

This adds a client transition to the app route `ModuleAssetContext` and
the corresponding transforms so that client components can be safely
imported and referenced (as their proxies) in app routes.

Test Plan: Added an integration test


Closes PACK-2964
2024-04-15 14:18:56 -07:00
Jiwon Choi
81450de6af
hotfix: hardcoded skip turbopack tests to manifest (#64515)
cc @shuding 

CI run failed after #63053 on turbo production, which had not yet been
targeted for turbo.

x-ref: #63103

---------

Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Co-authored-by: Leah <8845940+ForsakenHarmony@users.noreply.github.com>
Co-authored-by: Jiachi Liu <inbox@huozhi.im>
2024-04-15 19:46:42 +00:00
Tobias Koppers
6178693b39
disable production chunking in dev (#64488)
### What?

The production chunking plugin shouldn't be enabled in development

### Why?

It doesn't handle HMR yet


Closes PACK-2956
2024-04-15 21:22:22 +02:00
Jiwon Choi
2bd27e72e5
fix(next): Metadata.openGraph values not resolving basic values when type is set (#63620)
### What?

The string value of `Metadata.openGraph.emails` throws error:

```tsx
export const metadata = {
  openGraph: {
    type: 'article',
    emails: 'author@vercel.com',
  },
};
```

Error:

```sh
r.map is not a function
```

The type is:

```tsx
type OpenGraphMetadata = {
  // ...
  emails?: string | Array<string>
}
```

### Why?

Basic values such as `emails` and `phoneNumbers` were not included when
`ogType` was set while resolving the values.

### How?

Include basic values when resolving the metadata.

Fixes #63415
2024-04-15 21:17:48 +02:00
JJ Kasper
4024a89ee8
Fix DynamicServerError not being thrown in fetch (#64511)
This ensures we properly skip calling a fetch during build-time that has
`cache: 'no-store'` as it should only be called during runtime instead.

Fixes: https://github.com/vercel/next.js/issues/64462

Closes NEXT-3114
2024-04-15 10:09:57 -07:00
Jiwon Choi
30521f20ff
fix(next): global not-found not working on multi-root layouts (#63053)
## Why?

For multi-root layouts (route groups on the root with their root
layouts, no layout file on the root), it is not possible to use global
`not-found` since the `layout` is missing on the root.

```sh
.
└── app/
    ├── (main)/
    │   └── layout.js
    ├── (sub)/
    │   └── layout.js
    └── not-found.js --> ERR: missing layout
```

Current Behavior:

```sh
not-found.js doesn't have a root layout. To fix this error, make sure every page has a root layout.
```

## What?

Let multi-root layouts also benefit from the global `not-found`.

## How?

Wrap root `not-found` with default layout if root layout does not exist.
Although this solution is not `multi-root` specific, it won't produce
critical issues since a root `layout` is required for other cases.

Fixes #55191 #54980 #59180
2024-04-15 18:25:53 +02:00
Sebastian Silbermann
edb9f7a142
Add typechecking test for all entrypoints (#64478) 2024-04-15 17:52:44 +02:00
Damien Simonin Feugas
e7a8645cb8
BREAKING CHANGE: remove deprecated analyticsId from config, and the corresponding performance-relayer files and tests (#64199)
### 🤔 What's in there?

We've deprecated config's `analyticsId` in 14.1.1 [almost 3 months
ago](https://github.com/vercel/next.js/releases/tag/v14.1.1-canary.2).
Users can opt in fot `@vercel/speed-insights`, or use
`useReportWebVitals` to report to any provider they'd like.

This PR:
- removes `analyticsId` key from configuration
- stops setting `__NEXT_PUBLIC_ANALYTICS_ID` env variable when the key
was present
- stops injecting `performance-relayer` file, when the variable is set
- cleans up related test code.
2024-04-15 15:23:30 +00:00
Ryota Murakami
4623eace76
chore: Update pnpm v8.15.1 to v8.15.7 (#64479)
Here are the release notes for pnpm versions v8.15.2 through v8.15.7,

- [v8.15.2 Release
Notes](https://github.com/pnpm/pnpm/releases/tag/v8.15.2)
- [v8.15.3 Release
Notes](https://github.com/pnpm/pnpm/releases/tag/v8.15.3)
- [v8.15.4 Release
Notes](https://github.com/pnpm/pnpm/releases/tag/v8.15.4)
- [v8.15.5 Release
Notes](https://github.com/pnpm/pnpm/releases/tag/v8.15.5)
- [v8.15.6 Release
Notes](https://github.com/pnpm/pnpm/releases/tag/v8.15.6)
- [v8.15.7 Release
Notes](https://github.com/pnpm/pnpm/releases/tag/v8.15.7)
2024-04-15 14:54:28 +00:00
Jiachi Liu
cb8fb3291a
Fix client boundary inheritance for barrel optimization (#64467)
### What

Inherit the client boudaries from the found matched target in load
barrel

### Why
The root cause with the barrel transform, we missed the client boundary
directive during the transform.
Since the new version of mui's case looks like this:

Import path
page.js (server module) -> `<module>/index.js` (shared module) ->
`<module/subpath>/index.js` (client module) ->
`<module/subpath/sub-module.js> (client module)

After our transform, we lost the `"use client"` which causes the
mismatch of the transform:

In `rsc` layer: the file pointing to the sub module entry
(`<module/subpath>/index.js`), but without the client boundary.


Fixes #64369 
Closes NEXT-3101
2024-04-14 23:36:20 +02:00
Zack Tanner
a5bb7c46b1
router restore should take priority over pending actions (#64449)
Since the router processes events sequentially, we special case
`ACTION_NAVIGATE` events to "discard" a pending server action so that it
can process the navigation with higher priority. We should apply this
same logic to `ACTION_RESTORE` events (e.g. `router.back()`) for the
same reason.

Fixes #64432


Closes NEXT-3098
2024-04-13 10:49:57 -07:00
Zack Tanner
f602b2979c
default fetchCache to no-store when force-dynamic is set (#64145)
`fetchCache` is a more fine-grained segment level cache-control
configuration that most people shouldn't have to use. Current semantics
of `dynamic = "force-dynamic"` will still treat the fetch as cacheable
unless explicitly overriding it in the fetch, or setting a segment level
`fetchCache`.

The `dynamic` cache configuration should be seen as a "top-level"
configuration, while more fine-grained controls should inherit logical
defaults from the top-level. Otherwise this forces people to opt-into
the `fetchCache` configuration, or manually override each `fetch` call,
which isn't what you'd expect when forcing a segment to be dynamic.

This will default to not attempting to cache the fetch when
`force-dynamic` is used. As a result, I had to update one of the
`app-static` tests to use `revalidate: 0` rather than `force-dynamic`,
as the revalidate behavior is slightly different in that it won't modify
the revalidation time on a fetch if it's non-zero.

Closes NEXT-2067
2024-04-13 17:05:47 +00:00
Zack Tanner
14ed612dbc
tweak test for Azure (#64424)
Looks like the `useTempDir` function throws when running in Azure rather
than piping the message to stderr. This makes the test resilient to both
cases.

<!-- 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 #

-->


Closes NEXT-3095
2024-04-13 10:05:25 -07:00
Jiachi Liu
7ef6c4eb17
Revert "Fix: css in next/dynamic component in edge runtime" (#64442)
The fix is not correct, we already have request ALS wrapping the request
in app-render, shouldn't get another one for edge adapter. This is
actually a bundler bug

Reverts vercel/next.js#64382

Closes NEXT-3097
2024-04-13 13:32:18 +02:00
Colton Ehrman
9994e74a6c
fix(next-lint): update option --report-unused-disable-directives to --report-unused-disable-directives-severity (#64405)
## Why?

The Option name and type has been incorrect for
`--report-unused-disable-directives` (it's likely that
https://github.com/vercel/next.js/pull/61877 exposed this.

For correctness, we have updated the name to
`--report-unsed-disable-directives-severity` →
https://eslint.org/docs/v8.x/use/command-line-interface#--report-unused-disable-directives-severity.

- Fixes https://github.com/vercel/next.js/issues/64402

---------

Co-authored-by: samcx <sam@vercel.com>
2024-04-12 22:09:05 +00:00
Jiachi Liu
56d0988af7
Fix: css in next/dynamic component in edge runtime (#64382)
### What

Wrap async local storage for all edge runtime routes in adapter 

Basically fixed the case reported in [this
tweet](https://x.com/keegandonley/status/1778538456458854880)

### Why

We're relying on the ALS for dynamic css preloading but we didn't wrap
the ALS for request handlers for edge. So if you have CSS imports in
`next/dynamic` in edge runtime it would break.

Closes NEXT-3085
2024-04-12 10:52:40 +02:00
Jiachi Liu
0b3ead5e6b
test: skip turbopack build test (#64356)
x-ref:
https://github.com/vercel/next.js/actions/runs/8649384009/job/23715530094?pr=64348

Closes NEXT-3079
2024-04-12 09:23:01 +02:00
Wyatt Johnson
4b44857159
[PPR] Added generateMetadata tests (#64080)
<!-- 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?

This adds a missing test case for a page which accesses dynamic API's
within `generateMetadata`. It also adds a test case to verify that any
of the URL's being tested can succeed based on the components link
components (it relies on finding a link to click in the browser).

Closes NEXT-3004
2024-04-11 21:38:57 -06:00