Fixes#48962Fixes#49009Fixes#49107
### Why
For standalone mode the `fs.readFile` is executed for `route.js` when
the module is loaded, then the fs operation aginst the wrong file path
will break the proper module loading, then it fallbacks to `/_error`
module.
### What
We move the fs read operation to the first get then cache the buffer in
the module level variable, so that `fs.readFile` won't be executed. As
we already have prerender cache, the meta/body fs cache will be HIT and
served
Fixes#48392
When passing down `Array<IconDescriptor>`, it should allow overriding `rel` prop of icon instead of always picking the default one
fix NEXT-1085
We picked `VERCEL_URL` env for `metadataBase` in preview mode, but also picking that on production, this could potentially use the unique build url for social images if you didn't set `metadataBase`
We recommend to set the major/preferred domain to `metadataBase` if you're using social images, this PR help warn you in every env if you're missing that
[slack thread](https://vercel.slack.com/archives/C03KAR5DCKC/p1683150633962539?thread_ts=1683144147.664059&cid=C03KAR5DCKC)
This uses the new built-in progressive enhancement features of React.
These always use `multipart/form-data` atm. When one comes in that's not
a fetch, we can use `decodeAction` to get a resolved function.
This also ensures that we can test this by passing disableJavaScript to
tests. This disables JS for the context.
Fixes#49055, fixes#48918.
App dir will always require the server to run in the workers mode, so it
can keep a separate Node.js process for pages. This PR updates the
standalone server to initialize a "standalone server" (which works
similar to `start-server`), and changes the tracked files to include
Jest worker.
Adds proper `multipart/form-data` handling in the Edge runtime and fixes a bug (previously we are always using `serverActionsManifest.node`). For the form data, we just use `await webRequest.request.formData()` for now and will handle streaming later.
Fixes#48948
([repro](https://github.com/vercel/next.js/issues/48948#issuecomment-1533542001)).
When running inside a custom server with app dir, we should always opt
into the prebundled React with correct channels.
Thanks @karlhorky for help testing it!
Fixes#49169 too.
---------
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
When using the `not-found.js` file to match missed routes, `serverCSSForEntries` will always be empty as the `ComponentMod.pages` itself doesn't contain any actual entry. We need to handle that as a special case.
Closes#48133.
For edge runtime, we're modifying `res.statusCode` in actions handler, but we didn't forward the `res` object to it, previously we're using a fake `res` `{}`. This PR fixes it so that the propery status code will be returned to the client
[slack-thread](https://vercel.slack.com/archives/C052S77L05C/p1682988777740609)
Follow up of #48867
- Statically optimize dynamic generated sitemap routes
- Previously the generated sitemap urls looks bit off
(`/route/sitemap.xml/[id]`), we polish it into `/route/sitemap/[id].xml`
in this PR
Not 100% convinced that this is the correct fix but it's the best I can
think of.
Previously, we would sometimes call location.assign()/.replace()
hundreds of times (or more) as I described in
https://github.com/vercel/next.js/issues/48438 and
https://github.com/vercel/next.js/issues/48309#issuecomment-1512290958.
Sometimes this would just make things slow but the navigation would
eventually succeed; sometimes this would just hang the browser.
Now we trigger it only once (or—for a reason I don't quite
understand—twice in dev, as you can see in the test) and never commit
that render.
This also fixes the bug I mentioned in
https://github.com/vercel/next.js/issues/48438#issuecomment-1528649776
where usePathname() and useSearchParams() would return the page we are
navigating to (even if that's an external page wholly unrelated to our
site!).
Fixes#48309, fixes#48438.
link NEXT-1028
Co-authored-by: Jimmy Lai <laijimmy0@gmail.com>
Currently we invoke the revalidate request directly in the current
server when `res.revalidate()` is called. However app needs to be
rendered in a separate worker so this results in an error of React. This
PR fixes it by sending the request via IPC so the main process will
delegate that to the correct render worker.
Closes#48948.
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
This ensures we properly handle edge runtime during build when loading pages as currently we are only check the page itself for the runtime flag although it can be nested higher up but we already have the relevant info in the middleware-manifest so we can use that during build.
Fixes:
```sh
info - Linting and checking validity of types
info - Collecting page data ..ReferenceError: self is not defined
at Object.<anonymous> (/Users/jj/dev/vercel/next.js/test/e2e/app-dir/app-edge/.next/server/app/edge/basic/page.js:1:1)
at Module._compile (node:internal/modules/cjs/loader:1254:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at Module.require (node:internal/modules/cjs/loader:1141:19)
at require (node:internal/modules/cjs/helpers:110:18)
at requirePage (/Users/jj/dev/vercel/next.js/packages/next/src/server/require.ts:126:10)
at <anonymous> (/Users/jj/dev/vercel/next.js/packages/next/src/server/load-components.ts:105:16)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
> Build error occurred
Error: Failed to collect page data for /edge/basic
```
* For sitemap if they're not using dynamic routes generation `generateSitemaps`, should optimize them as static sitemap
* For icons and social images, if they're not using `generateImageMetadata`, should optimize them as static path
Closes NEXT-1071
Fixes#48991
This PR renames `experimental.experimentalReact` as
`experimental.serverActions` and makes it a hard compilation error if
it's not set but detected server actions.
### What?
This PR fixes middleware's edge-chunks not being copied in copyTracedFiles.
### How?
Merging its files' handling with other pages' ones.
### Note
I also want to exclude `process.turbopack` from the unsupported APIs list by checking if `key === 'turbopack'` in `createProcessPolyfill` and `warnForUnsupportedProcessApi`, but I want to have some opinion on this first as I don't know if `process.turbopack` works with the Edge runtime.
Closes#48807.
The issue seems to be introduced with recent React Float change, which isn't a real problem but a behavior change. Resources are layered by the `precedence` key and the style insertion logic can be simplified as "insert the new stylesheet right after the existing stylesheet in the same layer". When multiple stylesheets are inserted in the same render pass, their new order will be flipped.
This is a nice feature so we can always maintain the order of resources that might conflict.
### What?
Whenever you navigated and a page suspended through `loading` or an error happened caught by `error` in the first level of segments (e.g. `/dashboard` but not `/dashboard/settings`) scroll would not be applied. This happened because the focus and scroll handling component is rendered as part of `InnerLayoutRouter` and the Suspense / Error boundary was rendered **around** `InnerLayoutRouter`. This behavior is incorrect as we still want to immediately scroll to the place where the loading is rendered.
This PR fixes the behavior by allowing the scroll to apply to loading / error too.
### How?
Moved the scrolling component around the loading/error/innerlayout boundary and added tests.
This PR updates the way we preload fonts. Previously we tracked which
fonts we needed to preload for each layer and rendered a `<link
rel="preload" href="..." as="font" />` tag for each preloadable font.
This unfortunately gets blocked by data fetching and we want to be able
to hint these preloads as soon as possible. Now that React support Float
methods in RSC we can use `ReactDOM.preload(..., { as: "font" })` to
implement this functionality
This PR makes the following changes
1. expose a `preloadFont` method through the RSC graph
2. expose a `preconnect` metho through the RSC graph
3. refactor the preloads generation to use `preloadFont` instead of
rendering a preload link
4. If there are no fonts to preload but fonts are being used in CSS then
a `preconnect` asset origin is called instead of rendering a preconnect
link
5. instead of emitting a data attribute per font preload indicating
whether the project is using size-adjust we now emit a single global
meta tag. In the future we may get more granular about which fonts are
being size adjusted. In the meantime the current hueristic is to add
`-s` to the filename so it can still be inferred.
In the process of completing this work I discovered there were some bugs
in how the preconnect logic was originally implemented. Previously it
was possible to get multiple preconnects per render. Additionally the
preconnect href was always `"/"` which is not correct if you are hosting
your fonts at a CDN. The refactor fixed both of these issues
I want to do a larger refactor of the asset loading logic in App-Render
but I'll save that for a couple weeks from now
Additionally, the serialized output of preloads now omits the word
anonymous when using crossorigin so tests were updated to reflect
`crossorigin=""`
Additionally, tests were updated to no longer look for the size-adjust
data attribute on preloads
Additionally, There is a note about leaving a `{null}` render in place
to avoid a conflict with how the router models lazy trees. I'll follow
up with a PR addressing this
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
### What?
Implements resolving of `runtime` and `preferredRegion` in layouts. It
will resolve from the root layout down, each layout can override
`runtime` or `preferredRegion`.
```
app
├── layout.js -> export const runtime = 'edge'
├── page.js -> Edge runtime
└── dashboard
├── page.js -> Edge runtime
└── settings
├── layout.js -> export const runtime = 'nodejs'
└── page.js -> Node.js runtime
```
Adds support for `preferredRegion`. This is similar to `export const
config = { region: ['sfo1'] }` in `pages`.
However, there is a difference. It supports `export const
preferredRegion = 'home'` and `export const preferredRegion = 'edge'`.
`home` refers to the configured default region on your deployment
platform and `edge` refers to "all regions".
### How?
I've implemented a temporary resolving in `entries.ts`.
`preferredRegion` is tracked through the entry module in webpack which
is why it's added to all the loaders that create an entry module, this
prevents having to resolve/parse again later on.
Fixes NEXT-880
Fixes NEXT-1064
Fixes#48905Closes#48933
### What?
In #48928 we decided to error for the missing `id` from `generateImageMetadata` and `generateSitemaps` for better dev DX. This PR also refactors the metadata image urls generation that assumbling the utils together
* Fix the `generateImageMetadata` for non dynamic routes and related
`param` matching (Found during development)
* Fix dynamic routes with number suffix `(\d)` (Fixes#48689)
### What?
Exposing `globalThis.crypto`, based on [Node.js' WebCrypto
API](https://nodejs.org/api/globals.html#crypto_1)
### Why?
Similar to `fetch`, `crypto` is a popular API that is currently not
available on `globalThis` in all active Node.js versions yet.
This can help library authors to create runtime-agnostic packages.
### How?
Node.js already has the WebCrypto API that can be imported, we just
expose it on `globalThis` in Node.js versions where this is not
available.
Closes NEXT-1063
[Slack
thread](https://vercel.slack.com/archives/C03KAR5DCKC/p1681821510191059)
