Skip to content

Commit

Permalink
docs: add more details about nextRuntime in webpack config and runtim…
Browse files Browse the repository at this point in the history
…e in next config (vercel#36862)

## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`
  • Loading branch information
huozhi authored May 12, 2022
1 parent 03d00e2 commit b717b6e
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 2 deletions.
2 changes: 2 additions & 0 deletions docs/advanced-features/react-18/switchable-runtime.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

By default, Next.js uses Node.js as the runtime for page rendering, including pre-rendering and server-side rendering.

> Note: `runtime` option only effects pages but not middleware
If you have [React 18](/docs/advanced-features/react-18/overview) installed, there is a new experimental feature that lets you switch the page runtime between Node.js and the [Edge Runtime](/docs/api-reference/edge-runtime). Changing the runtime affects [SSR streaming](/docs/advanced-features/react-18/streaming) and [Server Components](/docs/advanced-features/react-18/server-components) features, as well.

## Global Runtime Option
Expand Down
13 changes: 11 additions & 2 deletions docs/api-reference/next.config.js/custom-webpack-config.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ description: Extend the default webpack config added by Next.js.

# Custom Webpack Config

> Note: changes to webpack config are not covered by semver so proceed at your own risk
Before continuing to add custom webpack configuration to your application make sure Next.js doesn't already support your use-case:

- [CSS imports](/docs/basic-features/built-in-css-support.md#adding-a-global-stylesheet)
Expand All @@ -22,7 +24,10 @@ In order to extend our usage of `webpack`, you can define a function that extend

```js
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
webpack: (
config,
{ buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
) => {
// Important: return the modified config
return config
},
Expand All @@ -36,7 +41,7 @@ The second argument to the `webpack` function is an object with the following pr
- `buildId`: `String` - The build id, used as a unique identifier between builds
- `dev`: `Boolean` - Indicates if the compilation will be done in development
- `isServer`: `Boolean` - It's `true` for server-side compilation, and `false` for client-side compilation
- `nextRuntime`: `String` - The target runtime for server-side compilation; either `"edge"` or `"nodejs"`
- `nextRuntime`: `String | undefined` - The target runtime for server-side compilation; either `"edge"` or `"nodejs"`, it's `undefined` for client-side compilation.
- `defaultLoaders`: `Object` - Default loaders used internally by Next.js:
- `babel`: `Object` - Default `babel-loader` configuration

Expand Down Expand Up @@ -64,6 +69,10 @@ module.exports = {
}
```

#### `nextRuntime`

Notice that `isServer` is `true` when `nextRuntime` is `"edge"` or `"nodejs"`, nextRuntime "`edge`" is currently for middleware and server components in edge runtime only.

## Related

<div class="card">
Expand Down

0 comments on commit b717b6e

Please sign in to comment.