rsnext/packages/next/webpack.config.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

305 lines
11 KiB
JavaScript
Raw Normal View History

const webpack = require('webpack')
const path = require('path')
const TerserPlugin = require('terser-webpack-plugin')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
const pagesExternals = [
'react',
'react/package.json',
'react/jsx-runtime',
'react/jsx-dev-runtime',
'react-dom',
'react-dom/package.json',
'react-dom/client',
'react-dom/server',
'react-dom/server.browser',
'react-dom/server.edge',
'react-server-dom-webpack/client',
'react-server-dom-webpack/client.edge',
'react-server-dom-webpack/server.edge',
'react-server-dom-webpack/server.node',
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
]
const appExternals = [
// Externalize the react-dom/server legacy implementation outside of the runtime.
// If users are using them and imported from 'react-dom/server' they will get the external asset bundled.
'next/dist/compiled/react-dom/cjs/react-dom-server-legacy.browser.development.js',
'next/dist/compiled/react-dom/cjs/react-dom-server-legacy.browser.production.min.js',
'next/dist/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.development.js',
'next/dist/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.production.min.js',
]
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
function makeAppAliases(reactChannel = '') {
perf: remove react dom legacy from app router (#56082) This PR includes changes to Next.js bundling in order to aliases references to the `react-dom/server` legacy build to a no-op in order to save KBs. We don't use any of the legacy methods so it's best to just shave it off. This should improve cold boots for both edge and regular servers. Before: <img width="622" alt="CleanShot 2023-09-27 at 13 30 47@2x" src="https://github.com/vercel/next.js/assets/11064311/fa383000-c71e-420e-9daa-b8d93ff242e7"> After: <img width="622" alt="CleanShot 2023-09-27 at 13 31 32@2x" src="https://github.com/vercel/next.js/assets/11064311/702f083a-705f-4b12-9133-9bb7eb02109e"> A win of 70KBs. <!-- 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(s) that you're making: ## For Contributors ### Improving Documentation - Run `pnpm prettier-fix` to fix formatting issues before opening the PR. - Read the Docs Contribution Guide to ensure your contribution follows the docs guidelines: https://nextjs.org/docs/community/contribution-guide ### Adding or Updating Examples - The "examples guidelines" are followed from our contributing doc https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md - Make sure the linting passes by running `pnpm build && pnpm lint`. See https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md ### Fixing a bug - Related issues linked using `fixes #number` - Tests added. See: https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ### Adding a feature - Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. (A discussion must be opened, see https://github.com/vercel/next.js/discussions/new?category=ideas) - Related issues/discussions are linked using `fixes #number` - e2e tests added (https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) - Documentation added - Telemetry added. In case of a feature if it's used or not. - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ## For Maintainers - Minimal description (aim for explaining to someone not on the team to understand the PR) - When linking to a Slack thread, you might want to share details of the conclusion - Link both the Linear (Fixes NEXT-xxx) and the GitHub issues - Add review comments if necessary to explain to the reviewer the logic behind a change ### What? ### Why? ### How? Closes NEXT- Fixes # -->
2023-09-28 11:03:32 +02:00
return {
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
react$: `next/dist/compiled/react${reactChannel}`,
Update React from 60a927d04 to 2bc7d336a (#61522) Updates React from 60a927d04 to 2bc7d336a Also updates aliases for `react.shared-subset` to `react.react-server` ### React upstream changes - https://github.com/facebook/react/pull/28250 - https://github.com/facebook/react/pull/28225 - https://github.com/facebook/react/pull/28123 - https://github.com/facebook/react/pull/28240 - https://github.com/facebook/react/pull/28239 - https://github.com/facebook/react/pull/28245 - https://github.com/facebook/react/pull/28244 - https://github.com/facebook/react/pull/28238 - https://github.com/facebook/react/pull/28235 - https://github.com/facebook/react/pull/28221 - https://github.com/facebook/react/pull/28215 - https://github.com/facebook/react/pull/28214 - https://github.com/facebook/react/pull/28213 - https://github.com/facebook/react/pull/28212 - https://github.com/facebook/react/pull/28211 - https://github.com/facebook/react/pull/28247 - https://github.com/facebook/react/pull/28210 - https://github.com/facebook/react/pull/28186 - https://github.com/facebook/react/pull/28232 - https://github.com/facebook/react/pull/28169 - https://github.com/facebook/react/pull/28177 - https://github.com/facebook/react/pull/28170 - https://github.com/facebook/react/pull/28168 - https://github.com/facebook/react/pull/28122 - https://github.com/facebook/react/pull/27982 - https://github.com/facebook/react/pull/28217 - https://github.com/facebook/react/pull/28223 - https://github.com/facebook/react/pull/28208 - https://github.com/facebook/react/pull/28209 - https://github.com/facebook/react/pull/28200 - https://github.com/facebook/react/pull/28199 - https://github.com/facebook/react/pull/28198 - https://github.com/facebook/react/pull/28197 - https://github.com/facebook/react/pull/28196 - https://github.com/facebook/react/pull/28194 - https://github.com/facebook/react/pull/28192 - https://github.com/facebook/react/pull/28191 - https://github.com/facebook/react/pull/28182 - https://github.com/facebook/react/pull/28181 - https://github.com/facebook/react/pull/28180 - https://github.com/facebook/react/pull/28178 - https://github.com/facebook/react/pull/28201 - https://github.com/facebook/react/pull/28176 - https://github.com/facebook/react/pull/28162 - https://github.com/facebook/react/pull/28131 - https://github.com/facebook/react/pull/28190 - https://github.com/facebook/react/pull/28172 - https://github.com/facebook/react/pull/28171 - https://github.com/facebook/react/pull/28173 - https://github.com/facebook/react/pull/28174 - https://github.com/facebook/react/pull/28175 - https://github.com/facebook/react/pull/28136 - https://github.com/facebook/react/pull/28135 - https://github.com/facebook/react/pull/28134 - https://github.com/facebook/react/pull/28133 - https://github.com/facebook/react/pull/28132 - https://github.com/facebook/react/pull/28130 - https://github.com/facebook/react/pull/28202 - https://github.com/facebook/react/pull/28102 - https://github.com/facebook/react/pull/28161 - https://github.com/facebook/react/pull/28193 - https://github.com/facebook/react/pull/28195 - https://github.com/facebook/react/pull/28189 - https://github.com/facebook/react/pull/28160 - https://github.com/facebook/react/pull/28096 - https://github.com/facebook/react/pull/28183 - https://github.com/facebook/react/pull/28125 - https://github.com/facebook/react/pull/28157 - https://github.com/facebook/react/pull/28115 - https://github.com/facebook/react/pull/28124 - https://github.com/facebook/react/pull/28163 - https://github.com/facebook/react/pull/28164 - https://github.com/facebook/react/pull/28150 - https://github.com/facebook/react/pull/28159 - https://github.com/facebook/react/pull/28069 - https://github.com/facebook/react/pull/28110 - https://github.com/facebook/react/pull/28148 - https://github.com/facebook/react/pull/28116 - https://github.com/facebook/react/pull/28099 - https://github.com/facebook/react/pull/28100 - https://github.com/facebook/react/pull/28147 - https://github.com/facebook/react/pull/28128 - https://github.com/facebook/react/pull/28126 - https://github.com/facebook/react/pull/28139 - https://github.com/facebook/react/pull/28140 - https://github.com/facebook/react/pull/28141 - https://github.com/facebook/react/pull/28142 - https://github.com/facebook/react/pull/28113 - https://github.com/facebook/react/pull/28129 - https://github.com/facebook/react/pull/28114 - https://github.com/facebook/react/pull/28053 - https://github.com/facebook/react/pull/28091 - https://github.com/facebook/react/pull/28087 - https://github.com/facebook/react/pull/28112 - https://github.com/facebook/react/pull/28086 - https://github.com/facebook/react/pull/28101 - https://github.com/facebook/react/pull/28106 - https://github.com/facebook/react/pull/28117 - https://github.com/facebook/react/pull/28118 - https://github.com/facebook/react/pull/28105 - https://github.com/facebook/react/pull/27883 - https://github.com/facebook/react/pull/28111 - https://github.com/facebook/react/pull/28095 - https://github.com/facebook/react/pull/28108 - https://github.com/facebook/react/pull/28090 - https://github.com/facebook/react/pull/28089 - https://github.com/facebook/react/pull/28076 - https://github.com/facebook/react/pull/28074 - https://github.com/facebook/react/pull/28103 - https://github.com/facebook/react/pull/28098 - https://github.com/facebook/react/pull/28097 - https://github.com/facebook/react/pull/28068 - https://github.com/facebook/react/pull/28093 - https://github.com/facebook/react/pull/28094 - https://github.com/facebook/react/pull/28073 - https://github.com/facebook/react/pull/28084 - https://github.com/facebook/react/pull/28063 - https://github.com/facebook/react/pull/28085 - https://github.com/facebook/react/pull/28083 - https://github.com/facebook/react/pull/28065 - https://github.com/facebook/react/pull/28061 - https://github.com/facebook/react/pull/28077 - https://github.com/facebook/react/pull/28075 - https://github.com/facebook/react/pull/28078 - https://github.com/facebook/react/pull/28050 - https://github.com/facebook/react/pull/28011 - https://github.com/facebook/react/pull/28055 - https://github.com/facebook/react/pull/28066 - https://github.com/facebook/react/pull/28067 - https://github.com/facebook/react/pull/28010 - https://github.com/facebook/react/pull/27993 - https://github.com/facebook/react/pull/28052 - https://github.com/facebook/react/pull/28060 - https://github.com/facebook/react/pull/28059 - https://github.com/facebook/react/pull/28034 - https://github.com/facebook/react/pull/28033 - https://github.com/facebook/react/pull/28004 - https://github.com/facebook/react/pull/28051 - https://github.com/facebook/react/pull/28012 - https://github.com/facebook/react/pull/28001 - https://github.com/facebook/react/pull/28002 - https://github.com/facebook/react/pull/27995 - https://github.com/facebook/react/pull/28006 - https://github.com/facebook/react/pull/28005 - https://github.com/facebook/react/pull/28007 - https://github.com/facebook/react/pull/28008 - https://github.com/facebook/react/pull/28009 - https://github.com/facebook/react/pull/28000 - https://github.com/facebook/react/pull/28003 - https://github.com/facebook/react/pull/27997 - https://github.com/facebook/react/pull/27240 - https://github.com/facebook/react/pull/27977 - https://github.com/facebook/react/pull/27940 - https://github.com/facebook/react/pull/27939 - https://github.com/facebook/react/pull/28090 - https://github.com/facebook/react/pull/28089 - https://github.com/facebook/react/pull/28076 - https://github.com/facebook/react/pull/28074 - https://github.com/facebook/react/pull/28103 - https://github.com/facebook/react/pull/28098 - https://github.com/facebook/react/pull/28097 - https://github.com/facebook/react/pull/28068 - https://github.com/facebook/react/pull/28093 - https://github.com/facebook/react/pull/28094 - https://github.com/facebook/react/pull/28073 - https://github.com/facebook/react/pull/28084 - https://github.com/facebook/react/pull/28063 - https://github.com/facebook/react/pull/28085 - https://github.com/facebook/react/pull/28083 - https://github.com/facebook/react/pull/28065 - https://github.com/facebook/react/pull/28061 - https://github.com/facebook/react/pull/28077 - https://github.com/facebook/react/pull/28075 - https://github.com/facebook/react/pull/28078 - https://github.com/facebook/react/pull/28050 - https://github.com/facebook/react/pull/28011 - https://github.com/facebook/react/pull/28055 - https://github.com/facebook/react/pull/28066 - https://github.com/facebook/react/pull/28067 - https://github.com/facebook/react/pull/28010 - https://github.com/facebook/react/pull/27993 - https://github.com/facebook/react/pull/28052 - https://github.com/facebook/react/pull/28060 - https://github.com/facebook/react/pull/28059 - https://github.com/facebook/react/pull/28034 - https://github.com/facebook/react/pull/28033 - https://github.com/facebook/react/pull/28004 - https://github.com/facebook/react/pull/28051 - https://github.com/facebook/react/pull/28012 - https://github.com/facebook/react/pull/28001 - https://github.com/facebook/react/pull/28002 - https://github.com/facebook/react/pull/27995 - https://github.com/facebook/react/pull/28006 - https://github.com/facebook/react/pull/28005 - https://github.com/facebook/react/pull/28007 - https://github.com/facebook/react/pull/28008 - https://github.com/facebook/react/pull/28009 - https://github.com/facebook/react/pull/28000 - https://github.com/facebook/react/pull/28003 - https://github.com/facebook/react/pull/27997 - https://github.com/facebook/react/pull/27240 - https://github.com/facebook/react/pull/27977 - https://github.com/facebook/react/pull/27940 - https://github.com/facebook/react/pull/27939 Closes NEXT-2331
2024-02-06 03:22:27 +01:00
'react/react.react-server$': `next/dist/compiled/react${reactChannel}/react.react-server`,
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
'react-dom/server-rendering-stub$': `next/dist/compiled/react-dom${reactChannel}/server-rendering-stub`,
'react-dom$': `next/dist/compiled/react-dom${reactChannel}/server-rendering-stub`,
'react/jsx-runtime$': `next/dist/compiled/react${reactChannel}/jsx-runtime`,
'react/jsx-dev-runtime$': `next/dist/compiled/react${reactChannel}/jsx-dev-runtime`,
'react-dom/client$': `next/dist/compiled/react-dom${reactChannel}/client`,
'react-dom/server$': `next/dist/compiled/react-dom${reactChannel}/server`,
'react-dom/static$': `next/dist/compiled/react-dom-experimental/static`,
'react-dom/static.edge$': `next/dist/compiled/react-dom-experimental/static.edge`,
'react-dom/static.browser$': `next/dist/compiled/react-dom-experimental/static.browser`,
// optimizations to ignore the legacy build of react-dom/server in `server.browser` build
'react-dom/server.edge$': `next/dist/build/webpack/alias/react-dom-server-edge${reactChannel}.js`,
// In Next.js runtime only use react-dom/server.edge
'react-dom/server.browser$': 'react-dom/server.edge',
// react-server-dom-webpack alias
App Router - preinitialize chunks during SSR (#54752) Today when we hydrate an SSR'd RSC response on the client we encounter import chunks which initiate code loading for client components. However we only start fetching these chunks after hydration has begun which is necessarily after the initial chunks for the entrypoint have loaded. React has upstream changes that need to land which will preinitialize the rendered chunks for all client components used during the SSR pass. This will cause a `<script async="" src... />` tag to be emitted in the head for each chunk we need to load during hydration which allows the browser to start fetching these resources even before the entrypoint has started to execute. Additionally the implementation for webpack and turbopack is different enough that there will be a new `react-server-dom-turbopack` package in the React repo which should be used when using Turbopack with Next. This PR also removes a number of patches to React src that proxy loading (`__next_chunk_load__`) and bundler requires (`__next_require__`) through the `globalThis` object. Now the react packages can be fully responsible for implementing chunk loading and all Next needs to do is supply the necessary information such as chunk prefix and crossOrigin attributes necessary for this loading. This information is produced as part of the client-manifest by either a Webpack plugin or Turbopack. Additionally any modifications to the chunk filename that were previously done at runtime need to be made in the manifest itself now. This means we need to encode the deployment id for skew protection and encode the filename to make it match our static path matching (and resolutions on s3) when using `[` and `]` segment characters. There are a few followup items to consider in later PRs 1. we currently bundle a node and edge version of react-server-dom-webpack/client. The node version has an implementation for busboy whereas the edge version does not. Next is currently configured to use busboy when handling a fetch action sent as multipart with a node runtime. Ideally we'd only bundle the one platform we are buliding for but some additional refactoring to support better forking is possibly required here This PR also updates react from 09285d5a7 to d900fadbf. ### React upstream changes - https://github.com/facebook/react/pull/27439 - https://github.com/facebook/react/pull/26763 - https://github.com/facebook/react/pull/27434 - https://github.com/facebook/react/pull/27433 - https://github.com/facebook/react/pull/27424 - https://github.com/facebook/react/pull/27428 - https://github.com/facebook/react/pull/27427 - https://github.com/facebook/react/pull/27315 - https://github.com/facebook/react/pull/27314 - https://github.com/facebook/react/pull/27400 - https://github.com/facebook/react/pull/27421 - https://github.com/facebook/react/pull/27419 - https://github.com/facebook/react/pull/27418
2023-10-03 23:40:25 +02:00
'react-server-dom-turbopack/client$': `next/dist/compiled/react-server-dom-turbopack${reactChannel}/client`,
'react-server-dom-turbopack/client.edge$': `next/dist/compiled/react-server-dom-turbopack${reactChannel}/client.edge`,
'react-server-dom-turbopack/server.edge$': `next/dist/compiled/react-server-dom-turbopack${reactChannel}/server.edge`,
'react-server-dom-turbopack/server.node$': `next/dist/compiled/react-server-dom-turbopack${reactChannel}/server.node`,
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
'react-server-dom-webpack/client$': `next/dist/compiled/react-server-dom-webpack${reactChannel}/client`,
'react-server-dom-webpack/client.edge$': `next/dist/compiled/react-server-dom-webpack${reactChannel}/client.edge`,
'react-server-dom-webpack/server.edge$': `next/dist/compiled/react-server-dom-webpack${reactChannel}/server.edge`,
'react-server-dom-webpack/server.node$': `next/dist/compiled/react-server-dom-webpack${reactChannel}/server.node`,
}
}
const appAliases = makeAppAliases()
const appExperimentalAliases = makeAppAliases('-experimental')
const sharedExternals = [
'styled-jsx',
'styled-jsx/style',
'@opentelemetry/api',
'next/dist/compiled/@ampproject/toolbox-optimizer',
'next/dist/compiled/edge-runtime',
'next/dist/compiled/@edge-runtime/ponyfill',
'next/dist/compiled/undici',
'next/dist/compiled/raw-body',
'next/dist/server/capsize-font-metrics.json',
'critters',
'next/dist/compiled/node-html-parser',
'next/dist/compiled/compression',
'next/dist/compiled/jsonwebtoken',
'next/dist/compiled/@opentelemetry/api',
'next/dist/compiled/@mswjs/interceptors/ClientRequest',
perf: externalise ws for bundled server (#56095) This PR makes `ws` an external. AFAIK we don't really need it on prod, so this saves around 40KB on the server. <!-- 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(s) that you're making: ## For Contributors ### Improving Documentation - Run `pnpm prettier-fix` to fix formatting issues before opening the PR. - Read the Docs Contribution Guide to ensure your contribution follows the docs guidelines: https://nextjs.org/docs/community/contribution-guide ### Adding or Updating Examples - The "examples guidelines" are followed from our contributing doc https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md - Make sure the linting passes by running `pnpm build && pnpm lint`. See https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md ### Fixing a bug - Related issues linked using `fixes #number` - Tests added. See: https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ### Adding a feature - Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. (A discussion must be opened, see https://github.com/vercel/next.js/discussions/new?category=ideas) - Related issues/discussions are linked using `fixes #number` - e2e tests added (https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) - Documentation added - Telemetry added. In case of a feature if it's used or not. - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ## For Maintainers - Minimal description (aim for explaining to someone not on the team to understand the PR) - When linking to a Slack thread, you might want to share details of the conclusion - Link both the Linear (Fixes NEXT-xxx) and the GitHub issues - Add review comments if necessary to explain to the reviewer the logic behind a change ### What? ### Why? ### How? Closes NEXT- Fixes # -->
2023-09-28 11:06:30 +02:00
'next/dist/compiled/ws',
]
const externalsMap = {
'./web/sandbox': 'next/dist/server/web/sandbox',
}
const externalsRegexMap = {
'(.*)trace/tracer$': 'next/dist/server/lib/trace/tracer',
}
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
const bundleTypes = {
app: {
'app-page': path.join(
__dirname,
'dist/esm/server/future/route-modules/app-page/module.js'
),
'app-route': path.join(
__dirname,
'dist/esm/server/future/route-modules/app-route/module.js'
),
},
pages: {
pages: path.join(
__dirname,
'dist/esm/server/future/route-modules/pages/module.js'
),
'pages-api': path.join(
__dirname,
'dist/esm/server/future/route-modules/pages-api/module.js'
),
},
server: {
server: path.join(__dirname, 'dist/esm/server/next-server.js'),
},
}
module.exports = ({ dev, turbo, bundleType, experimental }) => {
const externalHandler = ({ context, request, getResolve }, callback) => {
;(async () => {
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
if (request.endsWith('.external')) {
const resolve = getResolve()
const resolved = await resolve(context, request)
const relative = path.relative(
path.join(__dirname, '..'),
resolved.replace('esm' + path.sep, '')
)
callback(null, `commonjs ${relative}`)
} else {
const regexMatch = Object.keys(externalsRegexMap).find((regex) =>
new RegExp(regex).test(request)
)
if (regexMatch) {
return callback(null, 'commonjs ' + externalsRegexMap[regexMatch])
}
callback()
}
})()
}
/** @type {webpack.Configuration} */
return {
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
entry: bundleTypes[bundleType],
target: 'node',
mode: 'production',
output: {
path: path.join(__dirname, 'dist/compiled/next-server'),
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
filename: `[name]${turbo ? '-turbo' : ''}${
experimental ? '-experimental' : ''
}.runtime.${dev ? 'dev' : 'prod'}.js`,
libraryTarget: 'commonjs2',
},
devtool: 'source-map',
optimization: {
moduleIds: 'named',
minimize: true,
concatenateModules: true,
minimizer: [
new TerserPlugin({
Use swc for runtime bundling (#55842) This swaps the existing minifier for the Next.js runtime bundling from [terser](https://github.com/terser/terser) over to [swc](https://swc.rs/docs/configuration/minification). This small change has slightly decreased development file sizes, and dramatically decreased the time it takes to bundle the runtime. The results below were ran once on my MacBook Pro (M1 Pro). ## Compilation Speed About 3 times faster - `next_bundle_pages_dev`: improved from 7.28s to 1.85s. - `next_bundle_pages_turbo`: improved from 7.28s to 1.85s. - `next_bundle_pages_prod`: improved from 7.28s to 1.93s. - `next_bundle_server`: improved from 7.28s to 2.68s. - `next_bundle_app_turbo`: improved from 8.09s to 2.89s. - `next_bundle_app_turbo_experimental`: improved from 7.74s to 2.77s. - `next_bundle_app_prod`: improved from 7.86s to 2.77s. - `next_bundle_app_dev`: improved from 9.41s to 2.86s. - `next_bundle_app_prod_experimental`: improved from 8.01s to 3.12s. - `next_bundle_app_dev_experimental`: improved from 9.11s to 3.58s. - `next_bundle`: improved from 9.50s to 3.69s. ## File Sizes About the same, small improvements in development bundle sizes ```shell # Using terser 692K packages/next/dist/compiled/next-server/app-page-experimental.runtime.dev.js 460K packages/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js 460K packages/next/dist/compiled/next-server/app-page-turbo-experimental.runtime.prod.js 436K packages/next/dist/compiled/next-server/app-page-turbo.runtime.prod.js 672K packages/next/dist/compiled/next-server/app-page.runtime.dev.js 436K packages/next/dist/compiled/next-server/app-page.runtime.prod.js 68K packages/next/dist/compiled/next-server/app-route-experimental.runtime.dev.js 48K packages/next/dist/compiled/next-server/app-route-experimental.runtime.prod.js 48K packages/next/dist/compiled/next-server/app-route-turbo-experimental.runtime.prod.js 48K packages/next/dist/compiled/next-server/app-route-turbo.runtime.prod.js 68K packages/next/dist/compiled/next-server/app-route.runtime.dev.js 48K packages/next/dist/compiled/next-server/app-route.runtime.prod.js 28K packages/next/dist/compiled/next-server/pages-api-turbo.runtime.prod.js 28K packages/next/dist/compiled/next-server/pages-api.runtime.dev.js 28K packages/next/dist/compiled/next-server/pages-api.runtime.prod.js 64K packages/next/dist/compiled/next-server/pages-turbo.runtime.prod.js 68K packages/next/dist/compiled/next-server/pages.runtime.dev.js 64K packages/next/dist/compiled/next-server/pages.runtime.prod.js 204K packages/next/dist/compiled/next-server/server.runtime.prod.js # Using swc 684K packages/next/dist/compiled/next-server/app-page-experimental.runtime.dev.js 460K packages/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js 460K packages/next/dist/compiled/next-server/app-page-turbo-experimental.runtime.prod.js 436K packages/next/dist/compiled/next-server/app-page-turbo.runtime.prod.js 660K packages/next/dist/compiled/next-server/app-page.runtime.dev.js 436K packages/next/dist/compiled/next-server/app-page.runtime.prod.js 68K packages/next/dist/compiled/next-server/app-route-experimental.runtime.dev.js 48K packages/next/dist/compiled/next-server/app-route-experimental.runtime.prod.js 48K packages/next/dist/compiled/next-server/app-route-turbo-experimental.runtime.prod.js 48K packages/next/dist/compiled/next-server/app-route-turbo.runtime.prod.js 68K packages/next/dist/compiled/next-server/app-route.runtime.dev.js 48K packages/next/dist/compiled/next-server/app-route.runtime.prod.js 28K packages/next/dist/compiled/next-server/pages-api-turbo.runtime.prod.js 28K packages/next/dist/compiled/next-server/pages-api.runtime.dev.js 28K packages/next/dist/compiled/next-server/pages-api.runtime.prod.js 64K packages/next/dist/compiled/next-server/pages-turbo.runtime.prod.js 68K packages/next/dist/compiled/next-server/pages.runtime.dev.js 64K packages/next/dist/compiled/next-server/pages.runtime.prod.js 204K packages/next/dist/compiled/next-server/server.runtime.prod.js ```
2023-09-22 23:46:33 +02:00
minify: TerserPlugin.swcMinify,
terserOptions: {
compress: {
Use swc for runtime bundling (#55842) This swaps the existing minifier for the Next.js runtime bundling from [terser](https://github.com/terser/terser) over to [swc](https://swc.rs/docs/configuration/minification). This small change has slightly decreased development file sizes, and dramatically decreased the time it takes to bundle the runtime. The results below were ran once on my MacBook Pro (M1 Pro). ## Compilation Speed About 3 times faster - `next_bundle_pages_dev`: improved from 7.28s to 1.85s. - `next_bundle_pages_turbo`: improved from 7.28s to 1.85s. - `next_bundle_pages_prod`: improved from 7.28s to 1.93s. - `next_bundle_server`: improved from 7.28s to 2.68s. - `next_bundle_app_turbo`: improved from 8.09s to 2.89s. - `next_bundle_app_turbo_experimental`: improved from 7.74s to 2.77s. - `next_bundle_app_prod`: improved from 7.86s to 2.77s. - `next_bundle_app_dev`: improved from 9.41s to 2.86s. - `next_bundle_app_prod_experimental`: improved from 8.01s to 3.12s. - `next_bundle_app_dev_experimental`: improved from 9.11s to 3.58s. - `next_bundle`: improved from 9.50s to 3.69s. ## File Sizes About the same, small improvements in development bundle sizes ```shell # Using terser 692K packages/next/dist/compiled/next-server/app-page-experimental.runtime.dev.js 460K packages/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js 460K packages/next/dist/compiled/next-server/app-page-turbo-experimental.runtime.prod.js 436K packages/next/dist/compiled/next-server/app-page-turbo.runtime.prod.js 672K packages/next/dist/compiled/next-server/app-page.runtime.dev.js 436K packages/next/dist/compiled/next-server/app-page.runtime.prod.js 68K packages/next/dist/compiled/next-server/app-route-experimental.runtime.dev.js 48K packages/next/dist/compiled/next-server/app-route-experimental.runtime.prod.js 48K packages/next/dist/compiled/next-server/app-route-turbo-experimental.runtime.prod.js 48K packages/next/dist/compiled/next-server/app-route-turbo.runtime.prod.js 68K packages/next/dist/compiled/next-server/app-route.runtime.dev.js 48K packages/next/dist/compiled/next-server/app-route.runtime.prod.js 28K packages/next/dist/compiled/next-server/pages-api-turbo.runtime.prod.js 28K packages/next/dist/compiled/next-server/pages-api.runtime.dev.js 28K packages/next/dist/compiled/next-server/pages-api.runtime.prod.js 64K packages/next/dist/compiled/next-server/pages-turbo.runtime.prod.js 68K packages/next/dist/compiled/next-server/pages.runtime.dev.js 64K packages/next/dist/compiled/next-server/pages.runtime.prod.js 204K packages/next/dist/compiled/next-server/server.runtime.prod.js # Using swc 684K packages/next/dist/compiled/next-server/app-page-experimental.runtime.dev.js 460K packages/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js 460K packages/next/dist/compiled/next-server/app-page-turbo-experimental.runtime.prod.js 436K packages/next/dist/compiled/next-server/app-page-turbo.runtime.prod.js 660K packages/next/dist/compiled/next-server/app-page.runtime.dev.js 436K packages/next/dist/compiled/next-server/app-page.runtime.prod.js 68K packages/next/dist/compiled/next-server/app-route-experimental.runtime.dev.js 48K packages/next/dist/compiled/next-server/app-route-experimental.runtime.prod.js 48K packages/next/dist/compiled/next-server/app-route-turbo-experimental.runtime.prod.js 48K packages/next/dist/compiled/next-server/app-route-turbo.runtime.prod.js 68K packages/next/dist/compiled/next-server/app-route.runtime.dev.js 48K packages/next/dist/compiled/next-server/app-route.runtime.prod.js 28K packages/next/dist/compiled/next-server/pages-api-turbo.runtime.prod.js 28K packages/next/dist/compiled/next-server/pages-api.runtime.dev.js 28K packages/next/dist/compiled/next-server/pages-api.runtime.prod.js 64K packages/next/dist/compiled/next-server/pages-turbo.runtime.prod.js 68K packages/next/dist/compiled/next-server/pages.runtime.dev.js 64K packages/next/dist/compiled/next-server/pages.runtime.prod.js 204K packages/next/dist/compiled/next-server/server.runtime.prod.js ```
2023-09-22 23:46:33 +02:00
dead_code: true,
// Zero means no limit.
passes: 0,
},
format: {
preamble: '',
},
},
}),
],
},
plugins: [
new webpack.DefinePlugin({
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
'typeof window': JSON.stringify('undefined'),
'process.env.NEXT_MINIMAL': JSON.stringify('true'),
'this.serverOptions.experimentalTestProxy': JSON.stringify(false),
'this.minimalMode': JSON.stringify(true),
'this.renderOpts.dev': JSON.stringify(dev),
perf: improve Pages Router server rendering performance (#64461) ### What This PR's goal is to improve the throughput performance of the Next.js server when handling Pages Router routes. Note that the results from this are very synthetic and do not represent the real-life performance of an application. If we only wanted to handle hello worlds, we could probably make this even faster but on production, a slow fetch call to your DB is probably what's slowing you down. I'll look into App Router next. ### Why? I guess I got nerd-sniped into it 😃 ### How? A few optimizations: - I looked deeply at the pipeline for rendering a Pages Router page. I noticed a lot of intermediary streams being created here and there to eventually be concatenated to a simple string. I think this is probably left over code from when we wanted to support streaming there and so there's some code that was shared with the App Router, which we absolutely don't need I think. I refactored it to be slightly simpler with just a few string concats here and there. - misc: I removed some redundant Promises being created here and there and added a small inline optimisation to eliminate `if (renderOpts.dev)` code in production. ### Nummies Test setup: hello world pages router app, next start + autocannon - requests handled in 10s: 18k -> 33K, **~80% improvement** - avg latency: 4.89ms -> 2.8ms, **~42% improvement** - avg req/res: 1846.5 -> 2983.5, **~61% improvement** Before <img width="742" alt="image" src="https://github.com/vercel/next.js/assets/11064311/658e7ade-eba7-4604-a7c9-619bd51a5ec8"> vs after <img width="880" alt="image" src="https://github.com/vercel/next.js/assets/11064311/2f46cf69-b788-4db2-bf90-6f65dc7abd82"> <!-- 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(s) that you're making: ## For Contributors ### Improving Documentation - Run `pnpm prettier-fix` to fix formatting issues before opening the PR. - Read the Docs Contribution Guide to ensure your contribution follows the docs guidelines: https://nextjs.org/docs/community/contribution-guide ### Adding or Updating Examples - The "examples guidelines" are followed from our contributing doc https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md - Make sure the linting passes by running `pnpm build && pnpm lint`. See https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md ### Fixing a bug - Related issues linked using `fixes #number` - Tests added. See: https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ### Adding a feature - Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. (A discussion must be opened, see https://github.com/vercel/next.js/discussions/new?category=ideas) - Related issues/discussions are linked using `fixes #number` - e2e tests added (https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) - Documentation added - Telemetry added. In case of a feature if it's used or not. - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ## For Maintainers - Minimal description (aim for explaining to someone not on the team to understand the PR) - When linking to a Slack thread, you might want to share details of the conclusion - Link both the Linear (Fixes NEXT-xxx) and the GitHub issues - Add review comments if necessary to explain to the reviewer the logic behind a change ### What? ### Why? ### How? Closes NEXT- Fixes # --> Closes NEXT-3103
2024-04-16 14:25:45 +02:00
'renderOpts.dev': JSON.stringify(dev),
'process.env.NODE_ENV': JSON.stringify(
dev ? 'development' : 'production'
),
'process.env.__NEXT_EXPERIMENTAL_REACT': JSON.stringify(
experimental ? true : false
),
'process.env.NEXT_RUNTIME': JSON.stringify('nodejs'),
...(!dev ? { 'process.env.TURBOPACK': JSON.stringify(turbo) } : {}),
}),
!!process.env.ANALYZE &&
new BundleAnalyzerPlugin({
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
analyzerPort: calculateUniquePort(
dev,
turbo,
experimental,
bundleType
),
openAnalyzer: false,
...(process.env.CI
? {
analyzerMode: 'static',
reportFilename: path.join(
__dirname,
`dist/compiled/next-server/report.${dev ? 'dev' : 'prod'}-${
turbo ? 'turbo' : 'webpack'
}-${
experimental ? 'experimental' : 'stable'
}-${bundleType}.html`
),
}
: {}),
}),
].filter(Boolean),
stats: {
optimizationBailout: true,
},
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
resolve: {
alias:
bundleType === 'app'
? experimental
? appExperimentalAliases
: appAliases
: {},
},
module: {
rules: [
App Router - preinitialize chunks during SSR (#54752) Today when we hydrate an SSR'd RSC response on the client we encounter import chunks which initiate code loading for client components. However we only start fetching these chunks after hydration has begun which is necessarily after the initial chunks for the entrypoint have loaded. React has upstream changes that need to land which will preinitialize the rendered chunks for all client components used during the SSR pass. This will cause a `<script async="" src... />` tag to be emitted in the head for each chunk we need to load during hydration which allows the browser to start fetching these resources even before the entrypoint has started to execute. Additionally the implementation for webpack and turbopack is different enough that there will be a new `react-server-dom-turbopack` package in the React repo which should be used when using Turbopack with Next. This PR also removes a number of patches to React src that proxy loading (`__next_chunk_load__`) and bundler requires (`__next_require__`) through the `globalThis` object. Now the react packages can be fully responsible for implementing chunk loading and all Next needs to do is supply the necessary information such as chunk prefix and crossOrigin attributes necessary for this loading. This information is produced as part of the client-manifest by either a Webpack plugin or Turbopack. Additionally any modifications to the chunk filename that were previously done at runtime need to be made in the manifest itself now. This means we need to encode the deployment id for skew protection and encode the filename to make it match our static path matching (and resolutions on s3) when using `[` and `]` segment characters. There are a few followup items to consider in later PRs 1. we currently bundle a node and edge version of react-server-dom-webpack/client. The node version has an implementation for busboy whereas the edge version does not. Next is currently configured to use busboy when handling a fetch action sent as multipart with a node runtime. Ideally we'd only bundle the one platform we are buliding for but some additional refactoring to support better forking is possibly required here This PR also updates react from 09285d5a7 to d900fadbf. ### React upstream changes - https://github.com/facebook/react/pull/27439 - https://github.com/facebook/react/pull/26763 - https://github.com/facebook/react/pull/27434 - https://github.com/facebook/react/pull/27433 - https://github.com/facebook/react/pull/27424 - https://github.com/facebook/react/pull/27428 - https://github.com/facebook/react/pull/27427 - https://github.com/facebook/react/pull/27315 - https://github.com/facebook/react/pull/27314 - https://github.com/facebook/react/pull/27400 - https://github.com/facebook/react/pull/27421 - https://github.com/facebook/react/pull/27419 - https://github.com/facebook/react/pull/27418
2023-10-03 23:40:25 +02:00
{
include: /[\\/]react-server\.node/,
App Router - preinitialize chunks during SSR (#54752) Today when we hydrate an SSR'd RSC response on the client we encounter import chunks which initiate code loading for client components. However we only start fetching these chunks after hydration has begun which is necessarily after the initial chunks for the entrypoint have loaded. React has upstream changes that need to land which will preinitialize the rendered chunks for all client components used during the SSR pass. This will cause a `<script async="" src... />` tag to be emitted in the head for each chunk we need to load during hydration which allows the browser to start fetching these resources even before the entrypoint has started to execute. Additionally the implementation for webpack and turbopack is different enough that there will be a new `react-server-dom-turbopack` package in the React repo which should be used when using Turbopack with Next. This PR also removes a number of patches to React src that proxy loading (`__next_chunk_load__`) and bundler requires (`__next_require__`) through the `globalThis` object. Now the react packages can be fully responsible for implementing chunk loading and all Next needs to do is supply the necessary information such as chunk prefix and crossOrigin attributes necessary for this loading. This information is produced as part of the client-manifest by either a Webpack plugin or Turbopack. Additionally any modifications to the chunk filename that were previously done at runtime need to be made in the manifest itself now. This means we need to encode the deployment id for skew protection and encode the filename to make it match our static path matching (and resolutions on s3) when using `[` and `]` segment characters. There are a few followup items to consider in later PRs 1. we currently bundle a node and edge version of react-server-dom-webpack/client. The node version has an implementation for busboy whereas the edge version does not. Next is currently configured to use busboy when handling a fetch action sent as multipart with a node runtime. Ideally we'd only bundle the one platform we are buliding for but some additional refactoring to support better forking is possibly required here This PR also updates react from 09285d5a7 to d900fadbf. ### React upstream changes - https://github.com/facebook/react/pull/27439 - https://github.com/facebook/react/pull/26763 - https://github.com/facebook/react/pull/27434 - https://github.com/facebook/react/pull/27433 - https://github.com/facebook/react/pull/27424 - https://github.com/facebook/react/pull/27428 - https://github.com/facebook/react/pull/27427 - https://github.com/facebook/react/pull/27315 - https://github.com/facebook/react/pull/27314 - https://github.com/facebook/react/pull/27400 - https://github.com/facebook/react/pull/27421 - https://github.com/facebook/react/pull/27419 - https://github.com/facebook/react/pull/27418
2023-10-03 23:40:25 +02:00
layer: 'react-server',
},
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
{
include: /vendored[\\/]rsc[\\/]entrypoints/,
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
resolve: {
conditionNames: ['react-server', '...'],
alias: {
react$: `next/dist/compiled/react${
experimental ? '-experimental' : ''
Update React from 60a927d04 to 2bc7d336a (#61522) Updates React from 60a927d04 to 2bc7d336a Also updates aliases for `react.shared-subset` to `react.react-server` ### React upstream changes - https://github.com/facebook/react/pull/28250 - https://github.com/facebook/react/pull/28225 - https://github.com/facebook/react/pull/28123 - https://github.com/facebook/react/pull/28240 - https://github.com/facebook/react/pull/28239 - https://github.com/facebook/react/pull/28245 - https://github.com/facebook/react/pull/28244 - https://github.com/facebook/react/pull/28238 - https://github.com/facebook/react/pull/28235 - https://github.com/facebook/react/pull/28221 - https://github.com/facebook/react/pull/28215 - https://github.com/facebook/react/pull/28214 - https://github.com/facebook/react/pull/28213 - https://github.com/facebook/react/pull/28212 - https://github.com/facebook/react/pull/28211 - https://github.com/facebook/react/pull/28247 - https://github.com/facebook/react/pull/28210 - https://github.com/facebook/react/pull/28186 - https://github.com/facebook/react/pull/28232 - https://github.com/facebook/react/pull/28169 - https://github.com/facebook/react/pull/28177 - https://github.com/facebook/react/pull/28170 - https://github.com/facebook/react/pull/28168 - https://github.com/facebook/react/pull/28122 - https://github.com/facebook/react/pull/27982 - https://github.com/facebook/react/pull/28217 - https://github.com/facebook/react/pull/28223 - https://github.com/facebook/react/pull/28208 - https://github.com/facebook/react/pull/28209 - https://github.com/facebook/react/pull/28200 - https://github.com/facebook/react/pull/28199 - https://github.com/facebook/react/pull/28198 - https://github.com/facebook/react/pull/28197 - https://github.com/facebook/react/pull/28196 - https://github.com/facebook/react/pull/28194 - https://github.com/facebook/react/pull/28192 - https://github.com/facebook/react/pull/28191 - https://github.com/facebook/react/pull/28182 - https://github.com/facebook/react/pull/28181 - https://github.com/facebook/react/pull/28180 - https://github.com/facebook/react/pull/28178 - https://github.com/facebook/react/pull/28201 - https://github.com/facebook/react/pull/28176 - https://github.com/facebook/react/pull/28162 - https://github.com/facebook/react/pull/28131 - https://github.com/facebook/react/pull/28190 - https://github.com/facebook/react/pull/28172 - https://github.com/facebook/react/pull/28171 - https://github.com/facebook/react/pull/28173 - https://github.com/facebook/react/pull/28174 - https://github.com/facebook/react/pull/28175 - https://github.com/facebook/react/pull/28136 - https://github.com/facebook/react/pull/28135 - https://github.com/facebook/react/pull/28134 - https://github.com/facebook/react/pull/28133 - https://github.com/facebook/react/pull/28132 - https://github.com/facebook/react/pull/28130 - https://github.com/facebook/react/pull/28202 - https://github.com/facebook/react/pull/28102 - https://github.com/facebook/react/pull/28161 - https://github.com/facebook/react/pull/28193 - https://github.com/facebook/react/pull/28195 - https://github.com/facebook/react/pull/28189 - https://github.com/facebook/react/pull/28160 - https://github.com/facebook/react/pull/28096 - https://github.com/facebook/react/pull/28183 - https://github.com/facebook/react/pull/28125 - https://github.com/facebook/react/pull/28157 - https://github.com/facebook/react/pull/28115 - https://github.com/facebook/react/pull/28124 - https://github.com/facebook/react/pull/28163 - https://github.com/facebook/react/pull/28164 - https://github.com/facebook/react/pull/28150 - https://github.com/facebook/react/pull/28159 - https://github.com/facebook/react/pull/28069 - https://github.com/facebook/react/pull/28110 - https://github.com/facebook/react/pull/28148 - https://github.com/facebook/react/pull/28116 - https://github.com/facebook/react/pull/28099 - https://github.com/facebook/react/pull/28100 - https://github.com/facebook/react/pull/28147 - https://github.com/facebook/react/pull/28128 - https://github.com/facebook/react/pull/28126 - https://github.com/facebook/react/pull/28139 - https://github.com/facebook/react/pull/28140 - https://github.com/facebook/react/pull/28141 - https://github.com/facebook/react/pull/28142 - https://github.com/facebook/react/pull/28113 - https://github.com/facebook/react/pull/28129 - https://github.com/facebook/react/pull/28114 - https://github.com/facebook/react/pull/28053 - https://github.com/facebook/react/pull/28091 - https://github.com/facebook/react/pull/28087 - https://github.com/facebook/react/pull/28112 - https://github.com/facebook/react/pull/28086 - https://github.com/facebook/react/pull/28101 - https://github.com/facebook/react/pull/28106 - https://github.com/facebook/react/pull/28117 - https://github.com/facebook/react/pull/28118 - https://github.com/facebook/react/pull/28105 - https://github.com/facebook/react/pull/27883 - https://github.com/facebook/react/pull/28111 - https://github.com/facebook/react/pull/28095 - https://github.com/facebook/react/pull/28108 - https://github.com/facebook/react/pull/28090 - https://github.com/facebook/react/pull/28089 - https://github.com/facebook/react/pull/28076 - https://github.com/facebook/react/pull/28074 - https://github.com/facebook/react/pull/28103 - https://github.com/facebook/react/pull/28098 - https://github.com/facebook/react/pull/28097 - https://github.com/facebook/react/pull/28068 - https://github.com/facebook/react/pull/28093 - https://github.com/facebook/react/pull/28094 - https://github.com/facebook/react/pull/28073 - https://github.com/facebook/react/pull/28084 - https://github.com/facebook/react/pull/28063 - https://github.com/facebook/react/pull/28085 - https://github.com/facebook/react/pull/28083 - https://github.com/facebook/react/pull/28065 - https://github.com/facebook/react/pull/28061 - https://github.com/facebook/react/pull/28077 - https://github.com/facebook/react/pull/28075 - https://github.com/facebook/react/pull/28078 - https://github.com/facebook/react/pull/28050 - https://github.com/facebook/react/pull/28011 - https://github.com/facebook/react/pull/28055 - https://github.com/facebook/react/pull/28066 - https://github.com/facebook/react/pull/28067 - https://github.com/facebook/react/pull/28010 - https://github.com/facebook/react/pull/27993 - https://github.com/facebook/react/pull/28052 - https://github.com/facebook/react/pull/28060 - https://github.com/facebook/react/pull/28059 - https://github.com/facebook/react/pull/28034 - https://github.com/facebook/react/pull/28033 - https://github.com/facebook/react/pull/28004 - https://github.com/facebook/react/pull/28051 - https://github.com/facebook/react/pull/28012 - https://github.com/facebook/react/pull/28001 - https://github.com/facebook/react/pull/28002 - https://github.com/facebook/react/pull/27995 - https://github.com/facebook/react/pull/28006 - https://github.com/facebook/react/pull/28005 - https://github.com/facebook/react/pull/28007 - https://github.com/facebook/react/pull/28008 - https://github.com/facebook/react/pull/28009 - https://github.com/facebook/react/pull/28000 - https://github.com/facebook/react/pull/28003 - https://github.com/facebook/react/pull/27997 - https://github.com/facebook/react/pull/27240 - https://github.com/facebook/react/pull/27977 - https://github.com/facebook/react/pull/27940 - https://github.com/facebook/react/pull/27939 - https://github.com/facebook/react/pull/28090 - https://github.com/facebook/react/pull/28089 - https://github.com/facebook/react/pull/28076 - https://github.com/facebook/react/pull/28074 - https://github.com/facebook/react/pull/28103 - https://github.com/facebook/react/pull/28098 - https://github.com/facebook/react/pull/28097 - https://github.com/facebook/react/pull/28068 - https://github.com/facebook/react/pull/28093 - https://github.com/facebook/react/pull/28094 - https://github.com/facebook/react/pull/28073 - https://github.com/facebook/react/pull/28084 - https://github.com/facebook/react/pull/28063 - https://github.com/facebook/react/pull/28085 - https://github.com/facebook/react/pull/28083 - https://github.com/facebook/react/pull/28065 - https://github.com/facebook/react/pull/28061 - https://github.com/facebook/react/pull/28077 - https://github.com/facebook/react/pull/28075 - https://github.com/facebook/react/pull/28078 - https://github.com/facebook/react/pull/28050 - https://github.com/facebook/react/pull/28011 - https://github.com/facebook/react/pull/28055 - https://github.com/facebook/react/pull/28066 - https://github.com/facebook/react/pull/28067 - https://github.com/facebook/react/pull/28010 - https://github.com/facebook/react/pull/27993 - https://github.com/facebook/react/pull/28052 - https://github.com/facebook/react/pull/28060 - https://github.com/facebook/react/pull/28059 - https://github.com/facebook/react/pull/28034 - https://github.com/facebook/react/pull/28033 - https://github.com/facebook/react/pull/28004 - https://github.com/facebook/react/pull/28051 - https://github.com/facebook/react/pull/28012 - https://github.com/facebook/react/pull/28001 - https://github.com/facebook/react/pull/28002 - https://github.com/facebook/react/pull/27995 - https://github.com/facebook/react/pull/28006 - https://github.com/facebook/react/pull/28005 - https://github.com/facebook/react/pull/28007 - https://github.com/facebook/react/pull/28008 - https://github.com/facebook/react/pull/28009 - https://github.com/facebook/react/pull/28000 - https://github.com/facebook/react/pull/28003 - https://github.com/facebook/react/pull/27997 - https://github.com/facebook/react/pull/27240 - https://github.com/facebook/react/pull/27977 - https://github.com/facebook/react/pull/27940 - https://github.com/facebook/react/pull/27939 Closes NEXT-2331
2024-02-06 03:22:27 +01:00
}/react.react-server`,
'next/dist/compiled/react$': `next/dist/compiled/react${
experimental ? '-experimental' : ''
Update React from 60a927d04 to 2bc7d336a (#61522) Updates React from 60a927d04 to 2bc7d336a Also updates aliases for `react.shared-subset` to `react.react-server` ### React upstream changes - https://github.com/facebook/react/pull/28250 - https://github.com/facebook/react/pull/28225 - https://github.com/facebook/react/pull/28123 - https://github.com/facebook/react/pull/28240 - https://github.com/facebook/react/pull/28239 - https://github.com/facebook/react/pull/28245 - https://github.com/facebook/react/pull/28244 - https://github.com/facebook/react/pull/28238 - https://github.com/facebook/react/pull/28235 - https://github.com/facebook/react/pull/28221 - https://github.com/facebook/react/pull/28215 - https://github.com/facebook/react/pull/28214 - https://github.com/facebook/react/pull/28213 - https://github.com/facebook/react/pull/28212 - https://github.com/facebook/react/pull/28211 - https://github.com/facebook/react/pull/28247 - https://github.com/facebook/react/pull/28210 - https://github.com/facebook/react/pull/28186 - https://github.com/facebook/react/pull/28232 - https://github.com/facebook/react/pull/28169 - https://github.com/facebook/react/pull/28177 - https://github.com/facebook/react/pull/28170 - https://github.com/facebook/react/pull/28168 - https://github.com/facebook/react/pull/28122 - https://github.com/facebook/react/pull/27982 - https://github.com/facebook/react/pull/28217 - https://github.com/facebook/react/pull/28223 - https://github.com/facebook/react/pull/28208 - https://github.com/facebook/react/pull/28209 - https://github.com/facebook/react/pull/28200 - https://github.com/facebook/react/pull/28199 - https://github.com/facebook/react/pull/28198 - https://github.com/facebook/react/pull/28197 - https://github.com/facebook/react/pull/28196 - https://github.com/facebook/react/pull/28194 - https://github.com/facebook/react/pull/28192 - https://github.com/facebook/react/pull/28191 - https://github.com/facebook/react/pull/28182 - https://github.com/facebook/react/pull/28181 - https://github.com/facebook/react/pull/28180 - https://github.com/facebook/react/pull/28178 - https://github.com/facebook/react/pull/28201 - https://github.com/facebook/react/pull/28176 - https://github.com/facebook/react/pull/28162 - https://github.com/facebook/react/pull/28131 - https://github.com/facebook/react/pull/28190 - https://github.com/facebook/react/pull/28172 - https://github.com/facebook/react/pull/28171 - https://github.com/facebook/react/pull/28173 - https://github.com/facebook/react/pull/28174 - https://github.com/facebook/react/pull/28175 - https://github.com/facebook/react/pull/28136 - https://github.com/facebook/react/pull/28135 - https://github.com/facebook/react/pull/28134 - https://github.com/facebook/react/pull/28133 - https://github.com/facebook/react/pull/28132 - https://github.com/facebook/react/pull/28130 - https://github.com/facebook/react/pull/28202 - https://github.com/facebook/react/pull/28102 - https://github.com/facebook/react/pull/28161 - https://github.com/facebook/react/pull/28193 - https://github.com/facebook/react/pull/28195 - https://github.com/facebook/react/pull/28189 - https://github.com/facebook/react/pull/28160 - https://github.com/facebook/react/pull/28096 - https://github.com/facebook/react/pull/28183 - https://github.com/facebook/react/pull/28125 - https://github.com/facebook/react/pull/28157 - https://github.com/facebook/react/pull/28115 - https://github.com/facebook/react/pull/28124 - https://github.com/facebook/react/pull/28163 - https://github.com/facebook/react/pull/28164 - https://github.com/facebook/react/pull/28150 - https://github.com/facebook/react/pull/28159 - https://github.com/facebook/react/pull/28069 - https://github.com/facebook/react/pull/28110 - https://github.com/facebook/react/pull/28148 - https://github.com/facebook/react/pull/28116 - https://github.com/facebook/react/pull/28099 - https://github.com/facebook/react/pull/28100 - https://github.com/facebook/react/pull/28147 - https://github.com/facebook/react/pull/28128 - https://github.com/facebook/react/pull/28126 - https://github.com/facebook/react/pull/28139 - https://github.com/facebook/react/pull/28140 - https://github.com/facebook/react/pull/28141 - https://github.com/facebook/react/pull/28142 - https://github.com/facebook/react/pull/28113 - https://github.com/facebook/react/pull/28129 - https://github.com/facebook/react/pull/28114 - https://github.com/facebook/react/pull/28053 - https://github.com/facebook/react/pull/28091 - https://github.com/facebook/react/pull/28087 - https://github.com/facebook/react/pull/28112 - https://github.com/facebook/react/pull/28086 - https://github.com/facebook/react/pull/28101 - https://github.com/facebook/react/pull/28106 - https://github.com/facebook/react/pull/28117 - https://github.com/facebook/react/pull/28118 - https://github.com/facebook/react/pull/28105 - https://github.com/facebook/react/pull/27883 - https://github.com/facebook/react/pull/28111 - https://github.com/facebook/react/pull/28095 - https://github.com/facebook/react/pull/28108 - https://github.com/facebook/react/pull/28090 - https://github.com/facebook/react/pull/28089 - https://github.com/facebook/react/pull/28076 - https://github.com/facebook/react/pull/28074 - https://github.com/facebook/react/pull/28103 - https://github.com/facebook/react/pull/28098 - https://github.com/facebook/react/pull/28097 - https://github.com/facebook/react/pull/28068 - https://github.com/facebook/react/pull/28093 - https://github.com/facebook/react/pull/28094 - https://github.com/facebook/react/pull/28073 - https://github.com/facebook/react/pull/28084 - https://github.com/facebook/react/pull/28063 - https://github.com/facebook/react/pull/28085 - https://github.com/facebook/react/pull/28083 - https://github.com/facebook/react/pull/28065 - https://github.com/facebook/react/pull/28061 - https://github.com/facebook/react/pull/28077 - https://github.com/facebook/react/pull/28075 - https://github.com/facebook/react/pull/28078 - https://github.com/facebook/react/pull/28050 - https://github.com/facebook/react/pull/28011 - https://github.com/facebook/react/pull/28055 - https://github.com/facebook/react/pull/28066 - https://github.com/facebook/react/pull/28067 - https://github.com/facebook/react/pull/28010 - https://github.com/facebook/react/pull/27993 - https://github.com/facebook/react/pull/28052 - https://github.com/facebook/react/pull/28060 - https://github.com/facebook/react/pull/28059 - https://github.com/facebook/react/pull/28034 - https://github.com/facebook/react/pull/28033 - https://github.com/facebook/react/pull/28004 - https://github.com/facebook/react/pull/28051 - https://github.com/facebook/react/pull/28012 - https://github.com/facebook/react/pull/28001 - https://github.com/facebook/react/pull/28002 - https://github.com/facebook/react/pull/27995 - https://github.com/facebook/react/pull/28006 - https://github.com/facebook/react/pull/28005 - https://github.com/facebook/react/pull/28007 - https://github.com/facebook/react/pull/28008 - https://github.com/facebook/react/pull/28009 - https://github.com/facebook/react/pull/28000 - https://github.com/facebook/react/pull/28003 - https://github.com/facebook/react/pull/27997 - https://github.com/facebook/react/pull/27240 - https://github.com/facebook/react/pull/27977 - https://github.com/facebook/react/pull/27940 - https://github.com/facebook/react/pull/27939 - https://github.com/facebook/react/pull/28090 - https://github.com/facebook/react/pull/28089 - https://github.com/facebook/react/pull/28076 - https://github.com/facebook/react/pull/28074 - https://github.com/facebook/react/pull/28103 - https://github.com/facebook/react/pull/28098 - https://github.com/facebook/react/pull/28097 - https://github.com/facebook/react/pull/28068 - https://github.com/facebook/react/pull/28093 - https://github.com/facebook/react/pull/28094 - https://github.com/facebook/react/pull/28073 - https://github.com/facebook/react/pull/28084 - https://github.com/facebook/react/pull/28063 - https://github.com/facebook/react/pull/28085 - https://github.com/facebook/react/pull/28083 - https://github.com/facebook/react/pull/28065 - https://github.com/facebook/react/pull/28061 - https://github.com/facebook/react/pull/28077 - https://github.com/facebook/react/pull/28075 - https://github.com/facebook/react/pull/28078 - https://github.com/facebook/react/pull/28050 - https://github.com/facebook/react/pull/28011 - https://github.com/facebook/react/pull/28055 - https://github.com/facebook/react/pull/28066 - https://github.com/facebook/react/pull/28067 - https://github.com/facebook/react/pull/28010 - https://github.com/facebook/react/pull/27993 - https://github.com/facebook/react/pull/28052 - https://github.com/facebook/react/pull/28060 - https://github.com/facebook/react/pull/28059 - https://github.com/facebook/react/pull/28034 - https://github.com/facebook/react/pull/28033 - https://github.com/facebook/react/pull/28004 - https://github.com/facebook/react/pull/28051 - https://github.com/facebook/react/pull/28012 - https://github.com/facebook/react/pull/28001 - https://github.com/facebook/react/pull/28002 - https://github.com/facebook/react/pull/27995 - https://github.com/facebook/react/pull/28006 - https://github.com/facebook/react/pull/28005 - https://github.com/facebook/react/pull/28007 - https://github.com/facebook/react/pull/28008 - https://github.com/facebook/react/pull/28009 - https://github.com/facebook/react/pull/28000 - https://github.com/facebook/react/pull/28003 - https://github.com/facebook/react/pull/27997 - https://github.com/facebook/react/pull/27240 - https://github.com/facebook/react/pull/27977 - https://github.com/facebook/react/pull/27940 - https://github.com/facebook/react/pull/27939 Closes NEXT-2331
2024-02-06 03:22:27 +01:00
}/react.react-server`,
'react-dom$': `next/dist/compiled/react-dom${
experimental ? '-experimental' : ''
}/react-dom.react-server`,
'next/dist/compiled/react-dom$': `next/dist/compiled/react-dom${
experimental ? '-experimental' : ''
}/react-dom.react-server`,
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
},
},
layer: 'react-server',
},
{
issuerLayer: 'react-server',
resolve: {
conditionNames: ['react-server', '...'],
alias: {
react$: `next/dist/compiled/react${
experimental ? '-experimental' : ''
Update React from 60a927d04 to 2bc7d336a (#61522) Updates React from 60a927d04 to 2bc7d336a Also updates aliases for `react.shared-subset` to `react.react-server` ### React upstream changes - https://github.com/facebook/react/pull/28250 - https://github.com/facebook/react/pull/28225 - https://github.com/facebook/react/pull/28123 - https://github.com/facebook/react/pull/28240 - https://github.com/facebook/react/pull/28239 - https://github.com/facebook/react/pull/28245 - https://github.com/facebook/react/pull/28244 - https://github.com/facebook/react/pull/28238 - https://github.com/facebook/react/pull/28235 - https://github.com/facebook/react/pull/28221 - https://github.com/facebook/react/pull/28215 - https://github.com/facebook/react/pull/28214 - https://github.com/facebook/react/pull/28213 - https://github.com/facebook/react/pull/28212 - https://github.com/facebook/react/pull/28211 - https://github.com/facebook/react/pull/28247 - https://github.com/facebook/react/pull/28210 - https://github.com/facebook/react/pull/28186 - https://github.com/facebook/react/pull/28232 - https://github.com/facebook/react/pull/28169 - https://github.com/facebook/react/pull/28177 - https://github.com/facebook/react/pull/28170 - https://github.com/facebook/react/pull/28168 - https://github.com/facebook/react/pull/28122 - https://github.com/facebook/react/pull/27982 - https://github.com/facebook/react/pull/28217 - https://github.com/facebook/react/pull/28223 - https://github.com/facebook/react/pull/28208 - https://github.com/facebook/react/pull/28209 - https://github.com/facebook/react/pull/28200 - https://github.com/facebook/react/pull/28199 - https://github.com/facebook/react/pull/28198 - https://github.com/facebook/react/pull/28197 - https://github.com/facebook/react/pull/28196 - https://github.com/facebook/react/pull/28194 - https://github.com/facebook/react/pull/28192 - https://github.com/facebook/react/pull/28191 - https://github.com/facebook/react/pull/28182 - https://github.com/facebook/react/pull/28181 - https://github.com/facebook/react/pull/28180 - https://github.com/facebook/react/pull/28178 - https://github.com/facebook/react/pull/28201 - https://github.com/facebook/react/pull/28176 - https://github.com/facebook/react/pull/28162 - https://github.com/facebook/react/pull/28131 - https://github.com/facebook/react/pull/28190 - https://github.com/facebook/react/pull/28172 - https://github.com/facebook/react/pull/28171 - https://github.com/facebook/react/pull/28173 - https://github.com/facebook/react/pull/28174 - https://github.com/facebook/react/pull/28175 - https://github.com/facebook/react/pull/28136 - https://github.com/facebook/react/pull/28135 - https://github.com/facebook/react/pull/28134 - https://github.com/facebook/react/pull/28133 - https://github.com/facebook/react/pull/28132 - https://github.com/facebook/react/pull/28130 - https://github.com/facebook/react/pull/28202 - https://github.com/facebook/react/pull/28102 - https://github.com/facebook/react/pull/28161 - https://github.com/facebook/react/pull/28193 - https://github.com/facebook/react/pull/28195 - https://github.com/facebook/react/pull/28189 - https://github.com/facebook/react/pull/28160 - https://github.com/facebook/react/pull/28096 - https://github.com/facebook/react/pull/28183 - https://github.com/facebook/react/pull/28125 - https://github.com/facebook/react/pull/28157 - https://github.com/facebook/react/pull/28115 - https://github.com/facebook/react/pull/28124 - https://github.com/facebook/react/pull/28163 - https://github.com/facebook/react/pull/28164 - https://github.com/facebook/react/pull/28150 - https://github.com/facebook/react/pull/28159 - https://github.com/facebook/react/pull/28069 - https://github.com/facebook/react/pull/28110 - https://github.com/facebook/react/pull/28148 - https://github.com/facebook/react/pull/28116 - https://github.com/facebook/react/pull/28099 - https://github.com/facebook/react/pull/28100 - https://github.com/facebook/react/pull/28147 - https://github.com/facebook/react/pull/28128 - https://github.com/facebook/react/pull/28126 - https://github.com/facebook/react/pull/28139 - https://github.com/facebook/react/pull/28140 - https://github.com/facebook/react/pull/28141 - https://github.com/facebook/react/pull/28142 - https://github.com/facebook/react/pull/28113 - https://github.com/facebook/react/pull/28129 - https://github.com/facebook/react/pull/28114 - https://github.com/facebook/react/pull/28053 - https://github.com/facebook/react/pull/28091 - https://github.com/facebook/react/pull/28087 - https://github.com/facebook/react/pull/28112 - https://github.com/facebook/react/pull/28086 - https://github.com/facebook/react/pull/28101 - https://github.com/facebook/react/pull/28106 - https://github.com/facebook/react/pull/28117 - https://github.com/facebook/react/pull/28118 - https://github.com/facebook/react/pull/28105 - https://github.com/facebook/react/pull/27883 - https://github.com/facebook/react/pull/28111 - https://github.com/facebook/react/pull/28095 - https://github.com/facebook/react/pull/28108 - https://github.com/facebook/react/pull/28090 - https://github.com/facebook/react/pull/28089 - https://github.com/facebook/react/pull/28076 - https://github.com/facebook/react/pull/28074 - https://github.com/facebook/react/pull/28103 - https://github.com/facebook/react/pull/28098 - https://github.com/facebook/react/pull/28097 - https://github.com/facebook/react/pull/28068 - https://github.com/facebook/react/pull/28093 - https://github.com/facebook/react/pull/28094 - https://github.com/facebook/react/pull/28073 - https://github.com/facebook/react/pull/28084 - https://github.com/facebook/react/pull/28063 - https://github.com/facebook/react/pull/28085 - https://github.com/facebook/react/pull/28083 - https://github.com/facebook/react/pull/28065 - https://github.com/facebook/react/pull/28061 - https://github.com/facebook/react/pull/28077 - https://github.com/facebook/react/pull/28075 - https://github.com/facebook/react/pull/28078 - https://github.com/facebook/react/pull/28050 - https://github.com/facebook/react/pull/28011 - https://github.com/facebook/react/pull/28055 - https://github.com/facebook/react/pull/28066 - https://github.com/facebook/react/pull/28067 - https://github.com/facebook/react/pull/28010 - https://github.com/facebook/react/pull/27993 - https://github.com/facebook/react/pull/28052 - https://github.com/facebook/react/pull/28060 - https://github.com/facebook/react/pull/28059 - https://github.com/facebook/react/pull/28034 - https://github.com/facebook/react/pull/28033 - https://github.com/facebook/react/pull/28004 - https://github.com/facebook/react/pull/28051 - https://github.com/facebook/react/pull/28012 - https://github.com/facebook/react/pull/28001 - https://github.com/facebook/react/pull/28002 - https://github.com/facebook/react/pull/27995 - https://github.com/facebook/react/pull/28006 - https://github.com/facebook/react/pull/28005 - https://github.com/facebook/react/pull/28007 - https://github.com/facebook/react/pull/28008 - https://github.com/facebook/react/pull/28009 - https://github.com/facebook/react/pull/28000 - https://github.com/facebook/react/pull/28003 - https://github.com/facebook/react/pull/27997 - https://github.com/facebook/react/pull/27240 - https://github.com/facebook/react/pull/27977 - https://github.com/facebook/react/pull/27940 - https://github.com/facebook/react/pull/27939 - https://github.com/facebook/react/pull/28090 - https://github.com/facebook/react/pull/28089 - https://github.com/facebook/react/pull/28076 - https://github.com/facebook/react/pull/28074 - https://github.com/facebook/react/pull/28103 - https://github.com/facebook/react/pull/28098 - https://github.com/facebook/react/pull/28097 - https://github.com/facebook/react/pull/28068 - https://github.com/facebook/react/pull/28093 - https://github.com/facebook/react/pull/28094 - https://github.com/facebook/react/pull/28073 - https://github.com/facebook/react/pull/28084 - https://github.com/facebook/react/pull/28063 - https://github.com/facebook/react/pull/28085 - https://github.com/facebook/react/pull/28083 - https://github.com/facebook/react/pull/28065 - https://github.com/facebook/react/pull/28061 - https://github.com/facebook/react/pull/28077 - https://github.com/facebook/react/pull/28075 - https://github.com/facebook/react/pull/28078 - https://github.com/facebook/react/pull/28050 - https://github.com/facebook/react/pull/28011 - https://github.com/facebook/react/pull/28055 - https://github.com/facebook/react/pull/28066 - https://github.com/facebook/react/pull/28067 - https://github.com/facebook/react/pull/28010 - https://github.com/facebook/react/pull/27993 - https://github.com/facebook/react/pull/28052 - https://github.com/facebook/react/pull/28060 - https://github.com/facebook/react/pull/28059 - https://github.com/facebook/react/pull/28034 - https://github.com/facebook/react/pull/28033 - https://github.com/facebook/react/pull/28004 - https://github.com/facebook/react/pull/28051 - https://github.com/facebook/react/pull/28012 - https://github.com/facebook/react/pull/28001 - https://github.com/facebook/react/pull/28002 - https://github.com/facebook/react/pull/27995 - https://github.com/facebook/react/pull/28006 - https://github.com/facebook/react/pull/28005 - https://github.com/facebook/react/pull/28007 - https://github.com/facebook/react/pull/28008 - https://github.com/facebook/react/pull/28009 - https://github.com/facebook/react/pull/28000 - https://github.com/facebook/react/pull/28003 - https://github.com/facebook/react/pull/27997 - https://github.com/facebook/react/pull/27240 - https://github.com/facebook/react/pull/27977 - https://github.com/facebook/react/pull/27940 - https://github.com/facebook/react/pull/27939 Closes NEXT-2331
2024-02-06 03:22:27 +01:00
}/react.react-server`,
'next/dist/compiled/react$': `next/dist/compiled/react${
experimental ? '-experimental' : ''
Update React from 60a927d04 to 2bc7d336a (#61522) Updates React from 60a927d04 to 2bc7d336a Also updates aliases for `react.shared-subset` to `react.react-server` ### React upstream changes - https://github.com/facebook/react/pull/28250 - https://github.com/facebook/react/pull/28225 - https://github.com/facebook/react/pull/28123 - https://github.com/facebook/react/pull/28240 - https://github.com/facebook/react/pull/28239 - https://github.com/facebook/react/pull/28245 - https://github.com/facebook/react/pull/28244 - https://github.com/facebook/react/pull/28238 - https://github.com/facebook/react/pull/28235 - https://github.com/facebook/react/pull/28221 - https://github.com/facebook/react/pull/28215 - https://github.com/facebook/react/pull/28214 - https://github.com/facebook/react/pull/28213 - https://github.com/facebook/react/pull/28212 - https://github.com/facebook/react/pull/28211 - https://github.com/facebook/react/pull/28247 - https://github.com/facebook/react/pull/28210 - https://github.com/facebook/react/pull/28186 - https://github.com/facebook/react/pull/28232 - https://github.com/facebook/react/pull/28169 - https://github.com/facebook/react/pull/28177 - https://github.com/facebook/react/pull/28170 - https://github.com/facebook/react/pull/28168 - https://github.com/facebook/react/pull/28122 - https://github.com/facebook/react/pull/27982 - https://github.com/facebook/react/pull/28217 - https://github.com/facebook/react/pull/28223 - https://github.com/facebook/react/pull/28208 - https://github.com/facebook/react/pull/28209 - https://github.com/facebook/react/pull/28200 - https://github.com/facebook/react/pull/28199 - https://github.com/facebook/react/pull/28198 - https://github.com/facebook/react/pull/28197 - https://github.com/facebook/react/pull/28196 - https://github.com/facebook/react/pull/28194 - https://github.com/facebook/react/pull/28192 - https://github.com/facebook/react/pull/28191 - https://github.com/facebook/react/pull/28182 - https://github.com/facebook/react/pull/28181 - https://github.com/facebook/react/pull/28180 - https://github.com/facebook/react/pull/28178 - https://github.com/facebook/react/pull/28201 - https://github.com/facebook/react/pull/28176 - https://github.com/facebook/react/pull/28162 - https://github.com/facebook/react/pull/28131 - https://github.com/facebook/react/pull/28190 - https://github.com/facebook/react/pull/28172 - https://github.com/facebook/react/pull/28171 - https://github.com/facebook/react/pull/28173 - https://github.com/facebook/react/pull/28174 - https://github.com/facebook/react/pull/28175 - https://github.com/facebook/react/pull/28136 - https://github.com/facebook/react/pull/28135 - https://github.com/facebook/react/pull/28134 - https://github.com/facebook/react/pull/28133 - https://github.com/facebook/react/pull/28132 - https://github.com/facebook/react/pull/28130 - https://github.com/facebook/react/pull/28202 - https://github.com/facebook/react/pull/28102 - https://github.com/facebook/react/pull/28161 - https://github.com/facebook/react/pull/28193 - https://github.com/facebook/react/pull/28195 - https://github.com/facebook/react/pull/28189 - https://github.com/facebook/react/pull/28160 - https://github.com/facebook/react/pull/28096 - https://github.com/facebook/react/pull/28183 - https://github.com/facebook/react/pull/28125 - https://github.com/facebook/react/pull/28157 - https://github.com/facebook/react/pull/28115 - https://github.com/facebook/react/pull/28124 - https://github.com/facebook/react/pull/28163 - https://github.com/facebook/react/pull/28164 - https://github.com/facebook/react/pull/28150 - https://github.com/facebook/react/pull/28159 - https://github.com/facebook/react/pull/28069 - https://github.com/facebook/react/pull/28110 - https://github.com/facebook/react/pull/28148 - https://github.com/facebook/react/pull/28116 - https://github.com/facebook/react/pull/28099 - https://github.com/facebook/react/pull/28100 - https://github.com/facebook/react/pull/28147 - https://github.com/facebook/react/pull/28128 - https://github.com/facebook/react/pull/28126 - https://github.com/facebook/react/pull/28139 - https://github.com/facebook/react/pull/28140 - https://github.com/facebook/react/pull/28141 - https://github.com/facebook/react/pull/28142 - https://github.com/facebook/react/pull/28113 - https://github.com/facebook/react/pull/28129 - https://github.com/facebook/react/pull/28114 - https://github.com/facebook/react/pull/28053 - https://github.com/facebook/react/pull/28091 - https://github.com/facebook/react/pull/28087 - https://github.com/facebook/react/pull/28112 - https://github.com/facebook/react/pull/28086 - https://github.com/facebook/react/pull/28101 - https://github.com/facebook/react/pull/28106 - https://github.com/facebook/react/pull/28117 - https://github.com/facebook/react/pull/28118 - https://github.com/facebook/react/pull/28105 - https://github.com/facebook/react/pull/27883 - https://github.com/facebook/react/pull/28111 - https://github.com/facebook/react/pull/28095 - https://github.com/facebook/react/pull/28108 - https://github.com/facebook/react/pull/28090 - https://github.com/facebook/react/pull/28089 - https://github.com/facebook/react/pull/28076 - https://github.com/facebook/react/pull/28074 - https://github.com/facebook/react/pull/28103 - https://github.com/facebook/react/pull/28098 - https://github.com/facebook/react/pull/28097 - https://github.com/facebook/react/pull/28068 - https://github.com/facebook/react/pull/28093 - https://github.com/facebook/react/pull/28094 - https://github.com/facebook/react/pull/28073 - https://github.com/facebook/react/pull/28084 - https://github.com/facebook/react/pull/28063 - https://github.com/facebook/react/pull/28085 - https://github.com/facebook/react/pull/28083 - https://github.com/facebook/react/pull/28065 - https://github.com/facebook/react/pull/28061 - https://github.com/facebook/react/pull/28077 - https://github.com/facebook/react/pull/28075 - https://github.com/facebook/react/pull/28078 - https://github.com/facebook/react/pull/28050 - https://github.com/facebook/react/pull/28011 - https://github.com/facebook/react/pull/28055 - https://github.com/facebook/react/pull/28066 - https://github.com/facebook/react/pull/28067 - https://github.com/facebook/react/pull/28010 - https://github.com/facebook/react/pull/27993 - https://github.com/facebook/react/pull/28052 - https://github.com/facebook/react/pull/28060 - https://github.com/facebook/react/pull/28059 - https://github.com/facebook/react/pull/28034 - https://github.com/facebook/react/pull/28033 - https://github.com/facebook/react/pull/28004 - https://github.com/facebook/react/pull/28051 - https://github.com/facebook/react/pull/28012 - https://github.com/facebook/react/pull/28001 - https://github.com/facebook/react/pull/28002 - https://github.com/facebook/react/pull/27995 - https://github.com/facebook/react/pull/28006 - https://github.com/facebook/react/pull/28005 - https://github.com/facebook/react/pull/28007 - https://github.com/facebook/react/pull/28008 - https://github.com/facebook/react/pull/28009 - https://github.com/facebook/react/pull/28000 - https://github.com/facebook/react/pull/28003 - https://github.com/facebook/react/pull/27997 - https://github.com/facebook/react/pull/27240 - https://github.com/facebook/react/pull/27977 - https://github.com/facebook/react/pull/27940 - https://github.com/facebook/react/pull/27939 - https://github.com/facebook/react/pull/28090 - https://github.com/facebook/react/pull/28089 - https://github.com/facebook/react/pull/28076 - https://github.com/facebook/react/pull/28074 - https://github.com/facebook/react/pull/28103 - https://github.com/facebook/react/pull/28098 - https://github.com/facebook/react/pull/28097 - https://github.com/facebook/react/pull/28068 - https://github.com/facebook/react/pull/28093 - https://github.com/facebook/react/pull/28094 - https://github.com/facebook/react/pull/28073 - https://github.com/facebook/react/pull/28084 - https://github.com/facebook/react/pull/28063 - https://github.com/facebook/react/pull/28085 - https://github.com/facebook/react/pull/28083 - https://github.com/facebook/react/pull/28065 - https://github.com/facebook/react/pull/28061 - https://github.com/facebook/react/pull/28077 - https://github.com/facebook/react/pull/28075 - https://github.com/facebook/react/pull/28078 - https://github.com/facebook/react/pull/28050 - https://github.com/facebook/react/pull/28011 - https://github.com/facebook/react/pull/28055 - https://github.com/facebook/react/pull/28066 - https://github.com/facebook/react/pull/28067 - https://github.com/facebook/react/pull/28010 - https://github.com/facebook/react/pull/27993 - https://github.com/facebook/react/pull/28052 - https://github.com/facebook/react/pull/28060 - https://github.com/facebook/react/pull/28059 - https://github.com/facebook/react/pull/28034 - https://github.com/facebook/react/pull/28033 - https://github.com/facebook/react/pull/28004 - https://github.com/facebook/react/pull/28051 - https://github.com/facebook/react/pull/28012 - https://github.com/facebook/react/pull/28001 - https://github.com/facebook/react/pull/28002 - https://github.com/facebook/react/pull/27995 - https://github.com/facebook/react/pull/28006 - https://github.com/facebook/react/pull/28005 - https://github.com/facebook/react/pull/28007 - https://github.com/facebook/react/pull/28008 - https://github.com/facebook/react/pull/28009 - https://github.com/facebook/react/pull/28000 - https://github.com/facebook/react/pull/28003 - https://github.com/facebook/react/pull/27997 - https://github.com/facebook/react/pull/27240 - https://github.com/facebook/react/pull/27977 - https://github.com/facebook/react/pull/27940 - https://github.com/facebook/react/pull/27939 Closes NEXT-2331
2024-02-06 03:22:27 +01:00
}/react.react-server`,
'react-dom$': `next/dist/compiled/react-dom${
experimental ? '-experimental' : ''
}/react-dom.react-server`,
'next/dist/compiled/react-dom$': `next/dist/compiled/react-dom${
experimental ? '-experimental' : ''
}/react-dom.react-server`,
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
},
},
},
],
},
externals: [
...sharedExternals,
...(bundleType === 'pages' ? pagesExternals : appExternals),
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
externalsMap,
externalHandler,
],
experiments: {
layers: true,
},
}
}
server: bundle vendored react (#55362) ## What This PR changes Next.js to bundle its vendored React libraries so that the App Router pages can use those built-in versions. ## Why Next.js supports both Pages and App Router and we've gone through a lot of iteration to make sure that Next.js stays flexible wrt to the version of React used: in Pages, we want to use the React provided by the user and in the App Router, to be able to use it, we need to use the canary version of React, which we've built into Next.js for convenience. The problem stems from the fact that you can't run two different instances of React (by design). Previously we have a dual worker setup, where we would separate completely each Next.js versions (App and Pages) so that they would not overlap with each other, however this approach was not great performance and memory wise. We've recently tried using an ESM loader and a single process, but this change would still opt you into the React canary version if you had an app page, which breaks some assumptions. ## How A list of the changes in this PR: ### New versions of the Next.js runtime Since we now compile a runtime per type of page (app/route/api/pages), in order to bundle the two versions of React that we vendored, we introduced a new type of bundle suffixed by `-experimental`. This bundle will have the bleeding edge React needed for Server Actions and Next.js will opt you in into that runtime automatically. For internal contributors, it means that we now run a compiler for 10 subparts of Next.js: - next_bundle_server - next_bundle_pages_prod - next_bundle_pages_turbo - next_bundle_pages_dev - next_bundle_app_turbo_experimental - next_bundle_app_prod - next_bundle_app_prod_experimental - next_bundle_app_turbo - next_bundle_app_dev_experimental - next_bundle_app_dev ![image](https://github.com/vercel/next.js/assets/11064311/f340417d-845e-45b9-8e86-5b287a295c82) ### Simplified require-hook Since the versions of React are correctly re-routed at build time for app pages, we don't need the require hook anymore ### Turbopack changes The bundling logic in Turbopack has been addressed to properly follow the new logic ### Changes to the shared contexts system Some context files need to have a shared instance between the rendering runtime and the user code, like the one that powers the `next/image` component. In general, the aliasing setup takes care of that but we need the require hook for code that is not compiled to reroute to the correct runtime. This only happens for pages node_modules. A new Turbopack resolving plugin has been added to handle that logic in Turbopack. ### Misc changes - `runtime-config` (that powers `next/config`) has been converted to an `.external` file, as it should have been - there are some rules that have been added to the aliases to support the usage of `react-dom/server` in a server-components. We can do that now since the runtime takes care of separating the versions of React. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2023-09-15 21:49:39 +02:00
function calculateUniquePort(dev, turbo, experimental, bundleType) {
const devOffset = dev ? 1000 : 0
const turboOffset = turbo ? 200 : 0
const experimentalOffset = experimental ? 40 : 0
let bundleTypeOffset
switch (bundleType) {
case 'app':
bundleTypeOffset = 1
break
case 'pages':
bundleTypeOffset = 2
break
default:
bundleTypeOffset = 3
}
return 8888 + devOffset + turboOffset + experimentalOffset + bundleTypeOffset
}