### Description
This PR fix typo in the description of Caching Data
### Changes
- Added types to React `cache()` exercise
File: `docs/02-app/01-building-your-application/03-data-fetching/02-caching.mdx`
Route handlers are not specifically different from API Routes in terms of forms or other usage, the only difference is how you write them (Request) => Response. Initially this mention was supposed to be removed when server actions are marked stable, but it's leading to some confusion so I've updated the mention to clarify that there will be a more integrated solution for React.
### Fixing a bug
### What?
App-router now supports the
[`scroll`-option](https://github.com/vercel/next.js/pull/51869/files).
Thank you for that!
We're in the midst of migrating towards the app-router meaning that some
pages use the `adaptForAppRouterInstance`-adapter.
We noticed that the adaptForAppRouterInstance does not forward any
options given to either `push` or `replace`, while in theory `{ scroll?:
boolean }` perfectly overlaps and could be forwarded.
### Why?
When using `{ scroll: false }` and using `adaptForAppRouterInstance` the
options are not being forwarded.
Meaning that when calling either `push` or `replace`, the page is
scrolled to the top regardless.
### How?
By forwarding the options that perfectly overlap between
`NavigateOptions` (app-router) and `TransitionOptions` (next-router)
```
// Added NavigateOptions, and forward `{ scroll }`
push(href: string, { scroll }:NavigateOptions = {}): void {
void router.push(href, undefined, { scroll }) //
},
replace(href: string, { scroll }:NavigateOptions = {}): void {
void router.replace(href, undefined, { scroll })
},
```
Please let me know if I need to change anything!
Co-authored-by: Jeffrey <jeffrey@jeffreyzutt.nl>
Co-authored-by: Jimmy Lai <laijimmy0@gmail.com>
This ensures we properly detect `not-found` as `runtime = 'edge'` and treat it as such instead of attempting to render it like normal.
x-ref: https://github.com/vercel/next.js/issues/52648
This is the Next.js side of https://github.com/vercel/turbo/pull/4587, which makes changes to Turbo Engine to allow expressing value cells as `Vc<Type>` instead of `TypeVc`, leveraging the type system to bring a slew of other improvements to writing Turbo Engine code.
## Turbopack updates
* https://github.com/vercel/turbo/pull/4587
### What?
closes WEB-1287.
This PR is a stopgap workaround for https://github.com/npm/cli/issues/4828. There is ongoing discussion & RFC, but it is unclear when we can have those. Until then, PR tries to attempt to load native bindings by manually downloading binaries if original attempt fails with MODULE_NOT_FOUND.
The implementation basically reuses most piece of existing wasm fallback; differences are it tries to all possible triples instead, and also try only for MODULE_NOT_FOUND. Other errors are treated as legit error from installed binary, do not attempt to re-download.
### What?
Adding a new label comment for "please simplify reproduction".
### Why?
During triaging, a lot of time is gone into trying to isolate the actual bug being reported. Reproductions sometimes contain unrelated code - that sometimes can be the actual cause of an issue, reported as a bug in Next.js, or require third-party services, secrets, setting up databases, and other tasks that take up much of the resources before the issue can even be verified.
### How?
Similar to the `please add a complete reproduction` and `please verify canary` labels, if a maintainer adds the `please simplify reproduction` label, an automatic comment will appear on the issue, asking for a minimal reproduction
[Slack thread](https://vercel.slack.com/archives/C04DUD7EB1B/p1685527818400339)
### What?
Support metadata exports for `not-found.js` conventions
### Why?
We want to define metadata such as title or description basic properties for error pages, including 404 and 500 which referrs to `error.js` and `not-found.js` convention. See more requests in #45620
Did some research around metadata support for not-found and error convention. It's possible to support in `not-found.js` when it's server components as currently metadata is only available but for `error.js` it has to be client components for now so it's hard to support it for now as it's a boundary.
### How?
We determine the convention if we're going to render is page or `not-found` boundary then we traverse the loader tree based on the convention type. One special case is for redirection the temporary metadata is not generated yet, we leave it as default now.
Fixes#52636
### What
This was an issue introduced in #52416 when we check the images and icons property while merging with static file conventions. Where we should check if the properties are present but we only checked if they value is falsy. So when you're using `icons` with array value it breaks.
Now we properly check all the possible case of `metadata.icons` value, so then decide if we are using the static file convention or the icons property of defined metadata.
Also add few more tests cases to cover icons resolving.
The router worker already verified TS setup, and there's no need to do it again in the other processes.
This saves ~110 ms dev startup time and 16.7 MB memory (59.9 MB → 43.2 MB) for the render worker when the project is using TS.
References for Client Components need to be aggregated to the page entry level, and emitted as files in the correct directory for the SSR server to read from. For normal routes (e.g. `app/foo/bar/page`), we can go through and collect all entries (layout, loading, error, ...) from the current and parent segments, to aggregate all necessary client references.
However, for routes with special conventions like `app/(group)/@named/foo/bar/page`, it needs to be normalized (remove the named slot and group segments) so it can be grouped together with `app/(group)/@named2/foo/bar/loading`.
When there's a runtime error showing in root layout (server components), it should be able to catch by `global-error`.
For server components, we caught it and gonna render the error fallback components (either not-found or error page), and the response status is `200`, and since we'll display error dev overlay in developmenet mode so we only render `global-error` for production.
So that you can catch more errors with `global-error` and maybe do potential error tracking on client side.
Follow up of #52573
Closes NEXT-1442
minor refactor: move `appUsingSizeAdjust` into `Metadata` component so that we can just tune the flag as prop
Long-hanging promises are retaining the closure context where it's being
`await`'ed even it's resolved already. You can tell it from this
screenshot:
<img width="1822" alt="CleanShot 2023-07-13 at 18 09 11@2x"
src="https://github.com/vercel/next.js/assets/3676859/1d6210b0-16ba-440e-a8b6-c8c4343f4850">
In some cases, the entire `req` object is retained because of that. This
increases the memory usage a bit.
So this PR changes these promises to be cleaned up after they got
resolved.
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
### What?
Creates a NAPI api for Next.rs to be used in Next.js
### Why?
### How?
Co-authored-by: Alex Kirszenberg <1621758+alexkirsz@users.noreply.github.com>
We have some special bundle path handling logic for `/index` routes in
`normalizePagePath`, which is missing in the new
`AppBundlePathNormalizer`. This already broke `/index/page.js` in dev in
the past, and now become noticeable in prod as well because of the
manifest change.
b98469c86b/packages/next/src/shared/lib/page-path/normalize-page-path.ts (L5-L14)
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Introduce a new way to search for `not-found` component that based on
the request pathname and current loader tree of that route. And we
search the proper not-found in the finall catch closure of app
rendering, so that we don't have to pass down the root layout to
app-router to create the extra error boundary.
This ensures the root layout doesn't have duplicated rendering for
normal requests
Fixes NEXT-1220
Fixes#49115
### What?
Closes WEB-1157. PR enables turbopack to support native webp encode / decode. There is one platform we can't support this (aarch64-linux-gnu) which disables those.
Transitions the App Pages renderer into the entrypoint bundle.
- Adjusts the static path detection to handle route module's with App Pages
- Fixes bug in font manifest loading on Edge
Related: https://github.com/vercel/next-telemetry/pull/106
We collect wasm fallback reason (`enabled`, `fallback`, ..) but it is bit unclear why we came to reach `fallback` state for the wasm. This PR expands current reporting to include native bindings error code if node.js returns it to understand categories better. Mostly this would be in between ERR_DLOPEN or ERR_MODULE_NOT_FOUND, but worth to confirm if the guess is correct. For the targets have multiple triples (gnu / musl), we collect only the last attempt's error code.
There are 2 custom variants of the string value other than err code itself: if thrown error doesn't have code (unlikely, but) it'll be `unknown`. for the targets we falls back to wasm immediately (freebsd, for example) it'll be marked as unsupported_target.
One thing to note is this does not collect if wasm binding fails to load: this is strictly for native bindings load error.
### What? Why? How?
Similar to https://github.com/vercel/next.js/pull/47571, add `.js` extensions to generated imports to avoid problems with TypeScript `Node16` / `NodeNext` module resolution
Without this change, there are confusing errors with `{ experimental: { typedRoutes: true } }` in `next.config.js`, such as:
```
Property 'refresh' does not exist on type 'AppRouterInstance'.ts(2339)
```
<img width="490" alt="Screenshot 2023-07-11 at 19 12 21" src="https://github.com/vercel/next.js/assets/1935696/399265e6-223d-4386-bc85-6136d98e436a">
cc @shuding
This PR ensures that both Webpack and the config won't be initiated in render workers. This is great for performance but also avoids potential issues (e.g. Next.js plugin with side effects). Instead, we pass a serialized config from the router worker to the render workers.
Closes#52366.
This PR adds proof-of-concept support for the App Router to `next build
--experimental-turbo`.
It introduces a new way to generate Next.js manifests in Turbopack.
Currently, in dev, we pass proxy objects in lieu of manifests, and rely
on the entries to know which chunks they need loaded on the client.
However, this can't work for builds because it requires control over
Next.js rendering, which is not compatible with a Next->Turbo approach.
We would need to modify Next.js to support these "lazy" entries. So for
now, we add well-known assets (`NextDynamicAsset`,
`NextServerComponentAsset`, `NextClientReferenceAsset`, etc.) to the
graph, which will get picked up when walking it during asset processing.
This lets us collect all possible entries before chunking.
This two-step process (collecting all entries, then chunking them) is
also a good first step towards production chunking.
## Turbopack updates
* https://github.com/vercel/turbo/pull/5494 <!-- Tobias Koppers - add
reporting of console messages -->
* https://github.com/vercel/turbo/pull/5448 <!-- Alex Kirszenberg -
Misc. changes to support App Router build -->
### 🧐 What's in there?
At the moment, it is not possible to test code with `import 'server-only'` in app directory.
When trying to load such file in jest (even with `testEnvironment: node`), the error will be:
```
● Test suite failed to run··
x NEXT_RSC_ERR_CLIENT_IMPORT: server-only
,-[lib/util.js:1:1]
1 | /** @jest-environment node */·
2 | import 'server-only'
: ^^^^^^^^^^^^^^^^^^^^
3 | export const PI = 3.14;
`----·
at Object.transformSync (node_modules/next/src/build/swc/index.ts:443:25)
at transformSync (node_modules/next/src/build/swc/index.ts:629:19)
at Object.process (node_modules/next/src/build/swc/jest-transformer.ts:117:25)
at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:619:31)
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:765:40)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:822:19)·
```
In a nutshell:
- next/swc is looking for ‘server-only’ [text in the source](https://github.com/vercel/next.js/blob/canary/packages/next-swc/crates/core/src/react_server_components.rs#L576), and throw if not configured for server
- next's jest-transformer will only configure next/swc for server [if the environment is node](https://github.com/vercel/next.js/blob/canary/packages/next/src/build/swc/jest-transformer.ts#L88)
- when testing Next.js apps, your jest testEnvironment is most likely jsdom. But you can configure it [per file with docBlock](https://jestjs.io/docs/configuration#testenvironment-string), which jest-transformer ignores because it only reads the top-level configuration.
This PR fixes this, by
1. reading the docblock to configure next/swc accordingly and bypass its hardcoded guard
2. mocking `server-only` so [it does not throw](https://github.com/vercel/next.js/blob/canary/packages/next/src/compiled/server-only/index.js) when loaded (jest does not read `react-server` export from package.json)
Users would still have to annotate their `server-only` files with `/** @jest-environment node */` in order to test them.
### 🧪 How to test?
There's a full test available: `pnpm testheadless --testPathPattern jest/server-only`
Here is also a minimal reproduction:
<details>
<summary>app/layout.tsx</summary>
```typescript
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (<html lang="en"><body>{children}</body></html>)
}
```
</details>
<details>
<summary>app/page.tsx</summary>
```typescript
import { PI } from '@/lib/utils'
export default function Home() {
return <h1>{PI}</h1>
}
```
</details>
<details>
<summary>lib/utils.ts</summary>
```typescript
import 'server-only'
export const PI = 3.14
```
</details>
<details>
<summary>lib/utils.test.ts</summary>
```typescript
import { PI } from './utils'
it('works', () => expect(PI).toEqual(3.14))
```
</details>
<details>
<summary>jest.config.js</summary>
```typescript
const nextJest = require('next/jest')
module.exports = nextJest({ dir: './' })({ testEnvironment: 'jsdom' })
```
</details>
### ❗ Notes to reviewers
[jest-docblock](https://packagephobia.com/result?p=jest-docblock) with dependencies is only 12.5 kB.
Fixes#47448
Previously `global-error` only caught the error on client side, this PR adds the support for catching the errors thrown during client components SSR or server components RSC rendering.
Closes#46572Closes#50119Closes#50723
`yarn pack` does not pack the same way that `npm pack` does. There is at least one bug with how files are treated where node_modules are ignored even inside folders defined by the files config. While this is not currently used in next.js an upcoming change will rely on it. The reason this change makes sense otherwise is we use npm to publish next and during a publish the pack from npm is used. For consistency we should use the same pack for our actions and other code that does repo setup such as `create-next-install` which is used for tests
The implementation is slightly more complicated than just replacing the pack command however. `npm pack` respects gitignore files whereas `yarn pack` does not (or at least not nested ones). For some packages the `"files"` property in package.json is set which overrides any gitignore rules however the `@next/swc` package uses a gitignore to prevent the committing of native binaries but does not use files and thus npm pack does not includes native binaries when yarn pack does. To address this the PR adds a temporary rename of the `next-swc/native/.gitignore` file which allows npm pack to mimic the yarn pack behavior. The reason I did not just add `"files"` is that this package actually publishes to many different package names on npm for each architecture and I was unsure about making changes to the package.json that would potentially affect this codepath.
In addition to those changes there are 2 `.gitignore` files that appear to be outdated and unnecessary. I removed them.
### What?
Attempt to close WEB-1074.
PR tries to validate custom babel config: if it only contains options supported by latest next.js compiler features, trying to suggest to migrate / enable native compiler instead of babel.
