This pull request adds the missing `Metadata` type declaration to the
root layout of the `create-next-app` templates. The metadata object was
missing its type definition, which has been resolved by adding the
appropriate type import and annotation.
---------
There's a small typo: `[pagesExtension]` -> `[pageExtensions]`.
Got confused why my instrumentation hook was not called. When I searched my source code for `pagesExtension` there was no occurrence so I thought I did not use it; soon after I realized the field in the docs has a typo .
Adds a regression test for testing progressive enhancement of Server
Actions. Both when passed from a Server Component and when imported into
a Client Component.
#51723 landed a bit too early which broke this but it'll be fixed again
once React is upgraded.
Co-authored-by: Shu Ding <g@shud.in>
This is a follow up to PR https://github.com/vercel/next.js/pull/52291
which removed the `next.config.js` which started causing an error during
CI:
```
@next/swc:test-cargo-bench: error: couldn't read packages/next-swc/crates/next-dev/benches/next.config.js: No such file or directory (os error 2)
@next/swc:test-cargo-bench: --> packages/next-swc/crates/next-dev/benches/bundler.rs:74:13
@next/swc:test-cargo-bench: |
@next/swc:test-cargo-bench: 74 | include_bytes!("next.config.js"),
@next/swc:test-cargo-bench: | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
@next/swc:test-cargo-bench: |
@next/swc:test-cargo-bench: = note: this error originates in the macro `include_bytes` (in Nightly builds, run with -Z macro-backtrace for more info)
@next/swc:test-cargo-bench:
@next/swc:test-cargo-bench: error: could not compile `next-dev` (bench "mod") due to previous error
@next/swc:test-cargo-bench: warning: build failed, waiting for other jobs to finish...
@next/swc:test-cargo-bench: ELIFECYCLE Command failed with exit code 101.
```
https://github.com/vercel/next.js/actions/runs/5476339074/jobs/9973767389#step:27:959
- Add app router example to 03-environment-variables.mdx
Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
Depends on https://github.com/vercel/turbo/pull/5398 (and downstack) on
the Turbo side.
This PR makes it so the output path of Node.js entry chunks for pages is
determined solely from the pathname. This isn't actually necessary for
pages, but it makes for easier debugging anyway. See the Turbo PR for
more details.
This also changes the page structure so it also works if there is no
`pages` directory. In this case, we still want to use pages' default
_app, _document, and _error pages, even with existing app routes. So an
empty page structure should still have an effect.
## Turbopack updates
* https://github.com/vercel/turbo/pull/5415 <!-- Will Binns-Smith -
Turbopack: Execution tests in node.js -->
* https://github.com/vercel/turbo/pull/5461 <!-- Tobias Koppers - use a
lock to ensure atomic invalidation from file changes -->
* https://github.com/vercel/turbo/pull/5398 <!-- Alex Kirszenberg -
Configure the path of the Node.js entry chunk -->
* https://github.com/vercel/turbo/pull/5469 <!-- Tobias Koppers - allow
hmr tests to correctly detect hmr event -->
*This is a resubmit of https://github.com/vercel/next.js/pull/52268
because I neglected to run `pnpm install` last time and it was
accidentally automerged before I could fix it.*
5.0.0-canary-7118f5dd7-20230705 includes a new lint error for hook calls
inside an async component, a common mistake when refactoring Server
Components to Client Components, or vice versa.
This updates the dependency in eslint-config-next.
<!-- 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: Tim Neutkens <tim@timneutkens.nl>
Update some of the hash we're using in the framework to use `sha1` instead. It's usually up to 20% faster than `sha256` and slightly faster than `md5`. All these places are only using the algorithm to generate a checksum, so there's no security concern to switch the algorithm.
- packages/next/src/build/index.ts: using the hash as the key to track the traced files
- packages/next/src/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent.ts: CSS modules class name generation
- packages/next/src/build/webpack/loaders/next-flight-css-loader.ts: checksum for server imported CSS's file content
- packages/next/src/build/webpack/loaders/next-font-loader/index.ts: font asset hash
- packages/next/src/cli/next-dev.ts: instrumentation file hash
- packages/next/src/server/dev/hot-reloader.ts: module hash for HMR
<!-- 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 #
-->
### What? / Why?
A follow up of previous fix#52148.
This PR fixes the error `SyntaxError: Cannot use import statement
outside a module` when developing with antd on next canary. I suspect
this happens because ant doesn't have a `type: "module"` in their
`package.json` files, but the previous `modularizeImports` config uses
the `es` version of their lib.
This is also reported in comments
https://github.com/vercel/next.js/pull/52148#discussion_r1251408484 and
https://github.com/vercel/next.js/pull/52148#issuecomment-1619563059
### How?
Use the non-ES version. Instead of importing from `antd/es` dir, we use
`antd/lib` dir. and also change `@ant-design/icons/` into
`@ant-design/icons/lib/icons/`
This `modularizeImports` config has also been used in my company's
project.
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What?
Adds 409 response handling for fetch cache
### Why?
So we stop making data cache requests when it returns 409 for a
specified amount of time
### How?
Set a module scope variable `rateLimitedUntil` that we check against
before making a request. If we receive a 409 then set `rateLimitedUntil`
to now() + either a specified retry-after value returned from the api or
60s (can make this something else)
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### Issue
x-ref:
https://github.com/vercel/next.js/actions/runs/5469070005/jobs/9957658991?pr=52282#step:27:526
metadata tests are failing as flaky recently, then after digging into
it, noticed it as a hmr issue.
**Steps to repro with metadata test app**
The later (after the 1st one) visited page with client components
imports sometimes throw an full reload refresh warning
> Fast Refresh will perform a full reload when you edit a file that's
imported by modules
outside of the React rendering tree.
Turns out there's some unexpected hmr events when `"sync"` event is
triggered, and client tries to apply the updates but then failed. This
PR excludes the triggering by `"sync"` for RSC pages updates. `'sync'`
event with errors/warnings will still be handled and then `'built'`
event will be handled with hot reload updates
Possibly related to #40184
Found this function is used by `nextra` and log unexpected warning sometimes
```
// node_modules/.pnpm/nextra@2.8.0_2yzqpfdqpxhuhtk2arnb2je2cq/node_modules/nextra/dist/index.js
// src/file-system.ts
var findPagesDirImport = __toESM(require("next/dist/lib/find-pages-dir.js"));
```
This helps getting rid of the
```
Error: connect ECONNREFUSED ::1:64696
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
errno: -61,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '::1',
port: 64696
}
```
error for me when running the standalone server. cc @ijjk.
I'm not sure if it's related to https://github.com/http-party/node-http-proxy/issues/835.
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
### What?
I've found 2 more spots that didn't properly cancel the streaming response when the client disconnects. This fixes `RenderResult.pipe()` (called during dynamic render results) and `sendResponse()` (used during Route Handlers using `nodejs` runtime).
It also (finally) adds tests for all the cases I'm aware of.
### Why?
To allow disconnecting from an AI service when a client disconnects. $$$
### How?
Just checks for `response.closed`, which will be closed when the client's connection disconnects.
5.0.0-canary-7118f5dd7-20230705 includes a new [lint error for hook calls inside an async component](7118f5dd7b), a common mistake when refactoring Server Components to Client Components, or vice versa.
This updates the dependency in eslint-config-next.
<!-- 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
- 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?
- Use a `cssModules` option to configure the `next-flight-css-loader.ts`
based on the match resource.
- Added types
- Ran prettier
### Why?
NextJs supports css modules and global css files.
The `next-flight-css-loader.ts` is capable of dealing with both formats.
However under the hood the loader shares almost no code for css modules
and global css files.
To branch into the correct behaviour the `next-flight-css-loader.ts`
checks the extension of the file using
`this.resourcePath.match(/\.module\.(css|sass|scss)$/)`.
`this.resourcePath` does not include the information from webpacks `!=!`
import syntax.
One solution would be to use `this._module.matchResource` instead of
`this.resourcePath`.
But imho passing it from the webpack.config.js instead of duplicating
the css module file regexp felt cleaner.
### Further questions
- Should we update the loader banner comment?
- Can we drop `this.data.__checksum` in the pitch loader function for
css modules? (it would speed up css modules and for me it looks like it
isn't needed anymore for css modules because of
2eeb0c7f49
(4. April by @shuding)
- Should we split the loader into two loaders?
Fixes#52208
---------
Co-authored-by: Shu Ding <g@shud.in>
The current message isn't very clear about `"use server" function` and
`"use server" file`, and there's no link to docs to explain it further:
```
"use server" functions are not allowed in client components.
You can import them from a "use server" file instead.
```
This PR makes it a bit more verbose:
```
It is not allowed to define inline "use server" annotated Server Actions in Client Components.
You can either mark the entire file by putting "use server" at the top, or pass them down through props from a Server Component.
Read more: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#with-client-components
```
## What?
Uses a pre-created regex instead of having webpack run path-to-regexp on the list of patterns. Saves a few milliseconds.
Adds `node_modules` to ignored in order to skip a lot of stat calls at the end of the compilation.
This will likely have a big impact on applications using Yarn PnP as each stat call causes a lookup through `.pnp.cjs`.
I read the PR checklist, but this is such a small PR that I feel it's
self-explanatory.
I believe the wrong function name (`generateMetadata`) is used on this
page, and it was meant to be `generateImageMetadata`.
If not... apologies 😅
### Issue
When the og module is a shared module being imported in both page and metadata image routes, it will be shared in the module graph. Especially in the edge runtime, since the `default` export is being used in the metadata image routes, then it can't be easily tree-shaked out.
### Solution
Separate the image route to a separate layer which won't share modules with the page, so that image route is always bundling separately and the `@vercel/og` module only stays inside in that layer, when import image metadata named exports (size / alt / etc..) it can be still tree shaked.
Co-authored-by: Jiachi Liu <4800338+huozhi@users.noreply.github.com>
