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?
<!-- 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?
This caused me a ton of issues in production due to inconsistent cache.
It does not manifest itself in local development. The only reason I
figured it out was because I upgraded to the canary release and someone
added a helpful exception explaining that I shouldn't be doing what I
was doing. To hopefully help people in the future, I'm adding a blurb to
the `unstable_cache` docs.
Co-authored-by: Sam Ko <sam@vercel.com>
Updated paths in relation to `<Link />` and middleware rewrites. Feel
free to leave suggestions if needed, this has always confused me a
little bit.
**Old Version**:
For example, if you have a Dynamic Route like `/dashboard/[user]` that
you want to present differently via middleware, you would write: `<Link
href={{ pathname: '/dashboard/authed/[user]', query: { user: username }
}} as="/dashboard/[user]">Profile</Link>`.
The `as` prop should be the URL we want to display while href/pathname
is the actual path. So if we want to present something differently via
middleware, we would do so via `as`. In the example above we want to
display `/dashboard/[user]` differently but we use
`as='/dashboard/[user]'`.
On the Examples section the name was already updated but not updated on
the Selecting Session Management in Next.js
---------
Co-authored-by: Balázs Orbán <info@balazsorban.com>
### What?
Resolves issue #61695
### Why?
The `Building Your Application -> Data Fetching -> Server Actions and
Mutations` section in the Next.js documentation has a few mismatches
with respect to JS and TS codes.
---------
Co-authored-by: battuAshita <battua@iitbhilai.ac.in>
Co-authored-by: Sam Ko <sam@vercel.com>
The docs mention using a `Link` to close the modal, but navigating away
from a slot that was active won't automatically unmount unless it
matches with a new page for that slot. This is because client-side
navigations don't switch slots from active -> default. Default is only
used on a hard navigation.
I believe this example used to be in here but got removed, so I re-added
with some extra clarity.
Closes NEXT-2405
## History
Previously, we added support for `squoosh` because it was a wasm
implementation that "just worked" on all platforms when running `next
dev` for the first time. However, it was slow so we always recommended
manually installing `sharp` for production use cases running `next
build` and `next start`.
Now that [`sharp` supports
webassembly](https://sharp.pixelplumbing.com/install#webassembly), we no
longer need to maintain `squoosh`, so it can be removed. We also don't
need to make the user install sharp manually because it can be installed
under `optionalDependencies`. I left it optional in case there was some
platform that still needed to manually install the wasm variant with
`npm install --cpu=wasm32 sharp` such as codesandbox/stackblitz (I don't
believe sharp has any fallback built in yet).
Since we can guarantee `sharp`, we can also remove `get-orientation` dep
and upgrade `image-size` dep.
I also moved an [existing `sharp`
test](https://github.com/vercel/next.js/pull/56674) into its own fixture
since it was unrelated to image optimization.
## Related Issues
- Fixes https://github.com/vercel/next.js/issues/41417
- Closes https://github.com/vercel/next.js/pull/54670
- Related https://github.com/vercel/next.js/issues/54708
- Related https://github.com/vercel/next.js/issues/44804
- Related https://github.com/vercel/next.js/issues/48820
