Shallow route changes did not work for rewritten pages when Middleware
was used, and made hard refreshes, although it was possible with static rewrites.
This happened because the router has a manifest of the static rewrites,
allowing static rewrites to map the route before comparing with the
local cache.
Middleware rewrites are dynamic and happening on the server, so we
can't send a manifest easily. This means that we need to propagate
the rewrites from the data requests into the components cache in
the router to make sure we have cache hits and don't miss.
This commit does exactly that and adds a test to verify that it works.
This fixes#37072 and fixes#31680
_Note:_ there's one thing that is somewhat an issue though: if the first
page the user lands on is a rewritten page, and will try to make a
shallow navigation to the same page--we will make a `fetch` request.
This is because we don't have any client cache of the `rewrite` we just
had.
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
TypeScript is being leveraged for new examples going forward, so I'm converting this example over. 😂
## Documentation / Examples
- [X] Make sure the linting passes by running `pnpm lint`
- [X] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
## Motivation/ Context
- When upgrading `next` from `11` to `12`, I followed [Upgrade guide from 11 => 12](https://nextjs.org/docs/upgrading#upgrading-from-11-to-12). I removed `.babelrc` to opt-in `SWC`. I thought that's all, but after removing `.babelrc`, Jest broke immediately. So I follow the guide https://nextjs.org/docs/advanced-features/compiler#jest to configure Jest to work with SWC. I copied the content of `jest.config.js` to my project but it does not work. The reason:
```diff
-const createJestConfig = nextJest({ dir }) // `dir` IS NOT DEFINED
+const createJestConfig = nextJest({ dir: './' }) // Should change to this. Sync with https://nextjs.org/docs/testing#setting-up-jest-with-the-rust-compiler
```
- This PR is to help others to configure Jest with SWC by copying code from the documentation site without encountering the same issue as I did.
## Documentation
- [x] Update the docs so users can just copy and paste when configuring Jest with SWC (Sync with https://nextjs.org/docs/testing#setting-up-jest-with-the-rust-compiler)
- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
## Future work
- Since [Upgrade guide from 11 => 12](https://nextjs.org/docs/upgrading#upgrading-from-11-to-12) did not mention anything about Jest. If I remove `.babelrc` to opt-in SWC. The current Jest settings will crash (since it's using babel). We likely want to update the Upgrade guide to mention this cc: @leerob
* Improve stack traces in dev mode
* Refactor `react-dev-overlay` to support the Edge Compiler
* Serialize errors including the compiler `source`
* Adopt the new `react-dev-overlay` displaying it for middleware errors
* Improve tests
* fix rsc cases
* update test
* use check for dev test
* handle different error from node version
Co-authored-by: feugy <damien@vercel.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Fixes#37683
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
`with-docker-compose` contains everything needed to get Next.js up and running with Docker Compose.
This example aims to provide an easy-to-use, Next.js app development and production environment, **all without Node.js being installed** on the host machine. This ensures a consistent development environment across Windows, MacOS, and Linux teams.
I was inspired to create this, because the existing [with-docker](https://github.com/vercel/next.js/tree/canary/examples/with-docker) example only uses Docker to build the final production artifacts, not provide a development environment. Docker Compose easily syncs changes with containers for Hot Reloading, parallel builds, and networking, making it a powerful and consistent development tool.
Developers can **easily extend this example** by modifying the YAML files to include Nginx, Postgres, and other Docker images.
This example takes advantage of Docker multistage builds combined with the Next 12.1 [Output Standalone](https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files-experimental) feature, to create up to **80% smaller apps** (Approximately 110 MB compared to 1 GB with create-next-app). I also included an example without multistage builds, for developers who don't want to get into the weeds.
I have been tweaking this Docker Compose setup over 3 years of real world use, but please let me know if anything can be improved.
The Contributing guidelines say TypeScript should be leveraged for new examples, so I thought I'd convert this example over.
I also:
- Upgraded all dependencies
- Replaced the `prop-types` package with TypeScript types
## Documentation / Examples
- [X] Make sure the linting passes by running `pnpm lint`
- [X] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
* Ensure custom middleware matcher is used correctly in client manifest
* lint-fix
* patch e2e case
* fix rsc case
* update test
* add missing normalize
In a previous PR (#34075), the ISR behavior was introduced to the Image Optimization API, however it changed the cache-control header to always set maxage=0. While this is probably the right behavior (the client shouldn't cache the image), it introduced a regression for users who have CDNs in front of a single Next.js instance (as opposed to [multiple Next.js instances](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#self-hosting-isr)).
Furthermore, the pros of client-side caching outweight the cons because its easy to change the image url (add querystring param for example) to invalidate the cache.
This PR reverts the cache-control behavior until we can come up with a better long-term solution.
- Fixes#35987
- Related to #19914
- Related to #22319
- Closes#35596
* Re-introduce Edge API Endpoints
This reverts commit 210fa39961, and
re-introduces Edge API endpoints as a possible runtime selection in API
endpoints.
This is done by exporting a `config` object:
```ts
export config = { runtime: 'edge' }
```
Note: `'edge'` will probably change into `'experimental-edge'` to show
that this is experimental and the API might change in the future.
* Support `experimental-edge`, but allow `edge` too
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
* Update upchunk to latest (2.3.1).
* Add mux-player package to package.json
* WIP: Make VideoPlayer return mux-player
* Remove unused code from prev video player
* Use mux-player-react directly
* Fix import line for mux-player-react
* chore: fix lint issues
This ensures we use the correct dynamic route params favoring params from the URL/matched-path over route-matches. This also ensures we properly cache `_next/data` requests client side when the page is not a `getServerSideProps` page.
x-ref: https://github.com/vercel/next.js/pull/37574
## Bug
- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
In my last PR I removed the request library as it is obsolete and the application does not use it. The database setup utility does though, so I am reverting this change.
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
[Recent changes](https://github.com/vercel/next.js/pull/31936) to `next/script` introduced the capability to use `beforeInteractive` scripts in the custom document. This old error message is incorrect.
This is just a bump of tech stack used in the example and small rewrite of swr functionality.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm lint`
- [ x ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
This PR builds on the work from @hattakdev (PR went stale: https://github.com/vercel/next.js/pull/14499) and adds a new `integration` test for the new warning.
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Errors have helpful link attached, see `contributing.md`
## To run locally
1. `pnpm build`
2. `pnpm testonly test/integration/export-getInitialProps-warn/test/index.test.js`
Fixes#13946
## Notes
<details>
<summary>Click to toggle see</summary>
I know the `contributing.md` doc said to avoid adding new tests to `integration`. It also said new tests should be written in TypeScript.
I wasn't sure where to put the tests for this so I went with `integration`. I also didn't see many other tests written in TS in this part of the codebase so I stuck with `.js`.
</details>
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Strip next internal queries in inline flight response
## Bug
- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
* Update to process redirects/rewrites for _next/data
* correct matched-path resolving with middleware
* Add next-data header
* migrate middleware tests
* lint-fix
* update error case
* update test case
* Handle additional resolving cases and add more tests
* update test from merge
* fix test
* rm .only
* apply changes from review
* ensure _next/data resolving does not apply without middleware
* Fix react root env missing in NextServer
* switch to useId instead of using process.env var
* add production test
* extend timeout
* fix test
* fix lint
* use version to detect if enable react root
This commit enables the following patterns in Middleware:
```ts
// with a dot notation
const { ENV_VAR, "ENV-VAR": myEnvVar } = process.env;
// or with an object access
const { ENV_VAR2, "ENV-VAR2": myEnvVar2 } = process["env"];
```
### Related
- @cramforce asked this fixed here: https://github.com/vercel/next.js/pull/37514#discussion_r892437257
## Feature
- [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
This PR moves the internal logic associated with `req.ua` into an explicit method the user should to call to have the same behavior.
**before**
```typescript
// middleware.ts
import { NextRequest, NextResponse } from 'next/server'
export function middleware(request: NextRequest) {
const url = request.nextUrl
const viewport = request.ua.device.type === 'mobile' ? 'mobile' : 'desktop'
url.searchParams.set('viewport', viewport)
return NextResponse.rewrites(url)
}
```
**after**
```typescript
// middleware.ts
import { NextRequest, NextResponse, userAgent } from 'next/server'
export function middleware(request: NextRequest) {
const url = request.nextUrl
const { device } = userAgent(request)
const viewport = device.type === 'mobile' ? 'mobile' : 'desktop'
url.searchParams.set('viewport', viewport)
return NextResponse.rewrites(url)
}
```
This potentially will save the extra 17 kB related to the size of `ua-parser-js`
