- Removed duplicate information
- Add links into official docs to explain `http.*` attributes
- Properly explain what `next.page` means.
fix NEXT-945
---------
Co-authored-by: Lee Robinson <me@leerob.io>
### What?
Fix missing `,` in loader tree code.
also adds `unsupported` as category of implicit metadata issue
### Why?
The loader tree to JS generated invalid code when there there where two
non-page files in a directory.
fixes WEB-861
### What
This issue is introduced in #47688, we need to do the same work for
rendering single component which collecting the assets and then render
with root layout + root not found
Fix#47970
Related #47862 (partially fix the css issue but not link issue)
### How
This PR encapsulates the preload and stylesheets assets collection and
rendering process, and move them into a helper, and share between the
component rendering and the root not found rendering
### Fixing a bug
Follow-up to https://github.com/vercel/next.js/pull/47761: It seems that
`handleHardNavigation` needs to take `as` instead of `url`, in order to
be consistent with the rest of the code.
Without this, it seems to cause an issue if you are using a link that
uses legacy `as` prop which matches the bloom filter (and therefore
`__appRouter` is set as `true`).
However, I spent couple hours trying to come up with a failing test case
without this change but unfortunately couldn't come up with one.
x-ref: [Slack
Thread](https://vercel.slack.com/archives/C017QMYC5FB/p1680668865572729?thread_ts=1680225393.243459&cid=C017QMYC5FB)
Co-authored-by: JJ Kasper <jj@jjsweb.site>
This pull request extends the type checking functionality of the
`typedRoutes` feature, which is currently available in the `<Link
href={Route}>` component, to the following `router` APIs:
`router.push()`, `router.prefetch()`, and `router.replace()`. The
implementation leverages the existing work done for the `<Link>`
component, allowing for a straightforward integration of type checking
into the aforementioned `router` APIs.
fix NEXT-501
### What
When using dynamic metadata image rouets (such as `opengraph-image.js`)
under group routes, the generated urls were still normalized. In this
case it might have conflicts with those ones not under group routes. For
instance `app/(post)/opengraph-image.js` could have same url with
`/app/opengraph-image.js`. In reality we want them to be different
route, unlike layout or pages.
### How
So when we found `()` or `@` signs from the metadata image urls, we'll
generate a unqiue suffix (`-\d{6}`) and append to the generated url. So
they can be isolated from the ones are not under special convention
routes.
Closes NEXT-937
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
Next.js adds a `Vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch`
to app routes for both rendering and flight requests. Without this, the
browser can mistakenly serve the flight request to the app render, and
vice versa.
This only adds `Vary: RSC` for the moment, I'm not sure what the others
are used for. We also don't add a `Cache-Control: max-age=0` header, but
I'm not sure if that's necessary either.
Fixes NEXT-657
fix#45595
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
### What?
avoid including the error twice in the output
### Why?
`.context()` already keeps the previous error, no need to include in the
error message again
### What?
enables the benchmark tests from turbopack again
### Why?
It tests common scenarios like HMR
fixes WEB-792
---------
Co-authored-by: Alex Kirszenberg <alex.kirszenberg@vercel.com>
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 is the Next.js side of https://github.com/vercel/turbo/pull/4397
---------
Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
This pull request updates the Local Images example in the Next.js
documentation to use an ``assets`` folder inside the ``src`` directory
instead of the ``public`` folder. The changes are made to emphasize the
recommended practice of organizing and importing static assets when
using the Next.js ``Image`` component.
The previous example could cause confusion as it suggested importing
images from the ``public`` folder, which is generally used for static
files that can be accessed directly via a URL. However, when using the
Next.js ``Image`` component, it is recommended to import images as
modules and store them in a folder like ``assets`` inside the ``src``
directory. This approach allows the Image component to optimize images
and prevent Cumulative Layout Shift while loading.
This PR changes the image import statements as the example below:
```jsx
import profilePic from '@/assets/me.png';
```
These changes aim to provide clearer guidance on how to handle local
images. To avoid misunderstandings while the developer follows the
documentation.
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
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
When the devs have a parse/module-eval error in their Page/App module, Turbopack's rendering process will fail to connect the IPC. This is because the entrypoint statically imports the dev module. If either fails, then we'll never reach the code to set up the IPC. This leads to a "timeout while receiving message from process" timeout error after 30s, instead of receiving an exact message/stack detailing the dev's error.
By wrapping the import code in a deferred dynamic-import closure, we're able to connect the IPC first, then evaluate the dev code. This wrapping style is a little awkward, but it's necessary with the way to inject virtual modules into our graph.
Fixes WEB-850
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>
### What?
Syncing https://github.com/vercel/next.js/labels with the bug report template.
### Why?
We've got some OS-related reports so it would be nice to be able to filter on that.
### How?
The label description is added as a select option to the template, which then matches one of the labels https://github.com/vercel/next.js/labels
