The PR continues from #58038 aiming to reduce the installation size
further, and **improve performance in doing so**.
Most of `micromatch`'s APIs are essentially wrappers/alias of
`picomatch`, supplemented with additional features facilitated by a
transitive dependency `braces`. However, Next.js doesn't use those
"extra features". Switching from `micromatch` to `picomatch` can avoid
introducing the transitive dependency `braces`.
The PR also improves some globs' performance by hoisting.
- `micromatch.makeRe` is just an alias of `picomatch.makeRe`
-
90dc0cd3e1/index.js (L387C30-L387C30)
- `micromatch.isMatch(str, patterns, options)` equals
`picomatch(patterns, options)(str)`
-
90dc0cd3e1/index.js (L123)
- `micromatch.matcher` is just an alias of `picomatch`
-
90dc0cd3e1/index.js (L104C1-L104C40)
---------
Co-authored-by: Sam Ko <sam@vercel.com>
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>
### 🧐 What's in there?
`config.analyticsId` is a rarely-used mechanism, initially intended to
Next.js users hosting their application themselves and willing to report
Core Web Vitals to Vercel Speed Insights.
This platform specific mechanism can be replaced with the built-in
[`useReportWebVitals`](https://nextjs.org/docs/app/api-reference/functions/use-report-web-vitals).
### 🧪 How to test?
1. make a new Next.js app
1. define env variable `VERCEL_ANALYTICS_ID` to a dummy value
1. start your application in dev mode:
```shell
⚠ config.analyticsId is deprecated and will be removed in next major
version. Read more:
https://nextjs.org/docs/messages/deprecated-analyticsid
▲ Next.js 14.0.5-canary.58
- Local: http://localhost:3000
✓ Ready in 917ms
```
1. build your application:
```shell
▲ Next.js 14.0.5-canary.58
Creating an optimized production build ...
✓ Compiled successfully
Linting and checking validity of types .
⚠ The Next.js plugin was not detected in your ESLint configuration. See
https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
✓ Linting and checking validity of types
✓ Collecting page data
✓ Generating static pages (4/4)
⚠ `config.analyticsId` is deprecated and will be removed in next major
version. Read more:
https://nextjs.org/docs/messages/deprecated-analyticsid
```
1. remove the env variable, add a `next.config.js` file with a dummy
`analyticsId` variable:
```js
module.exports = { analyticsId: "UA-12345678-9" };
```
1. start your application in dev mode: it'll issue the same warning.
1. build your application: it'll issue the same warning.
---------
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
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>
It seems that when tracing build dependencies our server tracing was
analyzing all server chunks un-necessarily and when a very large
dependency like `ace-builds` is creating large chunks it can slow down
builds drastically so this ensures we eagerly apply our shared ignores
to avoid this over tracing.
Build times before [with provided
repro](https://github.com/MartinXPN/next-slow-build-reproduction):
```sh
▲ Next.js 14.1.0
Creating an optimized production build ...
✓ Compiled successfully
✓ Linting and checking validity of types
✓ Collecting page data
✓ Generating static pages (5/5)
✓ Collecting build traces
✓ Finalizing page optimization
✨ Done in 437.29s.
```
Build times after [with provided
repro](https://github.com/MartinXPN/next-slow-build-reproduction):
```sh
▲ Next.js 14.1.1-canary.0
Creating an optimized production build ...
✓ Compiled successfully
✓ Linting and checking validity of types
✓ Collecting page data
✓ Generating static pages (5/5)
✓ Collecting build traces
✓ Finalizing page optimization
✨ Done in 42.38s.
```
Closes: https://github.com/vercel/next.js/issues/58759
Closes NEXT-2161
Issue: https://github.com/vercel/next.js/issues/60853
### What?
Added `@sentry/profiling-node` to the server-external-package object so
that sentry users who want to use this package don't have to manually
add this package in the experimental nextjs config entry.
### Why?
Package bundling will fail as shown in the following issue if not added
to this exclude list.
https://github.com/getsentry/profiling-node/issues/170
---
Fixes#60853
### Adding or Updating Examples
I can't import `useFormState` from `react-dom` with
`@types/react-dom@18.2.5`, so I upgrade it to the latest version of it.
---------
Co-authored-by: Sam Ko <sam@vercel.com>
`experimental.missingSuspenseWithCSRBailout` should be enabled by
default to help users to disciver unwrapped suspense boundaries.
Add more notes in the error doc about deprecation and temporary
workaround to disable it.
Closes NEXT-2157
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
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>
### What?
Add support for auto-importing `headers()` and `cookies()`
### Why?
Improve the auto-import experience in IDEs like VScode
### How?
Re-export the `next/headers` type references
Closes NEXT-2146
### What
Follow up for #59852 , now you can use `next/og` if your nextjs app is
marked as ESM with `"type": "module"` in package.json.
### How
It's a bug in external handling, we shouldn't ESM import error for local
requests. Previously you'll see the below error but the
og import shouldn't be errored as it's not external package
```
Module not found: ESM packages (/.../app/opengraph-image.js) need to be imported. Use 'import' to reference the package instead
https://nextjs.org/docs/messages/import-esm-externals
```
Closes NEXT-2147
### What?
Follow-up to #60579 and #60750. Checking `startsWith` is not enough
because it hides the rest of the stack. Changed the test to check the
snapshot for Turbopack and webpack.
Fixes a bug where the stack lines showed `http (NaN:NaN)` as the source
lines.
Added support for source lines that don't have a open in editor.
<!-- 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 #
-->
Closes NEXT-2128
### Fixed a Test Case
- Tests fixed:
`packages/next/src/build/normalize-catchall-routes.test.ts`, the
function call `normalizeCatchAllRoutes(appPaths)` was removed by
accident in this [merged commit
](efebba80a7 (diff-e3c0d3c6e15d8b035a3252a1ada2b04d5dd33010885fed8f6d689f75aa80bff5))
rendering the test case pointless
REF NEXT-1984
This PR fixes the issue where an inline Server Action gets exported. As
this isn't the designed use case for inline Server Actions (they're
supposed to be defined and used inside another closure, such as
components), we are not handling the export cases currently:
```ts
export async function action() {
"use server"
...
}
<form action={action}/>
```
...which gets compiled into:
```ts
export async function action() {} // No-op function
<form action={...actionReference...}/>
```
Note that everything works inside this module until you `import` that
action and use it in another module.
To tackle that, this PR changes how that works as described in
`server/27/output.js`.
Closes NEXT-2140