Commit graph

438 commits

Author SHA1 Message Date
Shu Ding
ed14af308d
Extract redirect utils into a separate file (#39433)
extract redirect utils
2022-08-09 14:34:25 -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
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
Damien Simonin Feugas
851e9aeba9
fix(edge-runtime): undefined global in edge runtime. (#38769)
## How to reproduce

1. create a next.js app with a middleware (or an edge route) that imports a node.js module:
   ```js
   // middleware.js
   import { NextResponse } from 'next/server'
   import { basename } from 'path'
   
   export default async function middleware() {
     basename()
     return NextResponse.next()
   }
   ```
2. deploy it to vercel with `vc`
3. go to the your function logs in Vercel Front (https://vercel.com/$user/$project/$deployment/functions)
4. in another tab, query your application
   > it results in a 500 page:
   <img width="517" alt="image" src="https://user-images.githubusercontent.com/186268/179557102-72568ca9-bcfd-49e2-9b9c-c51c3064f2d7.png">

    >  in the logs you should see:
   <img width="1220" alt="image" src="https://user-images.githubusercontent.com/186268/179557266-498f3290-b7df-46ac-8816-7bb396821245.png">

## Expected behavior

The route should fail indeed in a 500, because Edge runtime **does not support node.js modules**. However the error in logs should be completely different:
```shell
error - Error: The edge runtime does not support Node.js 'path' module.
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime
```

## Notes to reviewers

I introduced this issue in #38234.
Prior to the PR above, the app would not even build, as we were checking imported node.js module during the build with AST analysis.
Since #38234, the app would build and should fail at runtime, with an appropriate error.

The mistake was to declare `__import_unsupported` function in the sandbox's context, that is only used in `next dev` and `next start`, but not shipped to Vercel platform.

By loading it inside webpack loaders (both middleware and edge route), we ensure it will be defined on Vercel as well. 

The existing test suite (`pnpm testheadless --testPathPattern=runtime-module-error`) covers them.
2022-07-20 14:53:27 +00:00
Gal Schlezinger
20486c159d
[edge] allow importing blob assets (#38492)
* [edge] allow importing blob assets

* Fix test

* extract to a new file, to make it easier to read and review

* Use webpack asset discovery and transform with a loader

* fix tests

* don't prefix assets

* use emitFile

* rename assets to blobs to be more specific

* rename blobs to assets and use webpack's hashing algo

* Dedupe correctly

* Add a Node.js dep test

* Update packages/next/server/next-server.ts

Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>

* [code review] test remote URL fetches

* [code review] use `import type` for type-only imports

* Update packages/next/server/next-server.ts

Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>

* Apply suggestions from code review

Co-authored-by: JJ Kasper <jj@jjsweb.site>

Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-07-19 12:27:15 -05:00
Tim Neutkens
c820fca3f0
Remove obsolete code from loader (#38681)
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-07-15 14:21:06 +02:00
Tim Neutkens
db4f032d57
Ensure .client.tsx/.ts/.jsx Client Components can be imported (#38591) 2022-07-13 14:43:37 +02:00
Jiachi Liu
6b578f08d9
Mark dynamic as client component (#38574)
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-07-13 09:27:09 +02:00
Shu Ding
c2b40d0773
CSS modules support improvements for Server Components (#38536)
Improve CSS modules support in server components.

## 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: Jiachi Liu <4800338+huozhi@users.noreply.github.com>
2022-07-12 09:42:46 +00:00
Jiachi Liu
409d37615b
Enable css import in rsc server side (#38418)
* Enable css in server components

* inject server css into flight

* refactor and fix test

* fix lint

* resolve css from module deps

* fix dev & prod inconsistentce, collect client css

* simplify

* dedupe duplicated css chunks

* remove ssr link injection and css flight

Co-authored-by: Shu Ding <g@shud.in>
2022-07-11 17:23:21 +02:00
Tim Neutkens
2d9875983c
Handle on-demand-entries and error overlay for server components (#38480) 2022-07-10 19:18:48 +02:00
Tim Neutkens
f113141389
Implement new client-side router (#37551)
## Client-side router for `app` directory

This PR implements the new router that leverages React 18 concurrent features like Suspense and startTransition.
It also integrates with React Server Components and builds on top of it to allow server-centric routing that only renders the part of the page that has to change.

It's one of the pieces of the implementation of https://nextjs.org/blog/layouts-rfc.

## Details

I'm going to document the differences with the current router here (will be reworked for the upgrade guide)

### Client-side cache

In the current router we have an in-memory cache for getStaticProps data so that if you prefetch and then navigate to a route that has been prefetched it'll be near-instant. For getServerSideProps the behavior is different, any navigation to a page with getServerSideProps fetches the data again.

In the new model the cache is a fundamental piece, it's more granular than at the page level and is set up to ensure consistency across concurrent renders. It can also be invalidated at any level.

#### Push/Replace (also applies to next/link)

The new router still has a `router.push` / `router.replace` method.

There are a few differences in how it works though:

- It only takes `href` as an argument, historically you had to provide `href` (the page path) and `as` (the actual url path) to do dynamic routing. In later versions of Next.js this is no longer required and in the majority of cases `as` was no longer needed. In the new router there's no way to reason about `href` vs `as` because there is no notion of "pages" in the browser.
- Both methods now use `startTransition`, you can wrap these in your own `startTransition` to get `isPending`
- The push/replace support concurrent rendering. When a render is bailed by clicking a different link to navigate to a completely different page that still works and doesn't cause race conditions.
- Support for optimistic loading states when navigating

##### Hard/Soft push/replace

Because of the client-side cache being reworked this now allows us to cover two cases: hard push and soft push.

The main difference between the two is if the cache is reused while navigating. The default for `next/link` is a `hard` push which means that the part of the cache affected by the navigation will be invalidated, e.g. if you already navigated to `/dashboard` and you `router.push('/dashboard')` again it'll get the latest version. This is similar to the existing `getServerSideProps` handling.

In case of a soft push (API to be defined but for testing added `router.softPush('/')`) it'll reuse the existing cache and not invalidate parts that are already filled in. In practice this means it's more like the `getStaticProps` client-side navigation because it does not fetch on navigation except if a part of the page is missing.

#### Back/Forward navigation

Back and Forward navigation ([popstate](https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event)) are always handled as a soft navigation, meaning that the cache is reused, this ensures back/forward navigation is near-instant when it's in the client-side cache. This will also allow back/forward navigation to be a high priority update instead of a transition as it is based on user interaction. Note: in this PR it still uses `startTransition` as there's no way to handle the high priority update suspending which happens in case of missing data in the cache. We're working with the React team on a solution for this particular case.

### Layouts

Note: this section assumes you've read [The layouts RFC](https://nextjs.org/blog/layouts-rfc) and [React Server Components RFC](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html)

React Server Components rendering leverages the Flight streaming mechanism in React 18, this allows sending a serializable representation of the rendered React tree on the server to the browser, the client-side React can use this serialized representation to render components client-side without the JavaScript being sent to the browser. This is one of the building blocks of Server Components. This allows a bunch of interesting features but for now I'll keep it to how it affects layouts.

When you have a `app/dashboard/layout.js` and `app/dashboard/page.js` the page will render as children of the layout, when you add another page like `app/dashboard/integrations/page.js` that page falls under the dashboard layout as well. When client-side navigating the new router automatically figures out if the page you're navigating to can be a smaller render than the whole page, in this case `app/dashboard/page.js` and `app/dashboard/integrations/page.js` share the `app/dashboard/layout.js` so instead of rendering the whole page we render below the layout component, this means the layout itself does not get re-rendered, the layout's `getServerSideProps` would not be called, and the Flight response would only hold the result of `app/dashboard/integrations/page.js`, effectively giving you the smallest patch for the UI.

---

Note: the commits in this PR were mostly work in progress to ensure it wasn't lost along the way. The implementation was reworked a bunch of times to where it is now.

Co-authored-by: Jiachi Liu <4800338+huozhi@users.noreply.github.com>
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-07-06 21:16:47 +00:00
Damien Simonin Feugas
6e2c3821cf
feat: build edge functions with node.js modules and fail at runtime (#38234)
## What's in there?

The Edge runtime [does not support Node.js modules](https://edge-runtime.vercel.app/features/available-apis#unsupported-apis).
When building Next.js application, we currently fail the build when detecting node.js module imported from middleware.

This is an blocker for using code that is conditionally loading node.js modules (based on platform/env detection), as @cramforce reported.

This PR implements a new strategy where:
- we can build such middleware/Edge API route code **with a warning**
- we fail at run time, with graceful errors in dev (console & react-dev-overlay error)
- we fail at run time, with console errors in production

## How to test?

All cases are covered with integration tests.
To try them live, create a simple app with a page, a `middleware.js` file and a `pages/api/route.js`file.
Here are iconic examples:

### node.js modules
```js
// middleware.js
import { NextResponse } from 'next/server'
// static
import { basename } from 'path'

export default async function middleware() {
  // dynamic
  const { basename } = await import('path')
  basename()
  return NextResponse.next()
}

export const config = { matcher: '/' }
```
```js
// pags/api/route.js
// static
import { isAbsolute } from 'path'

export default async function handle() {
  // dynamic
  const { isAbsolute } = await import('path')
  return Response.json({ useNodeModule: isAbsolute('/test') })
}

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

Desired error (+ source code highlight in dev):

> The edge runtime does not support Node.js 'path' module
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime

Desired warning at build time:

> A Node.js module is loaded ('path' at line 2) which is not supported in the Edge Runtime.
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime

- [x]  in dev middleware, static, shows desired error on stderr
- [x]  in dev route, static, shows desired error on stderr
- [x]  in dev middleware, dynamic, shows desired error on stderr
- [x]  in dev route, dynamic, shows desired error on stderr
- [x]  in dev middleware, static, shows desired error on react error overlay
- [x]  in dev route, static, shows desired error on react error overlay
- [x]  in dev middleware, dynamic, shows desired error on react error overlay
- [x]  in dev route, dynamic, shows desired error on react error overlay
- [x]  builds middleware successfully, shows build warning, shows desired error on stderr on call
- [x]  builds route successfully, shows build warning, shows desired error on stderr on call

### 3rd party modules not found

```js
// middleware.js
import { NextResponse } from 'next/server'
// static
import Unknown from 'unknown'

export default async function middleware() {
  // dynamic
  const Unknown = await import('unknown')
  new Unknown()
  return NextResponse.next()
}
```
export const config = { matcher: '/' }
```
```js
// pags/api/route.js
// static
import Unknown from 'unknown'

export default async function handle() {
  // dynamic
  const Unknown = await import('unknown')
  return Response.json({ use3rdPartyModule: Unknown() })
}

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

Desired error (+ source code highlight in dev):

> Module not found: Can't resolve 'does-not-exist'
Learn More: https://nextjs.org/docs/messages/module-not-found

- [x]  in dev middleware, static, shows desired error on stderr
- [x]  in dev route, static, shows desired error on stderr
- [x]  in dev middleware, dynamic, shows desired error on stderr
- [x]  in dev route, dynamic, shows desired error on stderr
- [x]  in dev middleware, static, shows desired error on react error overlay
- [x]  in dev route, static, shows desired error on react error overlay
- [x]  in dev middleware, dynamic, shows desired error on react error overlay
- [x]  in dev route, dynamic, shows desired error on react error overlay
- [x]  fails to build middleware, with desired error on stderr
- [x]  fails to build route, with desired error on stderr

### unused node.js modules
```js
// middleware.js
import { NextResponse } from 'next/server'

export default async function middleware() {
  if (process.exit) {
    const { basename } = await import('path')
    basename()
  }
  return NextResponse.next()
}
```
```js
// pags/api/route.js
export default async function handle() {
  if (process.exit) {
    const { basename } = await import('path')
    basename()
  }
  return Response.json({ useNodeModule: false })
}

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

Desired warning at build time:

> A Node.js module is loaded ('path' at line 2) which is not supported in the Edge Runtime.
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime

- [x]  invoke middleware in dev with no error
- [x]  invoke route in dev with no error
- [x]  builds successfully, shows build warning, invoke middleware with no error
- [x]  builds successfully, shows build warning, invoke api-route with no error

## Notes to reviewers

The strategy to implement this feature is to leverages webpack [externals](https://webpack.js.org/configuration/externals/#externals) and run a global `__unsupported_module()` function when using a node.js module from edge function's code.
For the record, I tried using [webpack resolve.fallback](https://webpack.js.org/configuration/resolve/#resolvefallback) and [Webpack.IgnorePlugin](https://webpack.js.org/plugins/ignore-plugin/) but they do not allow throwing proper errors at runtime that would contain the loaded module name for reporting.

`__unsupported_module()` is defined in `EdgeRuntime`, and returns a proxy that's throw on use (whether it's property access, function call, new operator... synchronous & promise-based styles).

However there's an issue with error reporting: webpack does not includes the import lines in the generated sourcemaps, preventing from displaying useful errors.
I extended our middleware-plugin to supplement the sourcemaps (when analyzing edge function code, it saves which module is imported from which file, together with line/column/source)

The react-dev-overlay was adapted to look for this additional information when the caught error relates to modules, instead of looking at sourcemaps.

I removed the previous mechanism (built by @nkzawa ) which caught webpack errors at built time to change the displayed error message (files `next/build/index.js`, `next/build/utils.ts` and `wellknown-errors-plugin`)
2022-07-06 20:54:44 +00:00
JJ Kasper
9d22da476b
Ensure trailing slash is handled correctly with middleware (#38282)
* Ensure trailing slash is handled correctly with middleware

* update source modifying

* undo extra change
2022-07-04 09:31:07 -05:00
OJ Kwon
66b83f4506
fix(next/swc): set cache dir explicitly (#38175)
This PR amends behavior of swc's cache by setting it explicitly under `distDir` from next.js config.

## 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-06-29 21:59:52 +00:00
Shu Ding
0ecbcc6d54
Fix unnecessary flight render passes (#38133)
Currently `renderToReadableStream` will be called whenever the component is re-rendered, but the result should actually be cached (per request).

Thanks to @sebmarkbage for pointing out.

## 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-06-29 00:30:55 +00:00
Jiachi Liu
a5f8382ee3
Rename page runtime edge to experimental-edge (#38041)
* Rename page runtime edge to experimental-edge

* fix ut

* fix lint

* PageRuntime -> ServerRuntime

* rename constant
2022-06-26 20:02:24 -05:00
Jiachi Liu
948f736fac
chore: rename middleware ssr loader and flight manifest to edge related (#38042)
middleware-ssr-loader -> edge-ssr-loader
middleware-flight-manifest -> flight-manifest
2022-06-26 21:01:26 +00:00
Jiachi Liu
3881bbd3ec
Drop experimental.reactRoot in favor of auto detection (#37956)
* Drop experimental.reactRoot in favor of auto detection

* fix it hydraion metric
2022-06-23 18:33:16 +02:00
JJ Kasper
11b13074f1
Ensure special chars in middleware matcher is handled (#37933) 2022-06-23 09:13:40 -05:00
JJ Kasper
89bc9c66ea
Ensure resolvedUrl is correct with fallback rewrites (#37932)
* Ensure resolvedUrl is correct with fallback rewrites

* fix-lint

* normalize slash
2022-06-22 17:02:46 -05:00
Jiachi Liu
2608e7d865
Migrate middleware ssr to edge functions (#37708)
x-ref: #31506

This PR migrates existing SSR on edge from middleware to edge functions implmentation. So that we can get rid of limitation of middleware and resolve the conflicts between middleware and edge SSR routes.

* Adding edge functions matching route in middleware catch all route,keep the order as `middleware catch all` -> redirects/rewrites -> `edge catch all` -> others
* Dropping middleware related code for edge SSR: removing client info and preflight request handling
2022-06-21 19:04:48 +00:00
Jiachi Liu
40b0dae558
chore: bump react dev dep to 18.2 (#37697)
* chore: bump react dev dep to 18.2

* fix test and exclude inc cache path for edge

* update compiled

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-06-15 10:14:43 -05:00
JJ Kasper
668466bc07
Fix rewrite/dynamic interpolation E2E cases (#37669) 2022-06-13 15:46:19 -05:00
Gal Schlezinger
b62bb97b6f
Re-introduce Edge API Endpoints (#37481)
* Re-introduce Edge API Endpoints

This reverts commit 210fa39961, and
re-introduces Edge API endpoints as a possible runtime selection in API
endpoints.

This is done by exporting a `config` object:

```ts
export config = { runtime: 'edge' }
```

Note: `'edge'` will probably change into `'experimental-edge'` to show
that this is experimental and the API might change in the future.

* Support `experimental-edge`, but allow `edge` too

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-06-13 11:17:44 -07:00
JJ Kasper
6f698405dd
Update matched path params priority (#37646)
This ensures we use the correct dynamic route params favoring params from the URL/matched-path over route-matches. This also ensures we properly cache `_next/data` requests client side when the page is not a `getServerSideProps` page. 

x-ref: https://github.com/vercel/next.js/pull/37574

## Bug

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

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
2022-06-13 13:34:08 +00:00
Damien Simonin Feugas
ae44779bcb
chore: narrows regexp to enable middleware source maps (#37582)
* chore: narrows regexp to enable middleware source maps

* update test

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-06-10 20:22:03 -05:00
Javi Velasco
7584b02b34
Remove Middleware Preflight (#37490)
* Refactor data fetching to support getting headers

* Relax `getNextPathnameInfo` type

* Add test for middleware internal redirects

* Export `ParsedRelativeUrl` type

* Refactor `getMiddlewareEffects`

* Move rewrite i18n test to middleware rewrite tests

* Fix bug parsing pathname info

* Normalize data requests to page requests for middleware

* Ensure there is a header `x-nextjs-matched-path` for middleware rewrites on data requests

* Extract `getDataHref` to a function

* Stop using `getDataHref` for flight

* Always set the query in `dataHref` independently of if it is SSG

* Add test for recursive rewrites

* Refactor dynamicPath validation to `matchHrefAndAsPath`

* Add `dataHref` to `FetchDataOutput`

* Extract `matchesMiddleware` function

* Add `hasMiddleware` option to `fetchNextData`

* Move preflight test

* Remove preflight test

* Add middleware prefetch tests

* Remove preflight

* Attempt to reduce bundle size

Include `withMiddlewareEffects` and `matchHrefAndAsPath` into `router`

Bring `getDataHref` back to `page-loader`

Bring `resolveDynamicRoute` back to `router`

* Reduce arg duplication for `withMiddlewareEffects`

* Remove some async/await and spreads to reduce bundle size

* Upgrade `edge-runtime` & clone `Request` on redirects to mutate headers

* Add some rewrite tests

Co-authored-by: Kiko Beats <josefrancisco.verdu@gmail.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-06-08 10:41:28 -05:00
Damien Simonin Feugas
977ff52472
fix(#37106): middleware can not be loaded from src folder (#37428)
## Bug
fixes #37106

Please note that, as for `pages/` the `src/middleware` file is ignored when `/middleware` is present.

## How to test

1. Rebuild next.js `pnpm build`
2. Run dedicated tests: `pnpm testheadless --testPathPattern middleware-src/`
2022-06-08 14:10:05 +00:00
Gal Schlezinger
401a9a4479
Allow Middleware to set its matcher (#37177)
This PR will allow Middleware to set its matcher through `export const config = { matching: ... }`

## Related

* This PR is rebased off #37121 

## 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 `yarn lint`
2022-06-03 16:35:44 +00:00
Tim Neutkens
a840dbf84e
Add Suspense boundary to demo (#37393) 2022-06-02 12:02:05 +02:00
Tim Neutkens
647c93e4d0
Handle link with back/forward navigation (#37332) 2022-06-01 13:52:57 +02:00
Gal Schlezinger
210fa39961
Revert Edge API endpoints (#37350)
Reverts vercel/next.js#37344
2022-05-31 20:11:12 +00:00
Gal Schlezinger
db20aa65f5
Revert "Revert "support runtime: edge in api endpoints"" (#37344)
Reverts vercel/next.js#37337
2022-05-31 17:12:02 +00:00
Shu Ding
ed0b580fc4
Revert "support runtime: edge in api endpoints" (#37337)
Revert "support `runtime: edge` in api endpoints (#36947)"

This reverts commit 3d1a287207.
2022-05-31 15:24:40 +02:00
Gal Schlezinger
3d1a287207
support runtime: edge in api endpoints (#36947)
## Feature

This PR introduces the ability to provide `runtime: "edge"` in API endpoints, the same as the experimental RSC runtime configurations.

- [ ] 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 `yarn lint`
2022-05-31 13:23:11 +00:00
Tim Neutkens
31500ba2e0
Refactor client component out of client runtime (#37238)
Co-authored-by: Shu Ding <g@shud.in>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-05-29 20:53:12 +02:00
JJ Kasper
b68d9eafa4
Rename app paths folder (#37146) 2022-05-25 11:46:26 +02:00
Jiachi Liu
fc06fe6562
Remove process.cwd usage from path polyfill (#37130)
Avoid process usage detection warning for edge runtime bundle
2022-05-23 17:56:00 +00:00
Jiachi Liu
d25e246b50
Keep custom app as non server component (#37044)
We added custom _app as server component support in #33149, but we found it's pretty confusing on usage like support it both server component pages and regular pages at the same time for having similar layout purpose.
When using the _app.server and _app at the same time, applying them into proper places become more confusing.
In that case, we decide to make _app.js can't be a server component, and you can still keep all the existing thing there. And also you don't need to think of the corresponding APIs of custom _app in RSC

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Docs updated
2022-05-20 18:07:20 +00:00
Damien Simonin Feugas
bf089562c7
feat(middleware)!: forbids middleware response body (#36835)
_Hello Next.js team! First PR here, I hope I've followed the right practices._

### What's in there?

It has been decided to only support the following uses cases in Next.js' middleware:
- rewrite the URL (`x-middleware-rewrite` response header)
- redirect to another URL (`Location` response header)
- pass on to the next piece in the request pipeline (`x-middleware-next` response header)

1. during development, a warning on console tells developers when they are returning a response (either with `Response` or `NextResponse`).
2. at build time, this warning becomes an error.
3. at run time, returning a response body will trigger a 500 HTTP error with a JSON payload containing the detailed error.

All returned/thrown errors contain a link to the documentation.

This is a breaking feature compared to the _beta_ middleware implementation, and also removes `NextResponse.json()` which makes no sense any more.

### How to try it?
- runtime behavior: `HEADLESS=true yarn jest test/integration/middleware/core`
- build behavior : `yarn jest test/integration/middleware/build-errors`
- development behavior: `HEADLESS=true yarn jest test/development/middleware-warnings`

### Notes to reviewers

The limitation happens in next's web adapter. ~The initial implementation was to check `response.body` existence, but it turns out [`Response.redirect()`](https://github.com/vercel/next.js/blob/canary/packages/next/server/web/spec-compliant/response.ts#L42-L53) may set the response body (https://github.com/vercel/next.js/pull/31886). Hence why the proposed implementation specifically looks at response headers.~
`Response.redirect()` and `NextResponse.redirect()` do not need to include the final location in their body: it is handled by next server https://github.com/vercel/next.js/blob/canary/packages/next/server/next-server.ts#L1142

Because this is a breaking change, I had to adjust several tests cases, previously returning JSON/stream/text bodies. When relevant, these middlewares are returning data using response headers.

About DevEx: relying on AST analysis to detect forbidden use cases is not as good as running the code.
Such cases are easy to detect:
```js
new Response('a text value')
new Response(JSON.stringify({ /* whatever */ })
```
But these are false-positive cases:
```js
function returnNull() { return null }
new Response(returnNull())

function doesNothing() {}
new Response(doesNothing())
```
However, I see no good reasons to let users ship middleware such as the one above, hence why the build will fail, even if _technically speaking_, they are not setting the response body. 



## 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
- [x] 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 `yarn lint`
2022-05-19 22:02:20 +00:00
Javi Velasco
f354f46b3f
Deprecate nested Middleware in favor of root middleware (#36772)
This PR deprecates declaring a middleware under `pages` in favour of the project root naming it after `middleware` instead of `_middleware`. This is in the context of having a simpler execution model for middleware and also ships some refactor work. There is a ton of a code to be simplified after this deprecation but I think it is best to do it progressively.

With this PR, when in development, we will **fail** whenever we find a nested middleware but we do **not** include it in the compiler so if the project is using it, it will no longer work. For production we will **fail** too so it will not be possible to build and deploy a deprecated middleware. The error points to a page that should also be reviewed as part of **documentation**.

Aside from the deprecation, this migrates all middleware tests to work with a single middleware. It also splits tests into multiple folders to make them easier to isolate and work with. Finally it ships some small code refactor and simplifications.
2022-05-19 15:46:21 +00:00
Tim Neutkens
fe3d6b7aed
Add support for browserslist and legacyBrowsers experimental option (#36584)
Implements the first part of #33227

- Applies browserslist to JS transforms when `experimental.browsersListForSwc` is enabled. 
- You don't have to use browserslist, there's also `legacyBrowsers: false` which will be the new default in Next.js 13. See #33227 for which browsers and why. `legacyBrowsers` requires `browsersListForSwc: true` to function until it is the default. 

```js
module.exports = {
  experimental: {
    legacyBrowsers: false,
    browsersListForSwc: true,
  }
}
```

I only implemented the JS part of the RFC, the CSS part should be handled in a follow-up PR.



## 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.
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [x] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`


Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-05-17 15:09:34 +00:00
Tim Neutkens
b11d4411e0
Add additional layer for server components case (#36921)
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-05-16 11:46:45 +02:00
Shu Ding
b122178ead
Decouple entries for server components and client components (#36860)
* (wip)

* dev mode

* build mode

* update comment

* fix tests

* fix _N_SSP and _N_SSG exports

* fix missing variables

* fix api route bug

* fix compiler stats

* fix lint errors

* add extra cache group for edge server

* fix test

* fix test

* fix views route meta and entries

* fix linter error

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-05-13 19:48:53 +02:00
Shu Ding
fdc071c5fd
Move FlightManifestPlugin to server compilers (#36810)
* move FlightManifestPlugin to server compilers

* revert loader condition

* fix module id

* fix test and refactor

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-05-10 21:20:13 +02:00
JJ Kasper
482fe25cbb
Update root component handling (#36781) 2022-05-10 18:57:14 +02:00
Tim Neutkens
51d962d60f
Leverage pageExtensions for resolving in loader (#36747)
## 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 `yarn lint`
2022-05-07 13:37:14 +00:00
Tim Neutkens
6f90d19609
Add route loader (#36712)
* Add route loader

* Update to leverage new view-loader

* fix lint

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-05-05 15:42:22 -05:00