diff --git a/.changeset/tidy-foxes-fix.md b/.changeset/tidy-foxes-fix.md new file mode 100644 index 0000000000..82119f58f7 --- /dev/null +++ b/.changeset/tidy-foxes-fix.md @@ -0,0 +1,8 @@ +--- +"@module-federation/runtime-tools": patch +--- + +fix: add files property to package.json to exclude build config from npm publish + +Fixes #3873 where .swcrc file was being published to npm causing Jest test failures. +Only dist/ and README.md will now be included in the published package. \ No newline at end of file diff --git a/apps/website-new/docs/en/practice/frameworks/next/index.mdx b/apps/website-new/docs/en/practice/frameworks/next/index.mdx index 3284a74915..347f1bd2eb 100644 --- a/apps/website-new/docs/en/practice/frameworks/next/index.mdx +++ b/apps/website-new/docs/en/practice/frameworks/next/index.mdx @@ -18,7 +18,7 @@ Support for Next.js is ending [read more](https://github.com/module-federation/c - + # :::tip Demo Reference diff --git a/nextjs-mf-sharing-diagram.md b/nextjs-mf-sharing-diagram.md new file mode 100644 index 0000000000..f4edb42f2a --- /dev/null +++ b/nextjs-mf-sharing-diagram.md @@ -0,0 +1,240 @@ +# Next.js Module Federation Sharing Layers and Configuration + +## Overview + +This document provides a comprehensive mapping of the Next.js Module Federation sharing mechanism, focusing on layers, share scopes, and module configurations across Next.js 14 and 15. Next.js 15+ introduces a sophisticated layer-based sharing system that isolates different rendering contexts. + +## Webpack Layers in Next.js 15+ + +| Layer Name | Constant | Purpose | Share Scope | +|------------|----------|---------|-------------| +| `shared` | WEBPACK_LAYERS.shared | Shared utilities | N/A | +| `rsc` | WEBPACK_LAYERS.reactServerComponents | React Server Components | `reactServerComponents` | +| `ssr` | WEBPACK_LAYERS.serverSideRendering | Server-side rendering | `serverSideRendering` | +| `action-browser` | WEBPACK_LAYERS.actionBrowser | Server actions browser | N/A | +| `api` | WEBPACK_LAYERS.api | API routes | N/A | +| `middleware` | WEBPACK_LAYERS.middleware | Middleware | N/A | +| `instrument` | WEBPACK_LAYERS.instrument | Instrumentation | N/A | +| `edge-asset` | WEBPACK_LAYERS.edgeAsset | Edge assets | N/A | +| `app-pages-browser` | WEBPACK_LAYERS_NAMES.appPagesBrowser | App directory client | `app-pages-browser` | +| `pages-dir-browser` | WEBPACK_LAYERS_NAMES.pagesDirBrowser | Pages directory client | `default` | +| `pages-dir-node` | WEBPACK_LAYERS_NAMES.pagesDirNode | Pages directory server | `default` | + +## Share Scopes by Environment + +| Environment | Next.js Version | Share Scope | Used By | +|-------------|----------------|-------------|---------| +| Client | 14 | `default` | All client modules | +| Server | 14 | `default` | All server modules (external) | +| Pages Dir Client | 15+ | `default` | pagesDirBrowser layer | +| Pages Dir Server | 15+ | `default` | pagesDirNode layer | +| App Dir Client | 15+ | `app-pages-browser` | appPagesBrowser layer | +| App Dir RSC | 15+ | `reactServerComponents` | rsc layer | +| App Dir SSR | 15+ | `serverSideRendering` | ssr layer | + +## Complete Client-Side Module Sharing Comparison + +| Module | Next.js 14 Client | Next.js 15 Pages Dir Client | Next.js 15 App Dir Client | +|--------|-------------------|------------------------------|---------------------------| +| **React Core** | +| react | shareScope: default
import: undefined
singleton: true | shareScope: default
import: next/dist/compiled/react
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser/undefined
singleton: true | shareScope: app-pages-browser
import: next/dist/compiled/react
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true | +| react/ | shareScope: default
import: undefined | shareScope: default
import: next/dist/compiled/react/
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser | shareScope: app-pages-browser
import: next/dist/compiled/react/
layer: appPagesBrowser
issuerLayer: appPagesBrowser | +| next/dist/compiled/react | Not shared | shareScope: default
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser
singleton: true | shareScope: app-pages-browser
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true | +| react-dom | shareScope: default
import: undefined
singleton: true | shareScope: default
import: next/dist/compiled/react-dom
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser/undefined
singleton: true | shareScope: app-pages-browser
import: next/dist/compiled/react-dom
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true | +| react-dom/ | shareScope: default
import: undefined | shareScope: default
import: next/dist/compiled/react-dom/
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser | shareScope: app-pages-browser
import: next/dist/compiled/react-dom/
layer: appPagesBrowser
issuerLayer: appPagesBrowser | +| next/dist/compiled/react-dom | Not shared | shareScope: default
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser
singleton: true | shareScope: app-pages-browser
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true | +| next/dist/compiled/react-dom/ | Not shared | Not shared | shareScope: app-pages-browser
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true | +| react-dom/client | shareScope: default
import: undefined | shareScope: default
import: next/dist/compiled/react-dom/client
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser/undefined | shareScope: app-pages-browser
import: next/dist/compiled/react-dom/client
layer: appPagesBrowser
issuerLayer: appPagesBrowser | +| next/dist/compiled/react-dom/client | Not shared | shareScope: default
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser
singleton: true | shareScope: app-pages-browser
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true | +| **React JSX** | +| react/jsx-runtime | shareScope: default
import: undefined
singleton: true | shareScope: default
import: next/dist/compiled/react/jsx-runtime
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser/undefined
singleton: true | shareScope: app-pages-browser
import: next/dist/compiled/react/jsx-runtime
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true | +| next/dist/compiled/react/jsx-runtime | Not shared | shareScope: default
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser
singleton: true | shareScope: app-pages-browser
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true | +| react/jsx-dev-runtime | shareScope: default
import: undefined
singleton: true | shareScope: default
import: next/dist/compiled/react/jsx-dev-runtime
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser/undefined
singleton: true | shareScope: app-pages-browser
import: next/dist/compiled/react/jsx-dev-runtime
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true | +| next/dist/compiled/react/jsx-dev-runtime | Not shared | shareScope: default
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser
singleton: true | shareScope: app-pages-browser
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true | +| **React Server Components** | +| react-server-dom-webpack/client | Not supported | Not used | shareScope: app-pages-browser
import: next/dist/compiled/react-server-dom-webpack/client
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true | +| next/dist/compiled/react-server-dom-webpack/client | Not supported | Not used | shareScope: app-pages-browser
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true | +| react-refresh/runtime | Not supported | Not used | shareScope: app-pages-browser
import: next/dist/compiled/react-refresh/runtime
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true | +| next/dist/compiled/react-refresh/runtime | Not supported | Not used | shareScope: app-pages-browser
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true | +| **Next.js Core** | +| next/router | shareScope: default
import: undefined
singleton: true | shareScope: default
import: next/dist/client/router
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser/undefined
singleton: true | Not available (use next/navigation) | +| next/compat/router | shareScope: default
import: undefined | shareScope: default
import: next/dist/client/compat/router
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser/undefined
singleton: true | Not available | +| next/head | shareScope: default
import: undefined
singleton: true | shareScope: default
import: next/head
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser/undefined
singleton: true | Not recommended (use metadata) | +| next/image | shareScope: default
import: undefined
singleton: true | shareScope: default
import: next/image
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser/undefined
singleton: true | shareScope: app-pages-browser
import: next/image
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true | +| next/script | shareScope: default
import: undefined
singleton: true | shareScope: default
import: next/script
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser/undefined
singleton: true | shareScope: app-pages-browser
import: next/script
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true | +| next/dynamic | shareScope: default
import: undefined
singleton: true | shareScope: default
import: next/dynamic
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser/undefined
singleton: true | shareScope: app-pages-browser
import: next/dynamic
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true | +| next/link | shareScope: default
import: undefined
singleton: true | shareScope: default
import: next/link
layer: pagesDirBrowser
issuerLayer: undefined
singleton: true | shareScope: app-pages-browser
import: next/dist/client/app-dir/link
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true
nodeModulesReconstructedLookup: true | +| next/dist/client/app-dir/link | Not shared | Not shared | shareScope: app-pages-browser
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true
nodeModulesReconstructedLookup: true | +| next/dist/client/app-dir/link.js | Not shared | Not shared | shareScope: app-pages-browser
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true
nodeModulesReconstructedLookup: true | +| **Next.js Internals** | +| next/dist/shared/ | Not shared | shareScope: default
import: next/dist/shared/
layer: pagesDirBrowser
issuerLayer: pagesDirBrowser
singleton: true
nodeModulesReconstructedLookup: true
include: { request: /shared-runtime/ } | shareScope: app-pages-browser
import: next/dist/shared/
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true
nodeModulesReconstructedLookup: true
include: { request: /shared-runtime/ } | +| next/dist/client/ | Not shared | Not shared | shareScope: app-pages-browser
import: next/dist/client/
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true
nodeModulesReconstructedLookup: true
include: { request: /request\|bfcache\|head-manager\|use-action-queue/ } | +| next/dist/compiled/ | Not shared | Not shared | shareScope: app-pages-browser
import: next/dist/compiled/
layer: appPagesBrowser
issuerLayer: appPagesBrowser
singleton: true
nodeModulesReconstructedLookup: true | + +## Complete Server-Side Module Sharing Comparison + +| Module | Next.js 14 Server | Next.js 15 Pages Dir Server | Next.js 15 App Dir RSC | Next.js 15 App Dir SSR | +|--------|-------------------|------------------------------|------------------------|------------------------| +| **React Core** | +| react | shareScope: default
import: false
singleton: true | shareScope: default
import: next/dist/compiled/react
layer: pagesDirNode
issuerLayer: pagesDirNode/undefined
singleton: true | shareScope: reactServerComponents
import: next/dist/server/route-modules/app-page/vendored/rsc/react
layer: rsc
issuerLayer: rsc
singleton: true | shareScope: serverSideRendering
import: next/dist/server/route-modules/app-page/vendored/ssr/react
layer: ssr
issuerLayer: ssr
singleton: true | +| next/dist/server/route-modules/app-page/vendored/rsc/react | Not supported | Not used | shareScope: reactServerComponents
layer: rsc
issuerLayer: rsc
singleton: true | Not used | +| next/dist/server/route-modules/app-page/vendored/ssr/react | Not supported | Not used | Not used | shareScope: serverSideRendering
layer: ssr
issuerLayer: ssr
singleton: true | +| react-dom | shareScope: default
import: false
singleton: true | shareScope: default
import: next/dist/compiled/react-dom
layer: pagesDirNode
issuerLayer: pagesDirNode/undefined
singleton: true | shareScope: reactServerComponents
import: next/dist/server/route-modules/app-page/vendored/rsc/react-dom
layer: rsc
issuerLayer: rsc
singleton: true | shareScope: serverSideRendering
import: next/dist/server/route-modules/app-page/vendored/ssr/react-dom
layer: ssr
issuerLayer: ssr
singleton: true | +| next/dist/server/route-modules/app-page/vendored/rsc/react-dom | Not supported | Not used | shareScope: reactServerComponents
layer: rsc
issuerLayer: rsc
singleton: true | Not used | +| next/dist/server/route-modules/app-page/vendored/ssr/react-dom | Not supported | Not used | Not used | shareScope: serverSideRendering
layer: ssr
issuerLayer: ssr
singleton: true | +| **React JSX** | +| react/jsx-runtime | shareScope: default
import: false
singleton: true | shareScope: default
import: next/dist/compiled/react/jsx-runtime
layer: pagesDirNode
issuerLayer: pagesDirNode/undefined
singleton: true | shareScope: reactServerComponents
import: next/dist/server/route-modules/app-page/vendored/rsc/react/jsx-runtime
layer: rsc
issuerLayer: rsc
singleton: true | shareScope: serverSideRendering
import: next/dist/server/route-modules/app-page/vendored/ssr/react/jsx-runtime
layer: ssr
issuerLayer: ssr
singleton: true | +| next/dist/server/route-modules/app-page/vendored/rsc/react-jsx-runtime | Not supported | Not used | shareScope: reactServerComponents
layer: rsc
issuerLayer: rsc
singleton: true | Not used | +| next/dist/server/route-modules/app-page/vendored/ssr/react-jsx-runtime | Not supported | Not used | Not used | shareScope: serverSideRendering
layer: ssr
issuerLayer: ssr
singleton: true | +| react/jsx-dev-runtime | shareScope: default
import: false
singleton: true | shareScope: default
import: next/dist/compiled/react/jsx-dev-runtime
layer: pagesDirNode
issuerLayer: pagesDirNode/undefined
singleton: true | shareScope: reactServerComponents
import: next/dist/server/route-modules/app-page/vendored/rsc/react/jsx-dev-runtime
layer: rsc
issuerLayer: rsc
singleton: true | shareScope: serverSideRendering
import: next/dist/server/route-modules/app-page/vendored/ssr/react/jsx-dev-runtime
layer: ssr
issuerLayer: ssr
singleton: true | +| next/dist/server/route-modules/app-page/vendored/rsc/react-jsx-dev-runtime | Not supported | Not used | shareScope: reactServerComponents
layer: rsc
issuerLayer: rsc
singleton: true | Not used | +| next/dist/server/route-modules/app-page/vendored/ssr/react-jsx-dev-runtime | Not supported | Not used | Not used | shareScope: serverSideRendering
layer: ssr
issuerLayer: ssr
singleton: true | +| **React Server Components** | +| react-server-dom-webpack/server.edge | Not supported | Not used | shareScope: reactServerComponents
import: next/dist/server/route-modules/app-page/vendored/rsc/react-server-dom-webpack/server.edge
layer: rsc
issuerLayer: rsc
singleton: true | Not used | +| next/dist/server/route-modules/app-page/vendored/rsc/react-server-dom-webpack-server-edge | Not supported | Not used | shareScope: reactServerComponents
layer: rsc
issuerLayer: rsc
singleton: true | Not used | +| react-server-dom-webpack/server.node | Not supported | Not used | shareScope: reactServerComponents
import: next/dist/server/route-modules/app-page/vendored/rsc/react-server-dom-webpack/server.node
layer: rsc
issuerLayer: rsc
singleton: true | Not used | +| next/dist/server/route-modules/app-page/vendored/rsc/react-server-dom-webpack-server-node | Not supported | Not used | shareScope: reactServerComponents
layer: rsc
issuerLayer: rsc
singleton: true | Not used | +| react-server-dom-webpack/client.edge | Not supported | Not used | Not used | shareScope: serverSideRendering
import: next/dist/server/route-modules/app-page/vendored/ssr/react-server-dom-webpack/client.edge
layer: ssr
issuerLayer: ssr
singleton: true | +| next/dist/server/route-modules/app-page/vendored/ssr/react-server-dom-webpack-client-edge | Not supported | Not used | Not used | shareScope: serverSideRendering
layer: ssr
issuerLayer: ssr
singleton: true | +| react-server-dom-webpack/static.edge | Not supported | Not used | shareScope: reactServerComponents
import: next/dist/server/route-modules/app-page/vendored/rsc/react-server-dom-webpack/static.edge
layer: rsc
issuerLayer: rsc
singleton: true | Not used | +| next/dist/server/route-modules/app-page/vendored/rsc/react-server-dom-webpack-static-edge | Not supported | Not used | shareScope: reactServerComponents
layer: rsc
issuerLayer: rsc
singleton: true | Not used | +| react/compiler-runtime | Not supported | Not used | shareScope: reactServerComponents
import: next/dist/server/route-modules/app-page/vendored/rsc/react/compiler-runtime
layer: rsc
issuerLayer: rsc
singleton: true | shareScope: serverSideRendering
import: next/dist/server/route-modules/app-page/vendored/ssr/react/compiler-runtime
layer: ssr
issuerLayer: ssr
singleton: true | +| next/dist/server/route-modules/app-page/vendored/rsc/react-compiler-runtime | Not supported | Not used | shareScope: reactServerComponents
layer: rsc
issuerLayer: rsc
singleton: true | Not used | +| next/dist/server/route-modules/app-page/vendored/ssr/react-compiler-runtime | Not supported | Not used | Not used | shareScope: serverSideRendering
layer: ssr
issuerLayer: ssr
singleton: true | +| **Next.js Core** | +| next/router | shareScope: default
import: false
singleton: true | shareScope: default
import: next/dist/client/router
layer: pagesDirNode
issuerLayer: pagesDirNode/undefined
singleton: true
nodeModulesReconstructedLookup: true | Not available | Not available | +| next/compat/router | Not shared | shareScope: default
import: next/dist/client/compat/router
layer: pagesDirNode
issuerLayer: pagesDirNode/undefined
singleton: true
nodeModulesReconstructedLookup: true | Not available | Not available | +| next/head | shareScope: default
import: false
singleton: true | shareScope: default
import: next/head
layer: pagesDirNode
issuerLayer: pagesDirNode/undefined
singleton: true | Not available | Not available | +| next/document | shareScope: default
import: false
singleton: true | shareScope: default
import: next/document
layer: pagesDirNode
issuerLayer: pagesDirNode/undefined
singleton: true | Not available | Not available | +| next/app | shareScope: default
import: false
singleton: true | shareScope: default
import: next/app
layer: pagesDirNode
issuerLayer: pagesDirNode/undefined
singleton: true | Not available | Not available | +| next/server | shareScope: default
import: false
singleton: true | shareScope: default
import: next/server
layer: pagesDirNode
issuerLayer: pagesDirNode/undefined
singleton: true | shareScope: reactServerComponents
import: next/server
layer: rsc
issuerLayer: rsc
singleton: true | shareScope: serverSideRendering
import: next/server
layer: ssr
issuerLayer: ssr
singleton: true | +| next/image | Not shared | shareScope: default
import: next/image
layer: pagesDirNode
issuerLayer: pagesDirNode/undefined
singleton: true | shareScope: reactServerComponents
import: next/image
layer: rsc
issuerLayer: rsc
singleton: true | shareScope: serverSideRendering
import: next/image
layer: ssr
issuerLayer: ssr
singleton: true | +| next/script | Not shared | shareScope: default
import: next/script
layer: pagesDirNode
issuerLayer: pagesDirNode/undefined
singleton: true | shareScope: reactServerComponents
import: next/script
layer: rsc
issuerLayer: rsc
singleton: true | shareScope: serverSideRendering
import: next/script
layer: ssr
issuerLayer: ssr
singleton: true | +| next/dynamic | Not shared | shareScope: default
import: next/dynamic
layer: pagesDirNode
issuerLayer: pagesDirNode/undefined
singleton: true | shareScope: reactServerComponents
import: next/dynamic
layer: rsc
issuerLayer: rsc
singleton: true | shareScope: serverSideRendering
import: next/dynamic
layer: ssr
issuerLayer: ssr
singleton: true | +| next/link | Not shared | Not shared | shareScope: reactServerComponents
import: next/dist/client/app-dir/link
layer: rsc
issuerLayer: rsc
singleton: true
nodeModulesReconstructedLookup: true | shareScope: serverSideRendering
import: next/dist/client/app-dir/link
layer: ssr
issuerLayer: ssr
singleton: true
nodeModulesReconstructedLookup: true | +| next/dist/client/app-dir/link | Not shared | Not shared | shareScope: reactServerComponents
layer: rsc
issuerLayer: rsc
singleton: true
nodeModulesReconstructedLookup: true | shareScope: serverSideRendering
layer: ssr
issuerLayer: ssr
singleton: true
nodeModulesReconstructedLookup: true | +| next/dist/client/app-dir/link.js | Not shared | Not shared | shareScope: reactServerComponents
layer: rsc
issuerLayer: rsc
singleton: true
nodeModulesReconstructedLookup: true | shareScope: serverSideRendering
layer: ssr
issuerLayer: ssr
singleton: true
nodeModulesReconstructedLookup: true | +| **Next.js Internals** | +| next/dist/compiled/next-server/* | Not shared | shareScope: default
import: next/dist/compiled/next-server/*
layer: pagesDirNode
issuerLayer: pagesDirNode
singleton: true | shareScope: reactServerComponents
import: next/dist/compiled/next-server/*
layer: rsc
issuerLayer: rsc
singleton: true | shareScope: serverSideRendering
import: next/dist/compiled/next-server/*
layer: ssr
issuerLayer: ssr
singleton: true | +| next/dist/server/route-modules/app-page/vendored/contexts/ | Not shared | Not shared | shareScope: reactServerComponents
layer: rsc
issuerLayer: rsc
singleton: true | shareScope: serverSideRendering
layer: ssr
issuerLayer: ssr
singleton: true | + +## Layer Mapping Between Next.js 14 and 15 + +| Next.js 14 Context | Next.js 14 ShareScope | Next.js 15 Layer | Next.js 15 ShareScope | Notes | +|-------------------|----------------------|------------------|----------------------|-------| +| Client (any) | default | pagesDirBrowser | default | Pages directory client-side | +| Client (any) | default | appPagesBrowser | app-pages-browser | App directory client-side | +| Server (any) | default | pagesDirNode | default | Pages directory server-side | +| Server (any) | default | rsc | reactServerComponents | React Server Components | +| Server (any) | default | ssr | serverSideRendering | Server-side rendering | +| N/A | N/A | shared | N/A | Shared utilities layer | +| N/A | N/A | api | N/A | API routes layer | +| N/A | N/A | middleware | N/A | Middleware layer | +| N/A | N/A | instrument | N/A | Instrumentation layer | +| N/A | N/A | edge-asset | N/A | Edge assets layer | +| N/A | N/A | action-browser | N/A | Server actions browser layer | + +## Module Equivalency Mapping + +| Next.js 14 Module | Next.js 15 Pages Dir | Next.js 15 App Dir | Migration Notes | +|-------------------|---------------------|-------------------|-----------------| +| react (client) | react with layer: pagesDirBrowser | react with layer: appPagesBrowser | Different share scopes | +| react (server) | react with layer: pagesDirNode | react with layer: rsc/ssr | Vendored versions in app dir | +| next/router | next/router | next/navigation | API change required | +| next/head | next/head | Metadata API | Complete API change | +| next/link | next/link | next/link (app variant) | Different import path | +| next/dynamic | next/dynamic | next/dynamic | Works in both | +| getServerSideProps | Supported | Not supported | Use server components | +| getStaticProps | Supported | Not supported | Use server components | +| _app.js | Supported | layout.js | Different file structure | +| _document.js | Supported | Not needed | Built-in to app dir | + +## Key Configuration Examples + +### Next.js 14 Client React Share +```javascript +{ + react: { + shareScope: 'default', + import: undefined, + singleton: true + } +} +``` + +### Next.js 15 App Dir Client React Share +```javascript +{ + request: 'react', + singleton: true, + shareKey: 'react', + packageName: 'react', + import: 'next/dist/compiled/react', + layer: 'app-pages-browser', + issuerLayer: 'app-pages-browser', + shareScope: 'app-pages-browser', + version: '18.2.0', + requiredVersion: '^18.2.0' +} +``` + +### Next.js 15 RSC React Share +```javascript +{ + request: 'react', + singleton: true, + shareKey: 'react', + import: 'next/dist/server/route-modules/app-page/vendored/rsc/react', + layer: 'rsc', + issuerLayer: 'rsc', + shareScope: 'reactServerComponents', + version: '18.2.0', + requiredVersion: '^18.2.0' +} +``` + +## IssuerLayer Logic + +The `issuerLayer` field determines which modules can import a shared module: + +1. **Undefined issuerLayer**: Module can be imported from any layer (fallback behavior) +2. **Specific issuerLayer**: Module can only be imported from the specified layer +3. **Array issuerLayer**: Module can be imported from any of the specified layers + +Example issuerLayer matching: +- `issuerLayer: 'appPagesBrowser'` - Only app directory client code can import +- `issuerLayer: undefined` - Any layer can import (unlayered) +- `issuerLayer: ['rsc', 'ssr']` - Only RSC or SSR layers can import + +## Additional Server-Side Default Fallback Shares (Next.js 15+) + +These shares exist in the default shareScope without layers, providing fallback behavior for server-side code: + +| Module | shareScope | Notes | +|--------|------------|-------| +| react | default | Import: next/dist/compiled/react | +| react-dom | default | Import: next/dist/compiled/react-dom | +| react/jsx-runtime | default | Import: next/dist/compiled/react/jsx-runtime | +| react/jsx-dev-runtime | default | Import: next/dist/compiled/react/jsx-dev-runtime | +| react/compiler-runtime | default | Import: next/dist/compiled/react/compiler-runtime | +| react-server-dom-webpack/client.edge | default | Import: next/dist/compiled/react-server-dom-webpack/client.edge | +| react-server-dom-webpack/server.edge | default | Import: next/dist/compiled/react-server-dom-webpack/server.edge | +| react-server-dom-webpack/server.node | default | Import: next/dist/compiled/react-server-dom-webpack/server.node | +| react-server-dom-webpack/static.edge | default | Import: next/dist/compiled/react-server-dom-webpack/static.edge | + +## Summary of Key Differences + +### Next.js 14 +- Single share scope: `default` +- Server modules are external (`import: false`) +- Client modules bundle everything (`import: undefined`) +- No layer isolation + +### Next.js 15+ +- Multiple share scopes: `default`, `app-pages-browser`, `reactServerComponents`, `serverSideRendering` +- All modules have explicit import paths +- Complete layer isolation between Pages and App directories +- Vendored React versions for different server contexts (RSC/SSR) +- IssuerLayer controls which code can import which modules +- Support for prefixed shares with `nodeModulesReconstructedLookup` +- Default fallback shares for server-side modules \ No newline at end of file diff --git a/packages/runtime-tools/package.json b/packages/runtime-tools/package.json index db048feb3c..33423e0c1d 100644 --- a/packages/runtime-tools/package.json +++ b/packages/runtime-tools/package.json @@ -12,6 +12,10 @@ "url": "https://github.com/module-federation/core/", "directory": "packages/runtime-tools" }, + "files": [ + "dist/", + "README.md" + ], "publishConfig": { "access": "public" },