For twitter and og image nested properties we should render them as
snake case according to [og spec](https://ogp.me/) and [twitter card
docs](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started).
For typing we keep them as camel case and then convert them to snake
case during render
This issue is reported in #47960 that user thinks the types are
incorrect, but turns out twitter metadata didn't render it correctly
Closes#47960
This ensures we prefix the dynamic route params in the query so that
they can be kept separate from actual query params from the initial
request.
Fixes: https://github.com/vercel/next.js/issues/43139
This is a follow-up PR on https://github.com/vercel/next.js/pull/46577
after it got nasty conflicts.
Basically, just restart `dev` when `next.config.ts` it will just restart
instead of printing that message asking you to restart.
fix NEXT-639
Seems edge runtime started failing for app paths from `path` being added
in https://github.com/vercel/next.js/pull/47829 so this updates to use
the isomorphic version instead and adds a regression test.
Fixes NEXT-866
[slack
thread](https://vercel.slack.com/archives/C04G5LHAVAR/p1680106437791819?thread_ts=1680013412.588999&cid=C04G5LHAVAR)
When `metadataBase` is missing and used for resolving og/tw image urls,
we'll fallback to localhost for it to always safely resolve the url
instead of erroring. Instead, we give a warning in console for which url
is resolved but with fallback `metadataBase`.
Once they found the warning and it's not expected, they need to update
the `metadataBase` to a proper URL for giving the right domain.
Another minor change is always resolve canonical with current pathname
if it's a URL instance.
Remove `resolveStringUrl` as it's not required anymore, the default
`pathname` for `resolveUrl` is '', so no trailing slash needs to be
removed
Next.js includes various feature sets that depend on specific release
channels of React. However, our current setup only includes the `next`
channel of React, which restricts our ability to integrate with features
available on the `experimental` channel.
To address this limitation, this pull request introduces the following
changes:
- Vendors the `react@experimental` version, along with the corresponding
`react-dom` and `scheduler` packages.
- Modifies the `sync-react` script to also update the `experimental`
channel and removes `--version` as they're always synced to the latest
now.
- Retains the default behavior of using the `next` channel in the
`appDir` directory.
- Adds an option to switch to the `experimental` channel by setting
`experimental.experimentalReact: true` in the configuration.
fix NEXT-926 ([link](https://linear.app/vercel/issue/NEXT-926))
### What?
Took a bit to investigate this one, eventually found that the case where
it broke is this one:
```
app
├── [slug] // This matches `/blog`
│ └── page.js
└── blog
└── [name] // This matches `/blog/a-post`
└── page.js
```
The router cache key is based on the "static key" / "dynamic parameter
value" in the tree. This means that the cache key for `/blog` that
matches `/[slug]` would be the same as the static segment `blog`. This
caused the cache to become intertwined between those paths, it's
accidental that the router got stuck in that case, main reason it got
stuck is that the fetch for the RSC payload returned a deeper value than
expected. In `walkAddRefetch` we bailed because that walked the
`segmentPath` didn't match up.
The underlying problem with this was that the render would override the
cache nodes incorrectly. This would also cause wrong behavior, even
though that wasn't reported. E.g. `app/[slug]/layout.js` would apply on
`app/blog/[name]/page.js` because they'd share the `blog` cache node.
### How?
This PR changes the cache key to include the dynamic parameter name and
type, e.g. the dynamic segment `['slug', 'blog', 'd']` previously turned
into `'blog'` as the cache key, with these changes it turns into
`'slug|blog|d'`. For static segments like `blog` in `app/blog/[name]`
the key is still just `'blog'`.
I've also refactored the cases where we read the segment as the code was
duplicated in a few places.
Closes NEXT-877
Fixes#47297
<!-- 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
### What?
### Why?
### How?
Closes NEXT-
Fixes #
-->
fix NEXT-877
This PR fixes an issue reported by @feedthejim, that when we track CSS
module changes only the content hashes are compared. However the same
module can end up with totally different content in different layers,
hence this PR also adds the layer as part of the resource key so we
don't compare apples to oranges.
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What?
Trying to refactor `build/index.ts` to make it easier to read and debug.
### Why?
I'm debugging memory related issues in our compilation and static
generation process and this file is too large to make any change. So I'm
trying to split it into smaller modules.
### How?
There're 3 changes in this PR:
- Moved `verifyTypeScriptSetup` and `startTypeChecking` into a new file
- Changed `writeFileSync` to use the async API
- Removed unused `allStaticPages` and `allPageInfos` values
Not to log not found errors created from on demand handlers in ipc
server
Remove the not found error trace for dev
```
event - compiled client and server successfully in 57 ms (265 modules)
/Users/huozhi/workspace/next.js/packages/next/src/server/dev/on-demand-entry-handler.ts:450
throw new PageNotFoundError(normalizedPagePath)
^
Error: Cannot find module for page: /not-found
at findPagePathData (/Users/huozhi/workspace/next.js/packages/next/src/server/dev/on-demand-entry-handler.ts:450:11)
at Object.ensurePage (/Users/huozhi/workspace/next.js/packages/next/src/server/dev/on-demand-entry-handler.ts:701:30)
at Server.<anonymous> (/Users/huozhi/workspace/next.js/packages/next/src/server/lib/server-ipc.ts:29:24) {
code: 'ENOENT'
}
```
Since we compile global server CSS imports into a special module with a
checksum of the original content, it should always accept HMR updates.
This fixes `Fast Refresh had to perform a full reload` errors.
Added docs that mention:
- important code-snippets from example
- links to official OTEL docs
- document NEXT_VERBOSE_OTEL
- explain what we provide out of the box
- what we don’t
- explain how you can add tracing yourself
- explain how instrumentation.js works
- it can be used for different types of instrumentation that don't use
OTEL. It's just a hook called when starting up a new node environment.
- list of all spans we instrument by default
fix NEXT-799 ([link](https://linear.app/vercel/issue/NEXT-799))
---------
Co-authored-by: S3Prototype <liuqahs15@gmail.com>
This PR implements the route intercepting feature from [the layouts
RFC](https://nextjs.org/blog/layouts-rfc#intercepting-routes).
You can use route interception by adding these special markers,
`(..),(...) or (..)(..)` to your segment definition, i.e. by creating a
page with this path: `/foo/bar/(..)baz/page.ts`.
Changes in this PR:
- added a new kind of route handlers to support intercepting routes
- added a "referrer" concept that is derived from the client router
state on navigation, where we try to guess which URL you were on before
- added some units tests
- updated the renderer to allow for overrides when the path params don't
include the current dynamic param, so we rely on the passed router state
to create it
<!-- 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
### What?
### Why?
### How?
Closes NEXT-
Fixes #
-->
fix NEXT-749 ([link](https://linear.app/vercel/issue/NEXT-749))
---------
Co-authored-by: Wyatt Johnson <accounts+github@wyattjoh.ca>
The plugin was failing in NX monorepos due to a wrong import path.
#44363, https://github.com/nrwl/nx/issues/14558
```
nx build my-next
> nx run my-next:build:production
warn - You have enabled experimental feature (appDir) in next.config.js.
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback
info - Creating an optimized production build
info - Compiled successfully
info - Skipping linting
info - Checking validity of types ..Failed to compile.
Type error: Cannot find module '../../../../app/layout' or its corresponding type declarations.
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
> NX Ran target build for project my-next (2s)
✖ 1/1 failed
```
---------
Co-authored-by: Ian Serpa <ian.serpa@imc.com>
Co-authored-by: Shu Ding <g@shud.in>
This ensures we don't fail to send dev IPC requests when `localhost` resolves to an IPv6 address but the IPC server is listening on IPv4.
<details>
<summary>example error</summary>
```sh
TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11118:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async DevServer.invokeIpcMethod (/Users/test/projects/blog/node_modules/.pnpm/next@13.2.5-canary.28_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/dev/next-dev-server.js:881:25)
at async DevServer.ensurePage (/Users/test/projects/blog/node_modules/.pnpm/next@13.2.5-canary.28_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/dev/next-dev-server.js:1199:13)
at async Object.fn (/Users/test/projects/blog/node_modules/.pnpm/next@13.2.5-canary.28_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:1496:29)
at async Router.execute (/Users/test/projects/blog/node_modules/.pnpm/next@13.2.5-canary.28_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/router.js:293:32)
at async DevServer.runImpl (/Users/test/projects/blog/node_modules/.pnpm/next@13.2.5-canary.28_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:494:29)
at async DevServer.run (/Users/test/projects/blog/node_modules/.pnpm/next@13.2.5-canary.28_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/dev/next-dev-server.js:860:20)
at async DevServer.handleRequestImpl (/Users/test/projects/blog/node_modules/.pnpm/next@13.2.5-canary.28_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:437:20) {
cause: Error: connect ECONNREFUSED ::1:49507
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16) {
errno: -61,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '::1',
port: 49507
}
}
```
</details>
Continue the work to improve #32314.
This PR splits `webpack-build` into an `index` module and an `impl`
module. The `index` module invokes `impl` based on that if it should use
workers or in the same process.
Another notable change is that I modified the number of static workers,
to make it also based on remaining memory. I did some benchmarks and
found that using the number of CPUs might not be ideal. After the build
process (if `webpackBuildWorker` **isn't** enabled), the memory usage
was already very high. While the memory usage of the main process didn't
increase in the static optimization step, the overall number went high
again because we created 10 static workers:
![perf_ori](https://user-images.githubusercontent.com/3676859/229365432-ad2f3460-122d-4ded-8e02-b15d76d7687b.png)
As of today, a MacBook Pro has 10 CPU cores and 16 GB memory. The idle
memory of the system might be 8 GB, and the remaining memory when
starting the static workers might be 4~6 GB only. Here's a benchmark of
`next build` on `vercel-site`:
![CleanShot-2023-04-02-fmj2CXdK@2x](https://user-images.githubusercontent.com/3676859/229365784-20e646b3-2293-4bfc-82d9-94f33ce2461b.png)
The memory dropped there quickly because it has `webpackBuildWorker`
enabled, but then it increased again with static workers (note that we
already have `cpus: Math.round(require('node:os').cpus().length / 2) ||
1` configured in that repo). It makes more sense to limit that inside
Next.js natively.
- Add links to the error warning
- Log with warning prefix for every url that missing `metadataBase`, so users can easily locate where it's from
Closes NEXT-931
### What?
Refactors the resolving logic for the `app` loader tree. This PR ensures
it's used to create entrypoints in turbopack. Next up is integrating it
into the webpack build too.
These changes also ensure that parallel routes resolving is applied,
which previously wasn't supported in turbopack.
### Why?
Part of the effort to deduplicate critical logic between
turbopack/webpack in Next.js, this will help land features in
turbopack/webpack at the same time.
### How?
Quite a few changes. @sokra helped a ton on this PR. `app_structure.rs`
was changed to the new resolving logic so most of the logic is there.
Additionally we added support for calling the same function in two ways
from Node.js: `turbo.entrypoints.get` and `turbo.entrypoints.getStream`.
`get` can be used by `next build` to get the full list of
entrypoints/loadertrees once. `getStream` has watching built-in and
calls a callback function with the new list anytime a file is added that
would change the loadertree.
<!-- 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
### What?
### Why?
### How?
Closes NEXT-
Fixes #
-->
Should fill dynamic routes url with params when generate the metadata
image urls.
For `/(group)`, we need to normalize the path first;
For dynamic routes `/[slug]`, we need to fill the params.
Change the image module from `() => image` to `(prop) => image(proop)`
so we can fill the runtime `params` into url
Closes NEXT-932
---------
This updates to have a separate routing process and separate rendering
processes for `pages` and `app` so that we can properly isolate the two
since they rely on different react versions.
Besides allowing the above mentioned isolation this also helps us
control recovering from process crashes easier as pieces are more
isolated from one another e.g. an infinite loop during rendering will no
longer block the compiler and can be stopped/restarted as needed.
In follow-up PRs we will continue to separate out the routing logic from
the rendering logic so that each process only loads what is relevant to
it helping simplify the flow for requests regardless of type.
---------
Co-authored-by: Shu Ding <g@shud.in>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
### What / why?
Currently there is a bug because the `subTreeData` can only be applied
once, however, we reuse the same response when a url was prefetched.
During the first render of the response we apply the cacheNodes and then
these should be reused for subsequent navigations. There's currently a
bug because `fillLazyItemsTillLeafWithHead` creates `LAZY_INITIALIZED`
cache nodes that don't copy the previous cache node `parallelRoutes` and
`subTreeData` value, causing the cache nodes below where the
`subTreeData` is applied to be deleted from the cache, even when they're
not affected by the navigation.
### How?
This PR adds copying of the cache node when it exists already, I've
added a marker for `wasPrefetched` to trigger that behavior but in
talking to @feedthejim about this it seems we can swap to this behavior
always when applying the server response, that needs to be discussed
further though, this is temporary implementation with the fix for routes
that were prefetched.
Fixes NEXT-402
<!-- 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
### What?
### Why?
### How?
Closes NEXT-
Fixes #
-->
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Since both `exportPage` and `isPageStatic` methods in the static
optimization worker involve loading the actual page component, it's
better to assign the same page to the same worker for these 2 tasks to
avoid unnecessary memory allocation.
Co-authored-by: JJ Kasper <jj@jjsweb.site>
This ensures we properly honor the `export const fetchCache` config and
also ensures we properly bypass fetch-cache when an On-Demand
Revalidation is occurring.
The `export const dynamic` handling is not changed here as that was
behaving correctly and should not influence fetch cache handling only
whether a page is prerendered fully or treated as SSR.
Fixes: https://github.com/vercel/next.js/issues/47273
x-ref: [slack
thread](https://vercel.slack.com/archives/C042LHPJ1NX/p1679078572123979)
Fix the module resolving error found during development, because now few
app route code is bundled into RSC server layer, it can't resolve
opentelementry properly and will throw the error blow due to the check
of `require('@opentelemetry/api')` to see if it's installed.
```
Module not found: Can't resolve '@opentelemetry/api'
```
Thus I alias it to default `next/dist/compiled/@opentelemetry/api` when
it doesn't have external module
---------
For backward compatibility, we only handle `favicon.ico` file to
generate `/favicon.ico` route and link tag. If you want to use other
extension such as `png`, use `icon(\d)?.[ext]`
Fixes#46993.
The issue is introduced in #46705 by @ijjk
Next.js uses `jest-worker` for multiprocessing. `jest-worker` supports both `child_process` and `worker_threads` modes. Next.js use `child_process` mode by default, but can also switch to using `worker_threads` mode with an experimental flag `config.experimental.workerThreads`.
In #46705, @ijjk applies a fix that works for the `child_process` mode, which breaks the `worker_threads` mode (`jest-worker`'s `NodeThreadWorker` interface doesn't have the private property `_child`), causing static HTML export to fail with the following error (#46993):
```
> Build error occurred
TypeError: Cannot read properties of undefined (reading 'on')
at createWorker (/Users/[redacted]/node_modules/next/dist/lib/worker.js:32:31)
at new Worker (/Users/[redacted]/node_modules/next/dist/lib/worker.js:42:9)
at /Users/[redacted]/node_modules/next/dist/build/index.js:629:35
at async Span.traceAsyncFn (/Users/[redacted]/node_modules/next/dist/trace/trace.js:79:20)
at async Object.build [as default] (/Users/[redacted]/node_modules/next/dist/build/index.js:74:29)
```
The PR fixes that.
This ensures we don't normalize locales in the URL with the
skipMiddlewareUrlNormalize flag enabled so that casing redirects can be
applied correctly for locales.
Turbopack starts up the router process with all ENV values, but the edge
function definition didn't list any `env` keys for the function
invocation. So, middleware couldn't access any ENV values.
Turbopack doesn't currently have a way to determine what ENV keys are
actually used by the source program, so I'm just passing everything
defined. I'm not sure if that's an issue during dev (I could see it
being one for the build process, but that doesn't matter for this case).
Fixes#47766
Fixes WEB-831
Fixes WEB-834