<!-- 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 #
-->
#61159 fixed the documentation by removing incorrect information stating
that the type parameter must be set to 'page' when the path contains a
dynamic segment. This PR reflects this change in the warning message,
while confirming that the condition for the warning is already correct.
Additionally, I changed the word "affect" to "effect," assuming it was a
typo. In the documentation, I corrected myself and changed the wording
from "argument is required" to "parameter is required".
Continuing from: https://github.com/vercel/next.js/pull/60806
- [x] Update **conditional routes** example to render dashboard pages
based on user's role (rather than checking if the user is logged in)
- [x] Add **tab group** example to allow each slot to be navigated
independently.
- [x] Expand the **modal** example to show full implementation
- [x] Opening the modal
- [x] Closing the modal
- [ ] Add **catch-all** slots example
Please merge after the diagrams PR:
https://github.com/vercel/front/pull/28770
---------
Co-authored-by: Zack Tanner <zacktanner@gmail.com>
The rewrites doc was missing the `.` character when specifying which
characters were used for regex matching.
<!-- 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
-->
---------
Co-authored-by: Sam Ko <sam@vercel.com>
Hello,
This PR resolves a file extension inconsistency in the 'Setting up
Vitest with Next.js' section of the Next.js documentation
(`01-vitest.mdx`).
When using next.js with JavaScript, following the
documentation(`01-vitest.mdx`) leads to issues during testing because of
the jsx extension.
This PR corrects an example code that wrongly uses a '.js' extension for
a React component, which is against Vitest's requirement for '.jsx'
extensions.
- https://github.com/vitest-dev/vitest/issues/1564
Thank you.
Co-authored-by: Sam Ko <sam@vercel.com>
formalizes the concept of dynamic APIs inside Next to allow for varying
semantics beyond just staticGenerationBailout.
### Dynamic APIs
#### `markCurrentScopeAsDynamic`
useful to bail out of default caching semantics but does not imply a
Request specific data source was read. critically, this semantic is
ignored if you are inside a cache scope
#### `trackDynamicDataAccessed`
Must be called before reading any data source that is derived from
Request specific data. Currently this is `cookies()`, `headers()`, and
`searchParams`. This kind of data access inside a cache scope is
forbidden (it always should have been, but now it will error).
#### `trackDynamicFetch`
This one is unideal but the complexity of patch-fetch's current
implementation necessitates it for now. Essentially it will postpone if
we are prerendering. Long term this should be eliminated with a refactor
of patch fetch.
### Other Improvements
Also removes the `staticGenerationBailout` implementation as it has been
replaced with more specific logic in the places it was previously being
used.
One area that has also been enhanced is the proxy for app-route modules.
Previously we proxied the Request every time however when we are doing
non-static generation executions we generally don't want the overhead of
wrapping the request. In the refactor here I also improved the runtime
performance by using static proxy handlers and I believe I also fixed a
few bugs related to `clone` and `url`
In general there has been a bit of refactoring to clarify how we should
handle various render/execution states and a reduction in implicit side
effects for proper execution.
Another callout to notice is that app-route modules do not attempt a
static generation if they are force-dynamic regardless of the PPR
setting. Previously the PPR setting would opt them into this code path
which is not necessary because PPR itself does not work for routes, only
pages.
Closes NEXT-2099
<!-- 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?
Update the edge-and-nodejs-runtime doc with a Good to Know about a
common build error involving using packages that rely on the filesystem
in an edge runtime environment.
### Why?
The docs don't mention the issue. Most github issues, articles, and SO
answers revolve around updating the next.config with a webpack key to
ignore 'fs' imports in api routes and getServerSideProps functions. This
is incorrect when the issue is using packages that rely on 'fs',
'stream', or 'path' in an edge runtime environment. Silly mistake, but
it costs people time.
### How?
Update the docs.
Closes NEXT-
Fixes #
-->
---------
Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Fix: function name getStaticPaths is written in getStaticProps function,
issue exist in get-static-props.mdx under pages/api-reference/functions
folder. This issue was pushed as part of -
Pull Request: 55205
Commit Id: 80fba152f2add326a1520ffd2b530d00c75983f6
Co-authored-by: JJ Kasper <jj@jjsweb.site>
I've added a new page to the Next.js docs about optimizing videos. It
covers:
- the native video and iframe tag
- displaying externally hosted videos (i.e. from youtube)
- self hosting strategies and best practices
- Video optimization techniques
---------
Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Co-authored-by: Josh Lubawy <jlubawy@gmail.com>
Co-authored-by: Balázs Orbán <info@balazsorban.com>
I think there's some form of typographical error in the
`skipMiddlewareUrlNormalize` line under the advanced middleware flags
section of the docs.
This is the line from the docs [Source
link](https://nextjs.org/docs/app/building-your-application/routing/middleware#advanced-middleware-flags):
> `skipMiddlewareUrlNormalize` allows disabling the URL normalizing
Next.js does to make handling direct visits and client-transitions the
same. There are some advanced cases where you need full control using
the original URL which this unlocks.
Corrected to:
> `skipMiddlewareUrlNormalize` allows disabling URL normalizing in
Next.js to make handling direct visits and client-transitions the same.
There are some advanced cases where you need full control using the
original URL which this unlocks.
<!-- 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 #
-->
---------
Co-authored-by: Sam Ko <sam@vercel.com>
I've updated the Next.js documentation to include a new page covering
the best practices for implementing authentication. This doc covers the
essential concepts of authentication in Next.js, focusing on practical
strategies, effective session management, and robust authorization
techniques.
Key aspects of the update:
- Core Authentication Concepts: Introduced foundational concepts of
authentication, detailing their relevance and application in Next.js
projects.
- Diverse Authentication Strategies: Expanded on various authentication
strategies, providing insights on when and how to use them effectively
in different scenarios.
- Implementing Authentication in Next.js: Guided through the
implementation process, illustrating the use of middleware, server
actions, and route handlers to create a secure and user-friendly
authentication system.
- Session Management Techniques: Discussed different approaches to
session management, highlighting their pros and cons to aid in choosing
the most suitable method for specific project needs.
- Securing Application Access: Detailed how to protect routes and manage
user permissions, ensuring that access is granted appropriately based on
user roles and authentication status.
- Next.js Compatible Solutions: Included references to several
compatible authentication solutions for Next.js, facilitating easy
integration and setup.
---------
Co-authored-by: Balázs Orbán <info@balazsorban.com>
Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
This PR stabilizes the previously introduced experimental config options
for providing a custom cache handler (for both ISR as well as the Data
Cache) and for disabling or configuring the in-memory cache size. The
example usage would be as follows:
```js
// next.config.js
module.exports = {
cacheHandler: require.resolve('./cache-handler.js'),
cacheMaxMemorySize: 0 // disable default in-memory caching
}
```
This PR also updates the documentation to better reflect how to use the
custom cache handler when self-hosting. Further information will be
added in a following PR that also includes a full example of a custom
cache handler that implements `revalidateTag` as well as passing in
custom cache tags. The API reference docs have been updated here, as
well as a version history added.
I also noticed that we currently have two duplicated versions of the ISR
docs in the Pages Router docs: both for rendering and for data fetching.
Data Fetching is the correct location for this page. There were no other
references to the rendering version in the docs, so that must have been
an accident. I'll need to a get a redirect going for that regardless.
Tests have been updated for `cacheHandler` and I added a new test for
`cacheMaxMemorySize`.
---------
Co-authored-by: Jiachi Liu <inbox@huozhi.im>
The following spans are either added or displayed by default:
* `NextNodeServer.findPageComponents` - page components
resolution/require
* `NextNodeServer.getLayoutOrPageModule` - load modules (webpack or
turbopack)
This would allow different apps to setup fetch instrumentation similar
to `@opentelemetry/instrumentation-http` and
`@opentelemetry/instrumentation-fetch` without duplicating fetch spans
and avoiding confusion with context propagation.
This adds documentation around the client router filter we leverage in
`pages` to allow incremental migration from `pages` to `app`. Also adds
mention of two experimental configs that can be useful for managing the
client router filter.
x-ref:
https://github.com/vercel/next.js/issues/47486#issuecomment-1889623898
Closes NEXT-2090
---------
Co-authored-by: Sam Ko <sam@vercel.com>
Reverse directory order to indicate that `src/` or the parent of `app/`
should be used.
At first I thought the correct place was the parent folder of `src/`,
this eliminates that confusion
