Commit graph

874 commits

Author SHA1 Message Date
Jiachi Liu
cbfab2a3b7
Strip internal pages for pagesDir in app edge ssr (#40776)
For app edge SSR, we don't need any internal pages for it since it's
handled by app-renderer. This results around reducing 20KB from app edge
SSR

# Changes
* Strip those internal pages modules when it's in app edge SSR
* Minimize edge SSR chunk to see the tree-shake result
* Add bundle analyzer with switcher in stats-app for testing. Using
`TEST_ANAYLYSE=1` to build stats-app for testing
2022-09-21 17:18:18 -07: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
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
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
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
JJ Kasper
76ae2870a6
Fix edge wasm handling during deploy (#40625)
This fixes the WASM handling for edge during deploy as the sandbox
context won't be present so we should keep this restricted to dev. No
additional tests were added as our existing tests caught this.

x-ref: https://github.com/vercel/next.js/pull/39539
Fixes:
https://github.com/vercel/next.js/actions/runs/3049403049/jobs/4915784368

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`
2022-09-16 15:56:43 -07: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
Janicklas Ralph
7fba48ef70
Adding experimentalAdjustFallback feature to font optimization (#40185)
<!--


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

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

- [x] Implements https://github.com/vercel/next.js/discussions/40112
- [x] Integration tests added

Adds a new option to the current font optimization to enable
experimental font size adjust

The new `optimizeFonts` config will be 
```
optimizeFonts: {
    inlineFonts: true,
    experimentalAdjustFallbacks: false,
  },
```

To enable the feature, set `experimentalAdjustFallbacks: true`

`optimizeFonts: false` will disable the entire feature (including
inlining google font definition)

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-09-16 14:13:21 -07:00
Alex
1ea65cf931
fix(image): handle image imports with high aspect ratio (#40563)
## Bug

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


Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
2022-09-16 20:17:19 +00:00
Jiachi Liu
69d0e6082c
Passing down original sourcemap for flight client loader (#40508)
Consume the original sourcemap in flight client loader if there's any, to avoid source map is generated based on the module proxy which make debugging hard

Testing with adding `debugger` in layout router, screenshot:

<img width="400" alt="image" src="https://user-images.githubusercontent.com/4800338/189866388-adb1aba5-496b-4b8d-8098-ec04d6f1914a.png">
2022-09-13 21:42:09 +00:00
JJ Kasper
8bf6a87303
Rename allowDynamic to unstable_allowDynamic (#40496)
Follow-up to https://github.com/vercel/next.js/pull/39539 as discussed
this renames to `unstable_` prefix initially while we test this out
further.

## 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 15:32:18 -07:00
Damien Simonin Feugas
97ac344468
feat(edge): allows configuring Dynamic code execution guard (#39539)
### 📖  What's in there?

Dynamic code evaluation (`eval()`, `new Function()`, ...) is not
supported on the edge runtime, hence why we fail the build when
detecting such statement in the middleware or `experimental-edge` routes
at build time.

However, there could be false positives, which static analysis and
tree-shaking can not exclude:
- `qs` through these dependencies (get-intrinsic:
[source](https://github.com/ljharb/get-intrinsic/blob/main/index.js#L12))
- `function-bind`
([source](https://github.com/Raynos/function-bind/blob/master/implementation.js#L42))
- `has`
([source](https://github.com/tarruda/has/blob/master/src/index.js#L5))

This PR leverages the existing `config` export to let user allow some of
their files.
it’s meant for allowing users to import 3rd party modules who embed
dynamic code evaluation, but do not use it (because or code paths), and
can't be tree-shaked.

By default, it’s keeping the existing behavior: warn in dev, fails to
build.
If users allow dynamic code, and that code is reached at runtime, their
app stills breaks.

### 🧪 How to test?

- (existing) integration tests for disallowing dynamic code evaluation:
`pnpm testheadless --testPathPattern=runtime-dynamic`
- (new) integration tests for allowing dynamic code evaluation: `pnpm
testheadless --testPathPattern=runtime-configurable`
- (amended) production tests for validating the new configuration keys:
`pnpm testheadless --testPathPattern=config-validations`

To try it live, you could have an application such as:
```js
// lib/index.js
/* eslint-disable no-eval */
export function hasUnusedDynamic() {
  if ((() => false)()) {
    eval('100')
  }
}

export function hasDynamic() {
  eval('100')
}

// pages/index.jsx
export default function Page({ edgeRoute }) {
  return <p>{edgeRoute}</p>
}

export const getServerSideProps = async (req) => {
  const res = await fetch(`http://localhost:3000/api/route`)
  const data = await res.json()
  return { props: { edgeRoute: data.ok ? `Hi from the edge route` : '' } }
}

// pages/api/route.js
import { hasDynamic } from '../../lib'

export default async function handle() {
  hasDynamic()
  return Response.json({ ok: true })
}

export const config = { 
  runtime: 'experimental-edge' ,
  allowDynamic: '/lib/**'
}
```

Playing with `config.allowDynamic`, you should be able to:
- build the app even if it uses `eval()` (it will obviously fail at
runtime)
- build the app that _imports but does not use_ `eval()`
- run the app in dev, even if it uses `eval()` with no warning

### 🆙 Notes to reviewers

Before adding documentation and telemetry, I'd like to collect comments
on a couple of points:
- the overall design for this feature: is a list of globs useful and
easy enough?
- should the globs be relative to the application root (current
implementation) to to the edge route/middleware file?
- (especially to @sokra) is the implementation idiomatic enough? I've
leverage loaders to read the _entry point_ configuration once, then the
ModuleGraph to get it back during the parsing phase. I couldn't re-use
the existing `getExtractMetadata()` facility since it's happening late
after the parsing.
- there's a glitch with `import { ServerRuntime } from '../../types'` in
`get-page-static-info.ts`
([here](https://github.com/vercel/next.js/pull/39539/files#diff-cb7ac6392c3dd707c5edab159c3144ec114eafea92dad5d98f4eedfc612174d2L12)).
I had to use `next/types` because it was failing during lint. Any clue
why?

### ☑️ Checklist

- [ ] 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
- [x] Documentation added
- [x] Telemetry added. In case of a feature if it's used or not.
- [x] Errors have helpful link attached, see `contributing.md`
2022-09-12 15:01:00 -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
Shu Ding
a24872b4ab
Fix flight manifest to include all chunks (#40365)
When a client module is imported by both a module from an `app` entry and a module from `pages` entry, it is possible that it is included in the `pages` chunk eventually. The current check makes the manifest incomplete in that case.

## 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-08 19:09:33 +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
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
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
JJ Kasper
3bf8b2b4fe
Update to detect GSSP with edge runtime during build (#40076)
This updates to handle detecting `getStaticProps`/`getServerSideProps` correctly during build when `experimental-edge` is being used. This also fixes not parsing dynamic route params correctly with the edge runtime and sets up the handling needed for the static generation for app opened in the below mentioned PR.

## Bug

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

Fixes: [slack thread](https://vercel.slack.com/archives/C0289CGVAR2/p1661554455121189)
x-ref: https://github.com/vercel/next.js/pull/39884
2022-08-30 18:18:02 +00:00
Shu Ding
5b3e20a11b
Fix filePath being wrongly stringified (#40070)
Currently when the resolved path is `undefined` it generates `filePath: 'undefined'` in the tree object, but should be `filePath: undefined` instead.

## 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-08-30 04:34:10 +00:00
Steven
c3ceeb03ab
Update next/future/image to use svg blur placeholder during next dev (#39992)
This PR updates the `next/future/image` component so that CSS `filter` is never needed. Previously, we used SVG to blur for prod and CSS to blur for dev, but now we use SVG for both.

This required a shared function `getImageBlurSvg()` used between both client and server because `next dev` doesn't create Data URIs and instead defers blur generation until request time. So we also need to defer svg generation to request time (on the server) during next dev.

This is the first step to removing `<noscript>` completely (see #39736).
2022-08-29 17:19:39 -05:00
Jiachi Liu
b4f74ee1c1
Handle async module for client components (#39953)
### Problem

esm modules imports from client components will be compiled to `m = import('module-name')` when webpack bundles them for server components flight rendering. In this case, they will all become async modules since dyanmic imports will return a promise which react flight cannot handle it then results into module resolving error on server flight rendering.

### Solution

* React flight renderer supports handling async modules in https://github.com/facebook/react/pull/25138
* On next.js side leverage the module proxy change for each client reference, to make sure it always resolve the correct client module

The idea is wrapping each module with a module proxy, and if the module is async and accessed as thenable, it will return a new module reference with `async` label to tell react to handle it as async modules:

exported client reference `*` --> not async module (non thenable) --> original module reference `''`
exported client reference `*` --> it's async module (thenable) --> wrapped module reference `'*'` with `async` label

### Note

Since we need to check if user having incorrect gSSP/gSP specifying in layout client componet, so we still need to parse it and assign those info to the proxy (Does client module containing `ssr`, `ssg` exports). Otherwise the proxy will return the cached module reference
2022-08-29 14:47:06 +00:00
Shu Ding
f12788dee8
HMR for client CSS imports (#39916)
Follow-up to #39758, this PR makes sure that CSS imports (both global and CSS modules) from client components are not handled by mini-css-extract's HMR logic. Instead, we trigger a server component update and let the client to refetch the RSC payload.

However, we are still leveraging the mini-css-extract plugin to emit CSS assets. So in this PR we add a new pitch loader to calculate the original file hash, but replace the final content to eliminate HMR logic but only keep the hash (so hot reloader can keep tracking that).

## 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-08-25 16:40:16 +00:00
JJ Kasper
49b4dae570
Handle edge runtime for app (#39910)
Continuation of https://github.com/vercel/next.js/pull/38817 this adds handling to allow leveraging the `experimental-edge` runtime for `app`. 

## Bug

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

Co-authored-by: Jiachi Liu <inbox@huozhi.im>
2022-08-24 14:49:47 -05:00
Steven
73bffd6fd7
Fix next/future/image blur-up placeholder (#39785)
This PR is a follow up to PR #39190 so that we can dynamically set the `feComponentTransfer` when we know the image doesn't have transparency (at this time its just jpeg).

We also set the stdDeviation to 1 and the viewbox to the placeholder's width/height to avoid any rounding issues.

Finally, we also fix the conversion from `objectPosition` to `backgroundPosition` because they have different default values according to the spec.
2022-08-23 18:56:52 -05:00
JJ Kasper
ec25b4742b
Add handling for auto installing TypeScript deps and HMRing tsconfig (#39838)
This adds handling for auto-detecting TypeScript being added to a project and installing the necessary dependencies instead of printing the command and requiring the user run the command. We have been testing the auto install handling for a while now with the `next lint` command and it has worked out pretty well. 

This also adds HMR handling for `jsconfig.json`/`tsconfig.json` in development so if the `baseURL` or `paths` configs are modified it doesn't require a dev server restart for the updates to be picked up. 

This also corrects our required dependencies detection as previously an incorrect `paths: []` value was being passed to `require.resolve` causing it to fail in specific situations.

Closes: https://github.com/vercel/next.js/issues/36201

### `next build` before

https://user-images.githubusercontent.com/22380829/186039578-75f8c128-a13d-4e07-b5da-13bf186ee011.mp4

### `next build` after


https://user-images.githubusercontent.com/22380829/186039662-57af22a4-da5c-4ede-94ea-96541a032cca.mp4

### `next dev` automatic setup and HMR handling

https://user-images.githubusercontent.com/22380829/186039678-d78469ef-d00b-4ee6-8163-a4706394a7b4.mp4


## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Errors have helpful link attached, see `contributing.md`
2022-08-23 13:16:47 -05:00
Shu Ding
cb1038cb6d
Refactor client CSS imports (#39758)
Removed the hack of client-side CSS injection via `chunk`. Instead collect them with the manifest plugin and SSR them as link tags.

Next step is to adjust HMR to not relying on mini-css-extract plugin and webpack.
2022-08-22 18:09:56 -05:00
JJ Kasper
f7eed07945
Use realpath when emitting traced package.json (#39683)
This ensures we emit the real path when emitting traced package.json files so that we don't conflict with symlinked package paths.
x-ref: slack thread
Bug

 Related issues linked using fixes #number
 Integration tests added
 Errors have helpful link attached, see contributing.md
2022-08-18 17:07:34 +01:00
Tobias Koppers
9c41634104
fix next-app-loader on windows (#39657)
## Bug

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


Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Co-authored-by: Jiachi Liu <4800338+huozhi@users.noreply.github.com>
2022-08-17 17:14:03 +00:00
Shu Ding
c79b67cced
Improved server CSS handling (#39664)
Upgrade experimental React, and render link tags directly in the tree during development. The client bundle won't import CSS anymore, and server CSS imports will be transpiled into no-op strings just for HMR to use.

## Follow Ups
- [ ] Flash of unstyled elements when reloading styles
- [ ] Collect client style imports
- [ ] Console warning for duplicated resources
- [ ] Tests

## 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-08-17 10:56:52 +00:00
Tim Neutkens
d4a98a15f7
Add todo for dependsOn (#39677) 2022-08-17 10:39:37 +01:00
Tim Neutkens
57b6eff904
Add separate entry per layout/page. (#39611)
Builds on top of #39162 which adds support for creating any kind of bundle path without breaking the compilation.
Ensures every layout gets a separate client-side bundle if it has client components being used.

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

Co-authored-by: Jiachi Liu <inbox@huozhi.im>
Co-authored-by: Shu Ding <g@shud.in>
2022-08-16 19:00:23 +02:00
JJ Kasper
6fd2a7fa31
Remove webpack4 types (#39631)
These types are no longer needed as we are only leveraging webpack 5 so this finishes migrating our types away from webpack 4's types.
2022-08-16 09:55:37 +00:00
Tim Neutkens
4cd8b23032
Enable @typescript-eslint/no-use-before-define for functions (#39602)
Follow-up to the earlier enabling of classes/variables etc.

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

Co-authored-by: Steven <steven@ceriously.com>
2022-08-15 10:29:51 -04:00
Jiachi Liu
3c9ad33c69
Remove precopied styled-jsx (#39520)
follow-up for #39518

* revert `styled-jsx/style` import path to `next/dist/shared/styled-jsx`
* Since `styled-jsx` cannot be resolved through `node_modules/next/node_modules` by external resolving, we forcedly resolve styled-jsx as cjs external in webpack


Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-08-12 17:08:38 +00:00
Tim Neutkens
b5aa571c71
Refactor client entry plugin to separate methods. (#39162)
WIP.


## 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: Shu Ding <3676859+shuding@users.noreply.github.com>
2022-08-12 13:01:19 +00:00
Tim Neutkens
db9040b0b8
Enable @typescript-eslint/no-use-before-define variables,enums,typedefs for core files (#39511)
* Enable @typescript-eslint/no-use-before-define typedefs and enums

* Enable variables

* Move in client/index

* Revert "Move in client/index"

This reverts commit 592d70cf3d9cd39e741905faf9229f664c9b4ebd.

* Move wrapApp

* Revert "Revert "Move in client/index""

This reverts commit 14b6105eb45ab87b3b4a1d6f2907d8b9e9657888.

* Fix classes cases
2022-08-11 16:32:52 -05:00
Wyatt Johnson
f5cab2f515
App Build Stats (#38884)
## 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>
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-08-10 19:31:01 +00:00
Shu Ding
ed14af308d
Extract redirect utils into a separate file (#39433)
extract redirect utils
2022-08-09 14:34:25 -05:00
Jiachi Liu
71f5f258ab
Setup require hook in next-server for styled-jsx resolving (#39305)
* Use require hook and alias to resolve styled-jsx

* re-export styled-jsx types from compiled

* fix lint

* add test for styled-jsx css

* setup require hook in server

* compile import path to styled-jsx/style

* revert require hook

* add test for server styled-jsx resolving

* update test

* pre copy styled-jsx assets

* fix styled-jsx dts

* add npmrc for styled-jsx e2e test

* load require hook directly

* rm legacy test

* fix lint

* fix pnpm install error

* split require hook

* only alias styled-jsx

* make styled-jsx resolving statically analyzable

* update test

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-08-08 20:27:42 -05:00
Balázs Orbán
b292bdc293
fix(ts): Middleware type tweaks (#38625)
* fix internal type

* allow `void` to be returned from Middleware

* mark deprecated APIs in JSDoc

* fix typo

* add missing error page

* remove unused import
2022-08-08 09:40:44 -05:00
Damien Simonin Feugas
147a24e320
fix: buffer is not usable on edge runtime (#39227)
* fix: buffer is not usable on edge runtime

* chore: improves implementation to allow any fallbacks
2022-08-04 08:47:28 -05:00
Tim Neutkens
c567d7d2da
Refactor Flight plugins to use types. (#39136)
Cleans up both Flight plugins and leverages type inference more.
- Rename plugin
- Update name
- Remove note on webpack5
- Add types for Flight manifest
- Use webpack5 type and tapPromise
- Remove any



## 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-07-28 22:35:52 +00:00
Keen Yee Liau
85b00b2cca
Collect telemetry for next/future/image (#39046)
* test: cleanup telemetry integration test

Instead of constantly parsing the console output, parse the output
once, convert the entries in JavaScript objects, then compare them
logically rather than textually.

* Collect telemetry for next/future/image

Track adoption of next/future/image and add relevant test.
2022-07-28 15:03:24 -05:00
Shu Ding
0831dd59c9
chore: Clean up imports and unused code (#39044)
A small refactor PR to convert some imports to type imports, as well as removing a couple of unused exports.

The Edge SSR loader is also missing the global process injection (`enhanceGlobals`).

## 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-07-26 21:41:59 +00:00
Tim Neutkens
07c3464aff
Refactor router reducer (#38983) 2022-07-25 12:12:35 +02:00