Configuring `remotePatterns` can be a hassle because you have to define
each of the parts. And if you forget a part, its a wildcard meaning it
will match anything. This is usually not desirable since most remote
images don't allow query strings.
This PR adds support for using an array of `URL` objects when defining
`images.remotePatterns`.
```js
module.exports = {
images: {
remotePatterns: [
new URL('https://res.cloudinary.com/my-account/**'),
new URL('https://s3.my-account.*.amazonaws.com/**'),
],
},
}
```
Note that wildcards must be explicit and anything missing is assumed to
no longer match.
This PR adds support for `images.qualities` configuration which is an
allowlist of qualities that can be used with the quality prop on the
Image component.
- Depends on https://github.com/vercel/vercel/pull/12792
We typically add `search: ''` on `remotePatterns` to disallow the query
string, which is the most common case.
There were a few missing places in the docs so this PR fills in those
gaps.
When using dependencies in Middleware that make use of dynamic code evaluation, Next.js emits a build error because this is not supported in the Edge runtime.
In rare cases, when the code can not be reached at runtime and can't be removed by tree-shaking, users might opt in to using the `unstable_allowDynamic` config.
When combined with pnpm, the provided glob patterns as documented at https://nextjs.org/docs/messages/edge-dynamic-code-evaluation#possible-ways-to-fix-it did not match correctly because of pnpm's use of the `.pnpm` directory.
To fix the pattern matching, we need to provide the `dot` option to [picomatch](https://github.com/micromatch/picomatch), which enables dotfile matching.
_Side note: Ideally we would detect dynamic code evaluation after tree shaking, to reduce the number of cases where users need to revert to using `unstable_allowDynamic`._
fixes#51401
## Description
Unify the note format according to the [contribution
guide](https://nextjs.org/docs/community/contribution-guide#notes).
In addition, add missing bullet points to useful links.
### Improving Documentation
- [x] Run `pnpm prettier-fix` to fix formatting issues before opening
the PR.
- [x] Read the Docs Contribution Guide to ensure your contribution
follows the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
---------
Co-authored-by: Delba de Oliveira <[email protected]>
### Why?
To customize Image Optimation, the user can use a custom loader, but
that information was out from the related lint error message.
Closes NDX-181
## Description
Follow up #72391.
I missed some error pages.
### Improving Documentation
- [x] Run `pnpm prettier-fix` to fix formatting issues before opening
the PR.
- [x] Read the Docs Contribution Guide to ensure your contribution
follows the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
Co-authored-by: Delba de Oliveira <[email protected]>
This PR updates the link for the Cloudflare Auto Minify feature, as it
has been deprecated. Cloudflare now recommends disabling this feature to
avoid potential issues. The link and related references have been
modified to reflect this update and ensure accurate information for
users.
Co-authored-by: Delba de Oliveira <[email protected]>
## Description
[Invalid Page / API Route
Config](https://nextjs.org/docs/messages/invalid-page-config) shows some
examples.
However, runtime examples are same `nodejs` runtime.
Then I add `edge` value instead of duplicate value.
### Improving Documentation
- [x] Run `pnpm prettier-fix` to fix formatting issues before opening
the PR.
- [x] Read the Docs Contribution Guide to ensure your contribution
follows the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
Co-authored-by: Delba de Oliveira <[email protected]>
## Description
[next-request-in-use-cache error
page](https://nextjs.org/docs/messages/next-request-in-use-cache) uses
-/+ icons in code block.
However, it doesn't work correctly because it's not diff code block.
Then add highlight instead of that.
### Improving Documentation
- [x] Run `pnpm prettier-fix` to fix formatting issues before opening
the PR.
- [x] Read the Docs Contribution Guide to ensure your contribution
follows the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
Co-authored-by: Delba de Oliveira <[email protected]>
## Description
Replace `let` with `const` in [No async client component error
page](https://nextjs.org/docs/messages/no-async-client-component)
example.
Since in these examples, it doesn't need to be a `let`, as it doesn't do
any reassignment.
### Improving Documentation
- [x] Run `pnpm prettier-fix` to fix formatting issues before opening
the PR.
- [x] Read the Docs Contribution Guide to ensure your contribution
follows the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
Co-authored-by: Delba de Oliveira <[email protected]>
## Summary
Add `bash filename="Terminal"` to improve readability.
### Improving Documentation
- [x] Run `pnpm prettier-fix` to fix formatting issues before opening
the PR.
- [x] Read the Docs Contribution Guide to ensure your contribution
follows the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
Co-authored-by: Delba de Oliveira <[email protected]>
## Summary
Add a slash to correct the problem.
### Improving Documentation
- [x] Run `pnpm prettier-fix` to fix formatting issues before opening
the PR.
- [x] Read the Docs Contribution Guide to ensure your contribution
follows the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
Co-authored-by: Delba de Oliveira <[email protected]>
## Summary
Delete an incorrect link and update a right link.
### Improving Documentation
- [x] Run `pnpm prettier-fix` to fix formatting issues before opening
the PR.
- [x] Read the Docs Contribution Guide to ensure your contribution
follows the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
---------
Co-authored-by: JJ Kasper <[email protected]>
## Description
Some files use `md` extension.
So, I corrected it by changing the extension to `mdx`.
### Improving Documentation
- [x] Run `pnpm prettier-fix` to fix formatting issues before opening
the PR.
- [x] Read the Docs Contribution Guide to ensure your contribution
follows the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
Co-authored-by: JJ Kasper <[email protected]>
# Summary
Add missing comments path to which #61416 changed.
### Improving Documentation
- [x] Run `pnpm prettier-fix` to fix formatting issues before opening
the PR.
- [x] Read the Docs Contribution Guide to ensure your contribution
follows the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
Co-authored-by: JJ Kasper <[email protected]>
It will be quite common to attempt to access data during prerendering
and encounter the error that indicates you did not provide a Suspense
boundary to define fallback UI. This change updates the error message
and includes a link to a new docs page which explains how to handle this
error.
---------
Co-authored-by: Delba de Oliveira <[email protected]>
Temporarily removing the dev warnings. I've moved these to be errors in
the build side. In a follow up PR I will use prerendering during dev to
trigger these errors and report them as dev errors as well.
This also updates how we track sync dynamic errors. The main goal is to
have a stack trace of the sync function and separately report all the
component stacks that might contain this function call. It's not
fool-proof b/c the sync api may be called in a way that is not observed
by SSR. The whole debugging story here will improve dramatically with
owner stacks but that is currently experimental only in React.
The plan for future updates is to add a prospective render for SSR so we
can flush out module scope issues like calling Math.random while lazy
initializing a module. This is asserted for RSC in this change (see new
tests) but won't wouldn't pass for SSR b/c we only do single pass
prerendering at the moment.
After that I will add in the prerender-while-render in dev and utilize
the prerender errors to power dev as well.
