Commit graph

259 commits

Author SHA1 Message Date
Jiachi Liu
2af6b63dd1
Should resolve esm external module imports on server (#40865)
### Issue

When import an esm package in client component, and use it in server
component page, it will fail to SSR but render successfully on client.
It's because the import to esm package will make the client chunk become
an **async module** since esm module will be treated as **async**.

```
page (serve component) -> local module (client) -> external dependency (esm)
```

Then in react SSR layer, it need the module type information of that
chunk, async or not for react so that react could unwrap the async
module from `Promise` properly when SSR.

### Solution

We need to mark the client entries which are effected by async/esm
modules that becoming **async** as `async: true` in SSR manifest.

Since flight manifest plugin is only running against client compiler,
which doesn't have those module information from server compiler. So we
collect the async modules from the **server** compiler **client** layer
from flight entry client plugin, then leverage the collection to detect
if a module is async in flight manifest plugin for react.

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`
2022-09-26 15:46:01 -07:00
JJ Kasper
3837aa1cb0
Update expected middleware test error (#40918)
Fixes:
https://github.com/vercel/next.js/actions/runs/3128790934/jobs/5078100658#step:8:2223
2022-09-26 14:05:26 -07:00
Hannes Bornö
9ec041efbf
Update font loader output path (#40868)
Updates the output path so it's the same as when font files are imported
in CSS: `url(./font.woff2)`

Also adds missing font types to next package.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a 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 a 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/examples/adding-examples.md)
2022-09-26 12:59:38 -07:00
Tim Neutkens
8b802ddb88
Update handling of redirect/404 throw to cross server->client boundary (#40890) 2022-09-26 13:16:20 +02:00
Tim Neutkens
f6e37fd32e
Apply #40833 (#40872) 2022-09-25 11:45:00 +02:00
Shu Ding
d4d9d91566
Add optoutServerComponentsBundle option (#40770)
Follow-up for #40739 to add an option to opt-out specific packages from being bundled.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a 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`
- [x] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a 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/examples/adding-examples.md)
2022-09-24 18:47:42 +00:00
Hannes Bornö
719116ac81
Allow export const in font loader (#40836)
Allow `export const font = Font()` syntax

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a 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 a 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/examples/adding-examples.md)
2022-09-23 20:40:59 +00:00
Kiko Beats
2e02204dc9
build: upgrade edge-runtime (#40788)
**TODO**

- [x] Ensure [body-stream](https://github.com/kikobeats/next.js/blob/edge-runtime/packages/next/server/body-streams.ts) is up-to-date with https://github.com/vercel/edge-runtime/blob/main/packages/runtime/src/server/body-streams.ts

Changelog: https://github.com/vercel/edge-runtime/releases/tag/edge-runtime%401.1.0-beta.33
2022-09-23 12:01:36 +00:00
Tim Neutkens
976ccce59b
Handle redirect in same way as 404 in new router (#40796) 2022-09-23 13:34:47 +02:00
JJ Kasper
ce77607e50
Update error handling during app static generation (#40823)
This updates to ensure we properly error during static generation when a
non-dynamic SSR error is thrown so that unexpected errors are not
tolerated. This also fixes the static generation async storage not being
shared correctly due to different instances being created during
bundling.
2022-09-22 19:44:30 -07:00
JJ Kasper
0e3233de53
Disable flakey dev app test temporarily (#40816)
x-ref: [slack
thread](https://vercel.slack.com/archives/C035J346QQL/p1663822388387959)
x-ref:
https://github.com/vercel/next.js/actions/runs/3108897192/jobs/5038639320
x-ref:
https://github.com/vercel/next.js/actions/runs/3107019059/jobs/5034678245
x-ref:
https://github.com/vercel/next.js/actions/runs/3104956805/jobs/5030065922
2022-09-22 16:26:31 -07:00
Hannes Bornö
75bbf00a8f
Add local font loader (#40801)
Moves font related types to `next/font` so they can be reused in font
loaders.

Adds an argument to font loaders, the relative path from the app root to
the module consuming the loader. Needed for resolving local files
relative to the module calling it. Also used to improve error message.

Adds `@next/font/local` font loader. Similar to `@next/font/google` but
used to host locally downloaded font files.
2022-09-22 12:49:02 -07:00
Tim Neutkens
c4647bb630
Add handling for 404 in new router (#40787) 2022-09-22 13:08:45 +02:00
Hannes Bornö
bf8ee1edb4
Add support for font loaders (#40746)
For some context:
[https://vercel.slack.com/archives/CGU8HUTUH/p1662124179102509](https://vercel.slack.com/archives/CGU8HUTUH/p1662124179102509)

Continuation of #40221 and #40227

Adds `experimental.fontLoaders`.

SWC next-font-loaders (#40221) transforms font loader (e.g. #40227) call
expressions into an import with the function call arguments as a query.

The imports will be matched by `next-font-loader`. It runs the
configured font loaders - emits font files and returns CSS. Exports are
added, and the font-family is made locally scoped. The returned CSS is
turned into a CSS module with `css-loader` which lets you consume the
font-family.

`FontLoaderManifestPlugin` creates a manifest of the preloaded font
files for each entrypoint. Preload/preconnect are then added in
`_document.tsx` if any font files were found for that path.

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-09-21 22:12:59 -07:00
Shu Ding
11dd1de655
Remove unnecessary experimental flag (#40766)
`config.experimental.serverComponents` is currently required to be
enabled or disabled together with `config.experimental.appDir` (which
means `serverComponents === appDir` otherwise it will throw) so there is
no reason to keep both of them. This PR removes `serverComponents` from
Next.js and only rely on `appDir` instead.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a 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 a 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/examples/adding-examples.md)
2022-09-21 21:30:46 +02:00
Shu Ding
6d4f263121
Improved bundling strategy for the server graph (#40739)
This PR changes the external module resolution to eagerly bundle
node_modules, and some specific Next.js internal modules, if on the
`WEBPACK_LAYERS.server` layer. While resolving corresponding packages,
we use the `react-server` export condition (fallbacks to default).

A follow-up PR will be adding a Next.js option to opt-out specific
packages from being bundled on the server layer.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a 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`
- [x] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a 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/examples/adding-examples.md)
2022-09-21 20:45:33 +02:00
JJ Kasper
c5f1e2f76d
Add test case for /404 client transition (#40734)
This adds a test case verifying client transitions to `/404` or
`/_error` are working properly.

Test deployment with patched reproduction can be seen here
https://router-bug-repro-4bozmev4p-ijjk-testing.vercel.app/blocked

Closes: https://github.com/vercel/next.js/issues/40667
2022-09-21 11:29:52 -07:00
Tim Neutkens
2b9afcfea3
Change flight querystring to header (#40752) 2022-09-21 15:47:31 +02:00
Tim Neutkens
499ce6dbe1
Combine redirect function in new router (#40717) 2022-09-20 16:55:10 +02:00
Tim Neutkens
c90e5f0566
Handle redirects in new router (#40396)
Co-authored-by: Sebastian Markbåge <sebastian@calyptus.eu>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-09-20 15:28:07 +02:00
Jiachi Liu
0fb3284d1f
Use resolved url in flight entry loader (#40697)
If there's any resolve alias in webpack config, an aliased resource url will error with `require.resolve` usage in flight manifest plugin, we need to resolve the absolute resource url first then pass down to flight manifest


## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`
2022-09-20 10:40:27 +00:00
JJ Kasper
642d52e1ac
Break assetPrefix app tests into separate suite (#40701)
As discussed in slack this breaks out the `assetPrefix` tests to a
separate suite to speed up the main `app` suite.

x-ref: [slack
thread](https://vercel.slack.com/archives/C035J346QQL/p1663623560467579)
2022-09-19 18:17:16 -07:00
JJ Kasper
e70406022d
Temporarily skip switchable runtime test on deploy (#40700)
We can re-enable this after the necessary support has been landed. 

x-ref:
https://github.com/vercel/next.js/actions/runs/3086118218/jobs/4990617168
2022-09-19 17:54:55 -07:00
Jiachi Liu
5a50a9980f
Drop legacy RSC server and client extension (#40692)
Drop the support for `.server.js` and `.client.js` extension in RSC, only consume the pages with configured file extensions as page entry
2022-09-19 20:24:41 +00:00
JJ Kasper
aed2dc0c85
Add handling for static generation in app (#40561)
x-ref: [internal notes](https://www.notion.so/vercel/App-Static-Generation-dc5f1e0916684501b586e56a5b7b9483)
2022-09-19 18:05:28 +00:00
Shu Ding
c742c038b0
Port page and layout level API assertions to SWC transform (#40653)
We used to do an extra pass of SWR `parse` and loop over the AST inside
JavaScript to check if `getServerSideProps` or `getStaticProps` is used
in a client page or layout. Instead this can be done in the same
`react_server_components` SWC transform now.

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a 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 a 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/examples/adding-examples.md)
2022-09-19 14:30:32 +02:00
Hannes Bornö
356b6cec43
Send web vitals to Vercel analytics in app (#40669)
Sends web vitals to Vercel analytics.

My plan for the test was to assert the data sent by the client but there's a bug where it's always null when sending a blob https://github.com/microsoft/playwright/issues/6479.

When adding support for a custom web vitals reporter it will be easier to assert the values sent by the reporter.
2022-09-19 08:16:53 +00:00
Tim Neutkens
d41ca43d23
Change Flight response content type to application/octet-stream (#40665)
Ensures Flight responses are not loaded as HTML.


## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a 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 a 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/examples/adding-examples.md)
2022-09-18 20:49:05 +00:00
Jiachi Liu
3f8f72bf9b
Remove internal client next api detection (#40646)
Follow up for https://github.com/vercel/next.js/pull/40415

Remove internal next client api determination, fully relying on `'client'` directive.
Change `.client.js` extension to `.js ` in tests, remove legacy / unused test files
2022-09-18 09:36:10 +00:00
Jiachi Liu
295f9da393
Client directive (#40415)
## Feature
Change server components convention from using `.server.js` / `.client.js` file extension to determine it's a server or client component to using `'client'` js literal as a directive for determine client components boundary.
React RFC: https://github.com/reactjs/rfcs/pull/189
New behavior doesn't consume `.server.js` as server components any more, if you're enabling `serverComponents` flag, every `page.js` in app dir will become server components by default. If you adding a `'client'` directive to the page, then that page will become a client component. This rule also applies to the normal js components, client components will require a `'client'` directive to indicate its identity, instead of having a `.client.js` extension.
- [x] 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`
- [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`

Co-authored-by: Shu Ding <3676859+shuding@users.noreply.github.com>
2022-09-18 00:00:16 +00:00
Shu Ding
d5fa555841
Implement SWC transformer for server and client graphs (#40603)
This is an initial implementation of the Server Components SWC
transformer. For the server graph, it detects client entries via the
`"client"` directive and transpile them into module reference code; for
the client graph, it removes the directives. And for both graphs, it
checks if there is any invalid imports for the given environment and
shows proper errors.

With that added, we can switch from `next-flight-client-loader` to
directly use the SWC loader in one pass. Next step is to get rid of the
`.client.` extension in other plugins.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [x] 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`
- [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`

## 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)
2022-09-17 00:12:59 +02:00
유경화
7556611449
fix(next/router): Prevent query delete in routing when next.config basePath option is truthy (#40566)
## Bug

- [x] Related issues linked using `fixes #number`
    - fixes 
        - #38528 
        - #40432
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

Hi, it is my first pull request in this project.
So... if you need anything more tasks, please tell me.

Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-09-15 22:56:53 +00:00
Wyatt Johnson
33a6dca747
Mask Flight Parameters from Middleware (#39939)
This masks flight parameters from middleware so it doesn't interfere with RSC or routing.

## 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)


Co-authored-by: Tim Neutkens <6324199+timneutkens@users.noreply.github.com>
2022-09-15 14:53:51 +00:00
Tim Neutkens
385e3f0380
Wrap parallel routes tests in describe (#40546)
Small changes:
- Group parallel routes tests
- Upgrade tests to latest react experimental
2022-09-14 09:09:01 +00:00
Tim Neutkens
eadaca780b
Add additional tests for prefetch and trailingSlash (#40517)
Adds some of the tests we didn't have yet for app.
<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order 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 that you're making:
-->

## 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)
2022-09-13 16:01:43 -07:00
Tim Neutkens
f92a4cee8a
Add failing case for location throw (#40445)
Found that the cause was that `React.useId()` returns the same value across requests whereas it was being used to create a unique key. On further inspection that code could be removed altogether as `id` was not used client-side and the `rscCache` map is no longer needed as the flight instance is already being created per request so it can live in the context of the request execution.


## 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)
2022-09-12 12:45:37 +00:00
Jiachi Liu
d64fc54507
Temporarily disable unstable app test (#40408)
Disable this test and investigate it later

x-ref:
https://github.com/vercel/next.js/runs/8270347830?check_suite_focus=true
x-ref:
https://github.com/vercel/next.js/runs/8270348185?check_suite_focus=true
2022-09-09 11:50:18 -07:00
Tim Neutkens
a3a20dcbc1
Add template and error file types (#39808)
Co-authored-by: Jiachi Liu <inbox@huozhi.im>
2022-09-09 14:44:12 +02:00
Wyatt Johnson
c6ef857d57
Subresource Integrity for App Directory (#39729)
<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order 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 that you're making:
-->

This serves to add support for [Subresource
Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)
hashes for scripts added from the new app directory. This also has
support for utilizing nonce values passed from request headers (expected
to be generated per request in middleware) in the bootstrapping scripts
via the `Content-Security-Policy` header as such:

```
Content-Security-Policy: script-src 'nonce-2726c7f26c'
```

Which results in the inline scripts having a new `nonce` attribute hash
added. These features combined support for setting an aggressive Content
Security Policy on scripts loaded.

## 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.
- [x] Errors have helpful link attached, see `contributing.md`

## 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)

Co-authored-by: Steven <steven@ceriously.com>
2022-09-08 15:17:15 -07:00
Jiachi Liu
1858fa966c
Fix page url for edge routes in app dir (#40361)
For edge routes in app dir, we passed the page name as url so that the
url will be incorrect:

* a non-dynamic route `/dashboard` will become `/dashboard/page`
* a dynamic route `/dynamic/[id]` with url `/dyanmic/123` will still hit
`/dynamic/page/[id]/page`

This PR uses normalized `params.page` with interoplated as correct
pathname for the page.
2022-09-08 14:57:56 -07:00
Gal Schlezinger
220e144a6a
[edge] fix URLSearchParams lacking data from rewrite (#40260)
Given the change in #40076, when a middleware rewrites into an Edge
API route and changes the querystring, the changed querystring does
not appear in the incoming NextRequest object in the Edge API route

```ts
// middleware.ts
export function middleware(req: NextRequest) {
  const url = req.nextUrl;
  url.pathname = "/api/hello";
  url.searchParams.set("foo", "bar");
  return NextResponse.rewrite(url);
}

// pages/api/hello.ts
import { NextRequest } from "next/server";

export default function handler(req: NextRequest) {
  return NextResponse.json(req.nextUrl.searchParams.get("foo"));
}

export const config = { runtime: "experimental-edge" };
```

Our expectation when requesting `/api/hello` is to see `"bar"`,
but instead we are getting `null` back.

This commit fixes this issue by reading the given `query` instead of using
the initial querystring provided with the user request (prior to rewriting)

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
2022-09-08 11:19:18 +00:00
Hannes Bornö
a9b9e00703
fix(switchable-runtime): Make it possible to switch between edge and server runtime in dev (#39327)
Makes it possible to switch between edge/server runtime in dev without
breaking the server.

Fixes slack:
[1](https://vercel.slack.com/archives/CGU8HUTUH/p1659082535540549)
[2](https://vercel.slack.com/archives/C02CDC2ALJH/p1658978287244359)
[3](https://vercel.slack.com/archives/C03KAR5DCKC/p1656869427468779)

#### middleware-plugin.ts
`middlewareManifest` moved from module scope to local scope. Stale state
from earlier builds ended up in `middleware-manifest.json`. Functions
that changed from edge to server runtime stayed in the manifest as edge
functions.

#### on-demand-entry-handler.ts
When a server or edge entry is added we check if it has switched
runtime. If that's the case the old entry is removed.

#### Reproduce
Create edge API route and visit `/api/hello`
```js
// pages/api/hello.js
export const config = {
  runtime: 'experimental-edge',
}

export default () => new Response('Hello')
```

Change it to a server api route and visit `/api/hello`, it will explode.
```js
// pages/api/hello.js
export default function (req, res) {
  res.send('Hello')
}
```

#### Bug not fixed
One EDGE case is not fixed. It occurs if you switch between edge and
server runtime several times without changing the content of the file:

Edge runtime
```js
export const config = {
  runtime: 'experimental-edge',
}

export default () => new Response('Hello')
```

Change it to a server runtime
```js
export default function (req, res) {
  res.send('Hello')
}
```

Change back to edge runtime, the content of the file is the same as the
first time we compiled the edge runtime version.
```js
export const config = {
  runtime: 'experimental-edge',
}

export default () => new Response('Hello')
```

The reason is that both the edge and server compiler emits to the same
file (/.next/server/pages/api/hello.js) which makes this check fail in
webpack:
https://github.com/webpack/webpack/blob/main/lib/Compiler.js#L849-L861
Possible solution is to use different output folders for edge and server
https://vercel.slack.com/archives/CGU8HUTUH/p1661163106667559

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-09-07 13:42:32 -07:00
Hannes Bornö
35253e1a93
fix(switchable-runtime): make dev server not break when wrong runtime config is exported (#40312)
Currently the DEV server can't recover if you export an invalid runtime
config. It ends up in a state where it stops to work but nothing is
printed to the terminal.

It now prints an error but keeps working. When building it should crash,
there's an existing test for that
https://github.com/vercel/next.js/blob/canary/test/production/exported-runtimes-value-validation/index.test.ts#L5-L17

#### Reproduce
```tsx
export default function Page() {
  return <p>hello world</p>
}

export const config = {
  runtime: 'something-odd',
}

```
2022-09-07 13:12:13 -07:00
Tim Neutkens
71ad0dd0b0
Add prefetch to new router (#39866)
Follow-up to #37551
Implements prefetching for the new router.

There are multiple behaviors related to prefetching so I've split them out for each case. The list below each case is what's prefetched:

Reference:
- Checkmark checked → it's implemented.
- RSC Payload → Rendered server components.
- Router state → Patch for the router history state.
- Preloads for client component entry → This will be handled in a follow-up PR.
- No `loading.js` static case → Will be handled in a follow-up PR.

---

- `prefetch={true}` (default, same as current router, links in viewport are prefetched)
    - [x]  Static all the way down the component tree
        - [x] RSC payload
        - [x] Router state
        - [ ] preloads for the client component entry
    - [x]  Not static all the way down the component tree
        - [x]  With `loading.js`
            - [x] RSC payload up until the loading below the common layout
            - [x] router state
            - [ ] preloads for the client component entry
        - [x]  No `loading.js` (This case can be static files to make sure it’s fast)
            - [x] router state
            - [ ] preloads for the client component entry
- `prefetch={false}`
    - [x]  always do an optimistic navigation. We already have this implemented where it tries to figure out the router state based on the provided url. That result might be wrong but the router will automatically figure out that

---

In the first implementation there is a distinction between `hard` and `soft` navigation. With the addition of prefetching you no longer have to add a `soft` prop to `next/link` in order to leverage the `soft` case. 

A heuristic has been added that automatically prefers `soft` navigation except when navigating between mismatching dynamic parameters.

An example:
- `app/[userOrTeam]/dashboard/page.js` and `app/[userOrTeam]/dashboard/settings/page.js`
  - `/tim/dashboard` → `/tim/dashboard/settings` = Soft navigation 
  - `/tim/dashboard` → `/vercel/dashboard` = Hard navigation
  - `/vercel/dashboard` → `/vercel/dashboard/settings` = Soft navigation
  - `/vercel/dashboard/settings` -> `/tim/dashboard` = Hard navigation

---

While adding these new heuristics some of the tests started failing and I found some state bugs in `router.reload()` which have been fixed. An example being when you push to `/dashboard` while on `/` in the same transition it would navigate to `/`, it also wouldn't push a new history entry. Both of these cases are now fixed:

```
React.startTransition(() => {
  router.push('/dashboard')
  router.reload()
})
```

---

While debugging the various changes I ended up debugging and manually diffing the cache and router state quite often and was looking at a way to automate this. `useReducer` is quite similar to Redux so I was wondering if Redux Devtools could be used in order to debug the various actions as it has diffing built-in. It took a bit of time to figure out the connection mechanism but in the end I figured out how to connect `useReducer`, a new hook `useReducerWithReduxDevtools` has been added, we'll probably want to put this behind a compile-time flag when the new router is marked stable but until then it's useful to have it enabled by default (only when you have Redux Devtools installed ofcourse).

> ⚠️ Redux Devtools is only connected to take incoming actions / state. Time travel and other features are not supported because the state sent to the devtools is normalized to allow diffing the maps, you can't move backward based on that state so applying the state is not connected.

Example of the integration:

<img width="1912" alt="Screen Shot 2022-09-02 at 10 00 40" src="https://user-images.githubusercontent.com/6324199/188637303-ad8d6a81-15e5-4b65-875b-1c4f93df4e44.png">
2022-09-06 17:29:09 +00:00
Shu Ding
5f95b6b050
Improved route resolution in next-app-loader (#40109)
This PR implements the logic to make next-app-loader able to match multiple routes.

The app loader is refactored to construct the tree recursively instead of within a loop, as there could be multiple branches. Similarly, when entering a new layout level or branch, we resolve both the slot name (defaults to `"children"`) and the segment.

In order to make that work, the loader has to know all matched app paths. This is passed in as the `appPaths` loader option, which is gathered when creating the entrypoint.

## 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)

Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-09-06 10:03:21 -07:00
Jiachi Liu
03eb4b1d61
Bypass empty pages folder for layouts (#40132)
Check `pagesDir` to bypass empty pages folder when appDir is enabled

* Output empty loadable manifest for now if there's no `pagesDir`
* No custom aliases with all page extensions for `/_app`, `_document` if pagesDir is empty, only keep the built-in ones
* Check pagesDir in build/dev-server/eslint
* Type safe: change arguments of some APIs from optional to required, so that we won't mess up with default arguments
2022-09-03 00:13:47 +00:00
Visnu Pitiyanuvath
abcf991d11
Match data fetch and busting cache key when path URI encodes (#39568)
Fixes #38581
<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order 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 that you're making:
-->

## Bug

- [x] 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)

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-09-01 21:22:17 -07:00
Balázs Orbán
2de7b43b78
fix: detect ESLint config in package.json (#40158)
Fixes #40133

Fixes a small regression introduced in #39872. We should be able to detect if a non-empty `package.json#eslintConfig` property is present.

## 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)
2022-09-01 16:23:03 +00:00
Naoyuki Kanezawa
b522b94cce
feat(next): Support has match and locale option on middleware config (#39257)
## Feature

As the title, support `has` match, `local`  that works the same with the `rewrites` and `redirects` of next.config.js on middleware config. With this PR, you can write the config like the following:

```js
export const config = {
  matcher: [
    "/foo",
    { source: "/bar" },
    {
      source: "/baz",
      has: [
        {
          type: 'header',
          key: 'x-my-header',
          value: 'my-value',
        }
      ]
    },
    {
      source: "/en/asdf",
      locale: false,
     },
  ]
}
```

Also, fixes https://github.com/vercel/next.js/issues/39428

related https://github.com/vercel/edge-functions/issues/178, https://github.com/vercel/edge-functions/issues/179

- [x] 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`
- [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`

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-08-31 11:23:30 -05:00
Jiachi Liu
481950c34b
Error for ssg and ssr exports from client components in build time (#40106)
Follow up for #39953

Detect invalid gSSP/gSP exports in page or layout client components in build time instead of checking them in runtime, in this way we can:
* Error to user eariler with traced file path, help user find the incorrect usage easier
* Make the flight client loader simpler, headless, aligned with react

Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-08-31 13:13:47 +00:00