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,
+ },
+};
+```
+
+