I accidentally closed [this
PR](https://github.com/vercel/next.js/pull/63307), so I opened it again.
- adjust the position of `(default)`
- change from hyphen to colon
- change the order of comments in code blocks so that the default option
`'nodejs'` comes first.
- change `nodejs`, `edge` to `'nodejs'`, `'edge'` like other string
segment options.
---------
Co-authored-by: Sam Ko <sam@vercel.com>
This PR stabilizes an experimental feature that was added in a previous
PR https://github.com/vercel/next.js/pull/50470
It allows the user to set `deploymentId` in `next.config.js`, which is a
unique identifier for a deployment that will be included in each
request's query string or header.
This PR is easier to review with whitespace hidden:
https://github.com/vercel/next.js/pull/63198/files?w=1
Closes NEXT-2789
- Resolve generic type issue: "Expected 1 argument, received 2."
- Types in the reducer are automatically inferred.
Co-authored-by: Sam Ko <sam@vercel.com>
Added correction to docs referencing access to parameters in routes. It
should be context.params.team as opposed to params.team.
I've also added typescript example for this case just in case anyone
needs it.
## Why?
We need to clarify that we are scrolling to the top of `{children}` when
it is not shown in the current viewport.
Closes NEXT-2780
---------
Co-authored-by: Zack Tanner <zacktanner@gmail.com>
On the Building Your Application: Authentication page, the formatting is
broken in the "Setting Up Middleware" section because the unordered list
is nested inside the ordered list. This is causing the unordered list
components to be numbered and throw off the ordering of the top level
list.
I made a tiny change to the markdown to make the top level steps h4
titles, and un-nested the unordered list's
Closes NEXT-61838
Fixes#61838
Co-authored-by: Sam Ko <sam@vercel.com>
<!-- 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?
Make a note about the new `$ACTION_` properties in the `formData`
### Why?
Since `next@14.1.3`, some new `$ACTION_` properties have appeared in
the`formData`, which cause validation errors when used with a strict
validation with a library such as Zod or Yup:
```tsx
// Form Client Component
export default function Form() {
const [state, formAction] = useFormState(action, {
type: 'initial',
});
return (
<form action={action}>
{/* ... */}
</form>
);
}
// Server Action
export async function action(
prevState: ServerActionReturnValue,
formData: FormData,
): Promise<ServerActionReturnValue> {
const validationResult = await schema.validate(
Object.fromEntries(formData.entries()),
);
```
The errors from Yup:
```
Errors:
- this field has unspecified keys: $ACTION_REF_1, $ACTION_1:0, $ACTION_1:1, $ACTION_KEY
```
The data in the `formData.entries()`
```js
{
'$ACTION_REF_1': '',
'$ACTION_1:0': '{"id":"59f475b...","bound":"$@1"}',
'$ACTION_1:1': '[{"type":"initial"}]',
'$ACTION_KEY': 'k187677481',
// Real form data starts here:
year: '2024',
```
### How?
Document additional properties with keys starting with the prefix
`$ACTION_`
### Alternatives Considered
Maybe these `$ACTION_` properties are not intended to be exposed to
users, and should be stripped before the `formData` reaches the Server
Action.
### Related
The documentation was originally introduced in commit
[`687239c`](687239ce76),
which was a part of this PR:
- https://github.com/vercel/next.js/pull/59080
cc @delbaoliveira
---------
Co-authored-by: Sam Ko <sam@vercel.com>
### What?
Bringing Turbopack for Next.js documentation from `turbo.build` to
`nextjs.org/docs`.
> Note: After this PR lands, there will be a subsequent PR to
`vercel/turbo` to remove these docs from `turbo.build` and redirect
here.
### Why?
Previously, this documentation was on `turbo.build`. This was confusing
because these docs weren't specific to Next.js. Rather, they are for
Next.js developers who want to configure their bundler (which happens to
be Turbopack under the hood).
We had seen a number of times that folks were unable to find loader and
configuration support for the their Next.js + Turbopack applications so
this PR should help surface that information better where folks are
looking for it.
---------
Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Payload is moving to ESM, and we need to be removed from the default
list of `serverComponentsExternalPackages`.
This PR simply removes Payload from the default list. Developers can add
it back in if they are using older versions of Payload.
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
## Changes
- We need to document how that we retry until a port is found when we're
not specifying a port via the CLI (`--port`) or the `PORT` environment
variable. For example, if `3000` and `3001` are used, we will check
`3000`, `3001`, and then land on `3002`.
Closes NEXT-2731
Small update to mention TS paths when changing to src/ directory as it
is something most users will need to do.
Co-authored-by: Sam Ko <sam@vercel.com>
## Description
It made sense to improve our <picture data-single-emoji=":nextjs:"
title=":nextjs:"><img class="emoji" width="20" height="auto"
src="https://emoji.slack-edge.com/T0CAQ00TU/nextjs/2a85d633ae594556.png"
alt=":nextjs:" align="absmiddle"></picture> CLI docs after refactoring
the CLI!
## Important Changes
- Removes mention of `next export`, which was moved to `next.config.js`
- Adds mention of `--turbo`
- Adds all the expected help outputs
## Related
- https://github.com/vercel/next.js/pull/61877
- Fixes https://github.com/vercel/next.js/issues/59226
Closes NEXT-2545
---------
Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Co-authored-by: Michael Novotny <manovotny@gmail.com>
Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Clarifies what passing false or undefined to the revalidate property
option of unstable_cache does.
Context: I didn't want my DB query to be cached at all, but I did use
this API because I wanted to refresh a component's data after submitting
a server action. I thought I had to pass 0, or false to get it to not
cache at all.
Co-authored-by: Sam Ko <sam@vercel.com>
Closes#62653
Finishes the job started by https://github.com/vercel/next.js/pull/58196
and updates the last remaining code example that uses `reportWebVitals`
to use `useReportWebVitals`
Co-authored-by: Sam Ko <sam@vercel.com>
Linked react docs explicitly advise not to use low-entropy values such
as phone numbers with the taintUniqueValue API.
https://react.dev/reference/react/experimental_taintUniqueValue#caveats
> Do not use taintUniqueValue to protect low-entropy values such as PIN
codes or phone numbers. If any value in a request is controlled by an
attacker, they could infer which value is tainted by enumerating all
possible values of the secret.
PS Sorry for the tiny change but this threw me off when I read it.
### What?
If the user is logged in and on the dashboard, no need to redirect.
### Why?
#62547
### How?
We still want to redirect to the dashboard from other routes, if the
user is logged in already.
Fixes#62547, also related #62548
Closes NEXT-2619
Within the document
[docs/02-app/02-api-reference/01-components/link.mdx](https://github.com/zhuyedev/next.js/blob/canary/docs/02-app/02-api-reference/01-components/link.mdx#L327),
there is an unnecessary set of `<PagesOnly>` tags, which prevents a few
sections from being displayed correctly.This issue particularly affects
the section starting with "### If the child is a custom component that
wraps an <a> tag" (in line 327) and ending just before "### Middleware"
(in line 458).
Co-authored-by: Sam Ko <sam@vercel.com>
### What?
I found a small typo in the docs.(analytics.mdx)
Missing ")" in the end of function.
### How?
Add ")" in the end.
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What?
When the next config has no default export, it does not inform the user
correctly, but as:
```ts
// next.config.mjs
/** @type {import('next').NextConfig} */
export const config = {
// ...
}
```
```sh
⚠ Invalid next.config.mjs options detected:
⚠ Unrecognized key(s) in object: 'config'
⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
```
### Why?
The options within the named exported config may be inactivated without
notice.
### How?
Since we use dynamic import for the config, check if `userConfigModule`
has a `default` export, and if not, throw an error.
Also, added to the docs to address by text that the config needs a
default export.
### What?
Added a `_currentState` argument to the `authenticate` function in the
'Building Your Application' authentication documentation.
### Why?
The `useFormState` hook's first argument is a function that requires two
arguments. This adjustment ensures the `authenticate` function aligns
with the expected structure used by `useFormState`. For more details,
refer to the React documentation: [useFormState
Hook](https://react.dev/reference/react-dom/hooks/useFormState).
The current link just takes you to the definition of serialization on
MDN. I'm proposing this should link to the React docs and what they are
able to serialize because it is way more than JSON.
Changing from "components" to "_components" folder name here
"app/components/web-vitals.tsx", to be the same as previous example on
the page "app/_components/web-vitals.tsx".
Co-authored-by: Steven <steven@ceriously.com>
<!-- 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 #
-->
Hello, I noticed the following code in `link.tsx`.
```
//client/link.tsx
...
onMouseEnter(e) {
...
if (
(!prefetchEnabled || process.env.NODE_ENV === 'development') &&
isAppRouter
) {
return
}
prefetch(
...
)
},
```
It seems that when prefetch={false} is set, prefetch still occurs on
hover for page routers.
However, there is no explanation in the <Link> documentation, which
caused misleading.
I added the explanation inside PageOnly component, could you please
review it?
