diff --git a/apps/website-new/docs/en/guide/framework/nextjs.mdx b/apps/website-new/docs/en/guide/framework/nextjs.mdx index 7c73ac3ce68..9c4ed53b465 100644 --- a/apps/website-new/docs/en/guide/framework/nextjs.mdx +++ b/apps/website-new/docs/en/guide/framework/nextjs.mdx @@ -1,3 +1,7 @@ +import { Badge } from '@theme'; + +
+ # Next.js This plugin enables Module Federation on Next.js @@ -5,94 +9,12 @@ This plugin enables Module Federation on Next.js ## Supports - next ^14 || ^13 || ^12 -- SSR included! +- Server-Side Rendering +- Pages router I highly recommend referencing this application which takes advantage of the best capabilities: https://github.com/module-federation/module-federation-examples -## This project supports federated SSR - -## Whats shared by default? - -Under the hood we share some next internals automatically -You do not need to share these packages, sharing next internals yourself will cause errors. - -
- See DEFAULT_SHARE_SCOPE: - -```ts -export const DEFAULT_SHARE_SCOPE: SharedObject = { - 'next/dynamic': { - eager: false, - requiredVersion: false, - singleton: true, - import: undefined, - }, - 'next/head': { - eager: false, - requiredVersion: false, - singleton: true, - import: undefined, - }, - 'next/link': { - eager: true, - requiredVersion: false, - singleton: true, - import: undefined, - }, - 'next/router': { - requiredVersion: false, - singleton: true, - import: false, - eager: false, - }, - 'next/script': { - requiredVersion: false, - singleton: true, - import: undefined, - eager: false, - }, - react: { - singleton: true, - requiredVersion: false, - eager: false, - import: false, - }, - 'react-dom': { - singleton: true, - requiredVersion: false, - eager: false, - import: false, - }, - 'react/jsx-dev-runtime': { - singleton: true, - requiredVersion: false, - import: undefined, - eager: false, - }, - 'react/jsx-runtime': { - singleton: true, - requiredVersion: false, - eager: false, - import: false, - }, - 'styled-jsx': { - requiredVersion: false, - singleton: true, - import: undefined, - eager: false, - }, - 'styled-jsx/style': { - requiredVersion: false, - singleton: true, - import: undefined, - eager: false, - }, -}; -``` - -
- ## Requirement I set `process.env.NEXT_PRIVATE_LOCAL_WEBPACK = 'true'` inside this plugin, but its best if its set in env or command line export. @@ -314,13 +236,83 @@ class MyDocument extends Document { Hot reloading Express.js required additional steps: https://github.com/module-federation/universe/blob/main/packages/node/README.md -## Contact +## Whats shared by default? -If you have any questions or need to report a bug +Under the hood we share some next internals automatically +You do not need to share these packages, sharing next internals yourself will cause errors. - - {' '} - Reach me on Twitter @ScriptedAlchemy - +
+ Click to view `DEFAULT_SHARE_SCOPE`: -Or join this discussion thread: https://github.com/module-federation/module-federation-examples/discussions/978 +```ts +export const DEFAULT_SHARE_SCOPE: SharedObject = { + 'next/dynamic': { + eager: false, + requiredVersion: false, + singleton: true, + import: undefined, + }, + 'next/head': { + eager: false, + requiredVersion: false, + singleton: true, + import: undefined, + }, + 'next/link': { + eager: true, + requiredVersion: false, + singleton: true, + import: undefined, + }, + 'next/router': { + requiredVersion: false, + singleton: true, + import: false, + eager: false, + }, + 'next/script': { + requiredVersion: false, + singleton: true, + import: undefined, + eager: false, + }, + react: { + singleton: true, + requiredVersion: false, + eager: false, + import: false, + }, + 'react-dom': { + singleton: true, + requiredVersion: false, + eager: false, + import: false, + }, + 'react/jsx-dev-runtime': { + singleton: true, + requiredVersion: false, + import: undefined, + eager: false, + }, + 'react/jsx-runtime': { + singleton: true, + requiredVersion: false, + eager: false, + import: false, + }, + 'styled-jsx': { + requiredVersion: false, + singleton: true, + import: undefined, + eager: false, + }, + 'styled-jsx/style': { + requiredVersion: false, + singleton: true, + import: undefined, + eager: false, + }, +}; +``` + +