Commit graph

911 commits

Author SHA1 Message Date
JJ Kasper
e0bb25806b
Ensure RSC paths are normalized in minimal mode (#41348)
This ensures we probably remove RSC from the path/URL when in minimal mode. 

## Bug

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

Fixes: [slack thread](https://vercel.slack.com/archives/C043ANYDB24/p1665517894397169?thread_ts=1664913868.516049&cid=C043ANYDB24)
2022-10-12 07:17:17 +00:00
Jiachi Liu
2b99db07f7
Client component directive: use client (#41333)
Replace `'client'` with `'use client'` as client directive for client
components in RSC

x-ref: [slack
thread](https://vercel.slack.com/archives/C035J346QQL/p1665435520907559)

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-10-11 10:26:45 -07:00
Steven
9e1d04dd93
Add pretty error when image import is invalid format (#41267)
This PR improves the error message when an invalid image is imported. It
also ensures the page that imported the image is displayed.

### Before

<img width="1062" alt="image"
src="https://user-images.githubusercontent.com/229881/194674177-70f4ae73-64c9-497f-8e20-098f949a4219.png">


### After

<img width="1002" alt="image"
src="https://user-images.githubusercontent.com/229881/194716285-27dd3455-60a9-440f-a50e-eff8d49e764b.png">

Co-authored-by: Balázs Orbán <info@balazsorban.com>
2022-10-11 18:22:13 +02:00
JJ Kasper
35308c668e
Update middleware query hydration handling (#41243)
This updates to skip the data request done during query hydration when
middleware is present as it was mainly to gather query params from any
potential rewrites in middleware although this is usually not needed for
static pages and the context can be gathered in different ways on the
client.

x-ref: [slack
thread](https://vercel.slack.com/archives/C045FKE5P51/p1665082474010149)

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`
2022-10-10 12:58:18 -07:00
Hannes Bornö
be7b10dee5
Recover from font loader error in dev (#41251)
Check that the module has assets. This might not always be the case in
app dev if there was an error. Test added to make sure it recovers
correctly.

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

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-10-08 01:53:24 +02:00
Damien Simonin Feugas
bef709bc74
fix(middleware): 'instanceof Function' is dynamic code false-positive (#41249)
## 🐛 What's in there?

`foo instanceof Function` is wrongly considered as Dynamic code evaluation by our static analyzer.
This PR fixes it.

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

## 🧪 How to reproduce?

1. Create a simple repro in `examples` folder:
   ```js
   // examples/instance-of-function/pages/index.js
   export default function Home() {
     return <h1>home</h1>
   }
   
   // examples/instance-of-function/middleware.js
   import { NextResponse } from 'next/server'
   
   export default async function handler() {
     console.log('is arrow a function?', (() => {}) instanceof Function)
     return NextResponse.next()
   }
   ```
1. build with next `pnpm next build examples/instance-of-function`
   > the build fails
1. rebuild next to include PR's fix `pnpm build`
1. build with new next `pnpm next build examples/instance-of-function`
   > the build works

## 📔 Notes to reviewers

`hooks.expression.for(`${prefix}Function`).tap(NAME, handleExpression)` is actually legacy code from the original implementation. It's used when finding `Function` regardless of how it is used. We only want to find `new Function()` or `Function()`, which `hooks.calls` and `hooks.new` are covering.

`eval instanceof Function` is perfectly legit code on the edge, despite its uselessness :lol-think: 

Because we got multiple people asking "how do I relax this error when my code contains unreachable dynamic code evaluation", I've copy-pasted details about `config.unstable_allowDynamic` into the error page. Because users do not always click links :blob_shrug:
2022-10-07 14:14:11 +00:00
Jiachi Liu
a415f34adf
refactor dev overlay into hot reloader (#41231)
Move react-dev-overlay into hot reloader client components, and let it imported by app router. So then we don't need to have hot reloader and react tree as adjacent sibilings but the overlay with error boundary is wrapping the react tree


Co-authored-by: Tim Neutkens <6324199+timneutkens@users.noreply.github.com>
2022-10-07 13:25:22 +00:00
Hannes Bornö
b5590022b6
Font loaders next config shape (#41219)
Changes how font loaders are configured in next config, makes more sense since options can be optional. Also adds error for when font loaders are used from within node_modules.

## 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-10-07 09:15:57 +00:00
Hannes Bornö
dd3e005c93
App font file preload (#41158)
Finds the font files connected to font loader modules and adds them to
the font loader manifest. They're then collected and rendered similarly
to CSS links in app-render.
2022-10-06 12:24:42 -07:00
Jiachi Liu
5f2e44d451
Refactor app dir related flags (#41166)
simplify the `appDir` passing down
2022-10-04 22:16:44 +00:00
JJ Kasper
76235a7a56
Ensure entry tracing applies for app correctly (#41140)
This ensures we properly detect and trace `app` dir entries and adds a
regression test to ensure this is working as expected.

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`
2022-10-03 15:53:28 -07:00
JJ Kasper
3a6cd49c31
Fix edge function req.url handling with rewrite (#41139)
This ensures we correctly normalize the URL in edge functions and handle rewrites properly. 

## Bug

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

Fixes: [slack thread](https://vercel.slack.com/archives/C035J346QQL/p1664821822240719?thread_ts=1664813755.099319&cid=C035J346QQL)
2022-10-03 21:05:12 +00:00
Shu Ding
9baf651154
Improve error messages of server compilation (#41136)
We used to format RSC errors (which are from the SWC loader) before outputting them to the CLI. This PR moves that to a better place in `WellknownErrorPlugin`.

## 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-10-03 20:19:25 +00:00
Hannes Bornö
7bc28538bf
Font loader call json parsing fix (#41052)
Stringify into one json object instead. Previously parsing would break if a string included a semicolon.

## 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-30 19:24:10 +00:00
Hannes Bornö
fa96d870aa
Accept variable prop in google font loader (#41065)
Fixes local weight type which could break if you wrote "regular" instead of 400. Adds `variable` property to google font loader to let you define the name of the CSS variable.

## 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-30 18:53:50 +00:00
Shu Ding
67a5076b9b
Use deterministic module IDs for server (#41066)
Currently, we use the `isClient ? 'deterministic' : 'named'` condition
for module IDs. We did that because in the context of server compiler,
the server graph (RSC) can directly know the module ID of the referenced
module in the client graph (SSR). The client module's ID _is_ the module
reference module's resource path. However, that makes the server bundle
and the manifest file larger because these module IDs cannot be
minified.

In this PR we are changing it to `deterministic`, with another mapping
for server SSR.

## 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-30 11:32:32 -07:00
Janicklas Ralph
e0b7167075
Adding experimental size adjust based option (#41009)
Adding experimental `adjustFontFallbacksWithSizeAdjust` option
2022-09-30 00:35:50 +00:00
Shu Ding
b18489461b
Make sure polyfills are added for browsers without module support (#41029)
This PR makes sure that the same polyfills are added in app dir for
browsers that match `nomodule`. Main difference from the polyfills in
pages is that the script tags here cannot have `defer` as all other
scripts will be async by default, and polyfills must be executed before
all of them.

## 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-29 16:22:21 -07:00
Jiachi Liu
79a85b73ad
Alias all client, shared, pages dist assets for esm (#41034)
Alias all existing imports from `next/dist/..` to `next/dist/esm` for edge compiler. So that we don't need checking for `process.env.NEXT_RUNTIME === 'edge'` or passing down `nextRuntime` to decide wether the esm or cjs asset to require

This will also fix the issue that some layouts hook are been included twice into the bundle with cjs and esm bundle in edge runtime, now only esm chunk will be bundled in server.
2022-09-29 21:24:04 +00:00
Hannes Bornö
299f392d7b
Add support for fallback font and css variable for font/local (#40990)
Adds support for generating a fallback font by providing font override
metrics for the given local font. Also adds support for providing a CSS
variable name that then can be accessed through the `.variable` export,
it contains the hashed font family name.

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

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-09-28 12:19:52 -07:00
zoomdong
78cb07a4ca
chore: remove unsless @ts-ignore (#40992)
## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [x] 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

- [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/examples/adding-examples.md)
2022-09-28 17:53:08 +00:00
Jiachi Liu
fa19f172bc
Skip creating virtual app client entry for pages (#41000)
When there're only one edge route in `pages/` and one in `app/`, the virtual client entry is split into pages chunks which is not expected.
We should only create client virtual entries for `app/`, not `pages/`, now we skip the `pages/` entries for client entry now

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`
2022-09-28 17:03:21 +00:00
Shu Ding
f7069c0279
Fix unused CSS module imports are tracked on the server (#40996)
Reported by @hanneslund, when a CSS modules file gets imported in server
components, during `collectClientComponentsAndCSSForDependency` in our
client entry plugin it will always be collected no matter it is used or
not. Due to the restriction that we have to collect these imports to
create the client entry, it has to run in the `finishMake` compiler
phase and at that time, module optimization hasn't started yet.

To fix that issue, we run another pass in `afterOptimizeModules` just to
collect CSS imports for the server style manifest and we can filter out
unused modules there.

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

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-09-28 17:06:10 +02:00
Jimmy Lai
8ff22ca398
edge-ssr: bundle next/dist as ESM for better tree-shaking (#40251) (#40980)
Re-do of https://github.com/vercel/next.js/pull/40251

Edge SSR'd routes cold boot performances are proportional to the
executed code size.

In order to improve it, we are trying to optimize for the bundle size of
a packed Edge SSR route.

This PR adds ESM compilation targets for all Next.js dist packages and
use them to bundle Edge SSR'd route.

This allows us to leverage the better tree shaking/DCE for ESM modules
in webpack in order to decrease the overall bundle size.

This PR also enables minifying Edge SSR routes. Since we don't control
which minifier might be used later (if any), it's best if we provide an
already optimised bundle.

<img width="903" alt="image"

src="https://user-images.githubusercontent.com/11064311/190005211-b7cb2c58-a56a-44b0-8ee4-fd3f603e41bd.png">

This is a 10ms cold boot win per my benchmarking script, which I'll put
in a subsequent PR.

Not done yet:
- ~~swap exported requires in `next/link` (and others) etc to point them
to the esm modules version~~

<!--
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: -->

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

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

- [ ] 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>
Co-authored-by: Shu Ding <g@shud.in>

<!--
Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->

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

Co-authored-by: JJ Kasper <jj@jjsweb.site>
Co-authored-by: Shu Ding <g@shud.in>
2022-09-28 12:29:22 +02:00
JJ Kasper
ccc8d271df
Revert "edge-ssr: bundle next/dist as ESM for better tree-shaking (#40251) (#40967)
This reverts commit 11deaaa82b.

Temporarily reverts the above commit due to breaking middleware/edge
functions once deployed.

Fixes:
https://github.com/vercel/next.js/actions/runs/3133433920/jobs/5087331787

cc @shuding @feedthejim 

```sh
[GET] /blog/first
13:56:56:61
2022-09-27T20:56:56.671Z	61d43a6a-34a1-40c0-b71f-4ae5d1918431	ERROR	/var/task/node_modules/next/dist/esm/client/router.js:1
/* global window */ import React from 'react';
                    ^^^^^^
SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/var/task/node_modules/next/router.js:3:7)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
```
2022-09-27 15:05:40 -07:00
Jiachi Liu
b16fcccfc0
remove legacy transform code (#40966)
* Remove legacy `__next_rsc__` transform
* Fix `staticGenerationAsyncStorage` is null during rendering
2022-09-27 22:03:49 +00:00
Hannes Bornö
f53f5815f2
Font loader support in app (#40898)
Makes sure font loader CSS ends up correctly in the Flight Manifest and Flight Client Entries.

## 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-27 18:10:05 +00:00
Gal Schlezinger
b24800bebf
[edge] serialize custom config to middleware-manifest (#40881)
This PR serializes `regions` into `middleware-manifest.json`,
allowing to extend Edge Functions and Middleware for deployment
providers.

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

Co-authored-by: Seiya Nuta <nuta@seiya.me>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-09-27 10:30:15 -07:00
Tim Neutkens
833a67ff8c
Rename 404 -> not-found for new router (#40941)
As discussed with @sebmarkbage, the handling is more about showing a not found component than it is about a specific status code as these can come in late with streaming.



## 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-27 13:50:21 +00:00
Jimmy Lai
11deaaa82b
edge-ssr: bundle next/dist as ESM for better tree-shaking (#40251)
# Context

Edge SSR'd routes cold boot performances are proportional to the
executed code size.

In order to improve it, we are trying to optimize for the bundle size of
a packed Edge SSR route.

This PR adds ESM compilation targets for all Next.js dist packages and
use them to bundle Edge SSR'd route.

This allows us to leverage the better tree shaking/DCE for ESM modules
in webpack in order to decrease the overall bundle size.

This PR also enables minifying Edge SSR routes. Since we don't control
which minifier might be used later (if any), it's best if we provide an
already optimised bundle.

<img width="903" alt="image"
src="https://user-images.githubusercontent.com/11064311/190005211-b7cb2c58-a56a-44b0-8ee4-fd3f603e41bd.png">

This is a 10ms cold boot win per my benchmarking script, which I'll put
in a subsequent PR.

Not done yet:
- ~~swap exported requires in `next/link` (and others) etc to point them
to the esm modules version~~

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

- [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`
- [ ] 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>
Co-authored-by: Shu Ding <g@shud.in>
2022-09-26 16:56:16 -07:00
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
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
f6e37fd32e
Apply #40833 (#40872) 2022-09-25 11:45:00 +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
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
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