@@ -173,7 +173,7 @@ export default function App(props) {
)}
)}
- >
+
);
}
```
diff --git a/docs/data/base/guides/next-js-app-router/next-js-app-router.md b/docs/data/base/guides/next-js-app-router/next-js-app-router.md
index 53cbd75777e329..12ad3bb4790114 100644
--- a/docs/data/base/guides/next-js-app-router/next-js-app-router.md
+++ b/docs/data/base/guides/next-js-app-router/next-js-app-router.md
@@ -5,12 +5,12 @@
:::info
Starting fresh on a new App Router-based project?
-Jump right into the code with this [example repo](https://github.com/mui/material-ui/blob/master/examples/base-next-app-router-ts).
+Jump right into the code with [this example: Base UI - Next.js App Router with Tailwind CSS example in TypeScript](https://github.com/mui/material-ui/tree/master/examples/base-next-app-router-tailwind-ts).
:::
## Next.js and React Server Components
-The Next.js App Router implements React Server Components, a [new feature](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#changes-since-v1) introduced in React 18.
+The Next.js App Router implements React Server Components, [an upcoming feature for React](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md).
To support the App Router, currently all components and hooks from Base UI and other MUI libraries are exported with the `"use client"` directive.
@@ -114,7 +114,8 @@ export default function ThemeRegistry(props) {
}
// app/layout.js
-export default function RootLayout({ children }) {
+export default function RootLayout(props) {
+ const { children } = props;
return (
@@ -167,7 +168,7 @@ A common customization method in Base UI is to pass a callback to slots in `slot
export default function Page() {
return (
- <>
+
{/* Next.js won't render this button without 'use-client'*/}
- >
+
);
}
```
diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts
index 007d98a6038f07..f1f6b368718be2 100644
--- a/docs/data/base/pages.ts
+++ b/docs/data/base/pages.ts
@@ -110,7 +110,7 @@ const pages = [
},
{
pathname: '/base-ui/guides/next-js-app-router',
- title: 'Integrating with Next.js App Router',
+ title: 'Next.js App Router',
},
],
},
diff --git a/docs/data/joy/guides/next-js-app-router/next-js-app-router.md b/docs/data/joy/guides/next-js-app-router/next-js-app-router.md
index 73c4d7b685b1a3..26b7af463a6b55 100644
--- a/docs/data/joy/guides/next-js-app-router/next-js-app-router.md
+++ b/docs/data/joy/guides/next-js-app-router/next-js-app-router.md
@@ -5,12 +5,12 @@
:::info
Starting fresh on a new App Router-based project?
-Jump right into the code with this [example repo](https://github.com/mui/material-ui/blob/master/examples/joy-next-app-router-ts).
+Jump right into the code with [this example: Joy UI - Next.js App Router with TypeScript](https://github.com/mui/material-ui/tree/master/examples/joy-next-app-router-ts).
:::
## Next.js and React Server Components
-The Next.js App Router implements React Server Components, a [new feature](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#changes-since-v1) introduced in React 18.
+The Next.js App Router implements React Server Components, [an upcoming feature for React](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md).
To support the App Router, currently all components and hooks from Joy UI and other MUI libraries are exported with the `"use client"` directive.
@@ -92,7 +92,8 @@ export default function ThemeRegistry(props) {
}
// app/layout.tsx
-export default function RootLayout({ children }) {
+export default function RootLayout(props) {
+ const { children } = props;
return (
@@ -116,11 +117,9 @@ import Typography from '@mui/joy/Typography';
export default function Page() {
return (
- <>
-
- Hello World
-
- >
+
+ Hello World
+
);
}
```
@@ -135,19 +134,17 @@ import Sheet from '@mui/joy/Sheet';
export default function Page() {
return (
- <>
-
- {/* Next.js won't render this button without 'use-client' */}
-
-
- >
+
+ {/* Next.js won't render this button without 'use-client' */}
+
+
);
}
```
diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts
index fcb39c47d2c263..637e86ca643e5c 100644
--- a/docs/data/joy/pages.ts
+++ b/docs/data/joy/pages.ts
@@ -158,7 +158,7 @@ const pages = [
},
{
pathname: '/joy-ui/guides/next-js-app-router',
- title: 'Integrating with Next.js App Router',
+ title: 'Next.js App Router',
},
],
},
diff --git a/docs/data/material/guides/next-js-app-router/next-js-app-router.md b/docs/data/material/guides/next-js-app-router/next-js-app-router.md
index 7f6925b7b64eeb..252f46fc14394b 100644
--- a/docs/data/material/guides/next-js-app-router/next-js-app-router.md
+++ b/docs/data/material/guides/next-js-app-router/next-js-app-router.md
@@ -5,12 +5,12 @@
:::info
Starting fresh on a new App Router-based project?
-Jump right into the code with this [example repo](https://github.com/mui/material-ui/blob/master/examples/material-next-app-router-ts).
+Jump right into the code with [this example: Material UI - Next.js App Router example in TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts).
:::
## Next.js and React Server Components
-The Next.js App Router implements React Server Components, a [new feature](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#changes-since-v1) introduced in React 18.
+The Next.js App Router implements React Server Components, [an upcoming feature for React](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md).
To support the App Router, currently all components and hooks from MUI libraries (Material UI, Joy UI, Base UI etc.) are exported with the `"use client"` directive.
@@ -29,7 +29,8 @@ If you're using the default theme, you can add Material UI components to Next.js
```jsx
// app/layout.js - no directives needed
-export default function RootLayout({ children }) {
+export default function RootLayout(props) {
+ const { children } = props;
return (
{children}
@@ -38,10 +39,10 @@ export default function RootLayout({ children }) {
}
// app/page.js - no directives needed
-import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
-import Container from "@mui/material/Container";
-import Typography from "@mui/material/Typography";
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
export default function Home() {
return (
@@ -130,7 +131,8 @@ export default function ThemeRegistry(props) {
}
// app/layout.js
-export default function RootLayout({ children }) {
+export default function RootLayout(props) {
+ const { children } = props;
return (
@@ -189,15 +191,13 @@ import Typography from '@mui/material/Typography';
export default function Page() {
return (
- <>
-
-
-
- Hello World
-
-
-
- >
+
+
+
+ Hello World
+
+
+
);
}
```
@@ -212,19 +212,17 @@ import Container from '@mui/material/Container';
export default function Page() {
return (
- <>
-
- {/* Next.js won't render this button without 'use-client' */}
-
-
- >
+
+ {/* Next.js won't render this button without 'use-client' */}
+
+
);
}
```
diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts
index 840a58ef39c60f..abf4bd69ef0dd9 100644
--- a/docs/data/material/pages.ts
+++ b/docs/data/material/pages.ts
@@ -207,7 +207,7 @@ const pages: MuiPage[] = [
{ pathname: '/material-ui/guides/shadow-dom', title: 'Shadow DOM' },
{
pathname: '/material-ui/guides/next-js-app-router',
- title: 'Integrating with Next.js App Router',
+ title: 'Next.js App Router',
},
],
},
diff --git a/docs/pages/experiments/docs/callouts.md b/docs/pages/experiments/docs/callouts.md
index f58442e61826cd..da231574b456dc 100644
--- a/docs/pages/experiments/docs/callouts.md
+++ b/docs/pages/experiments/docs/callouts.md
@@ -5,19 +5,23 @@
:::info
This is an info callout.
It says, "Here's a bit of extra insight to help you understand this feature."
+Add some **bold text** and a [link](#link).
:::
:::success
This is a success callout.
It says, "Here's an actionable suggestion to help you succeed."
+Add some **bold text** and a [link](#link).
:::
:::warning
This is a warning callout.
It says, "Be careful! Keep this detail in mind to avoid potential issues."
+Add some **bold text** and a [link](#link).
:::
:::error
This is an error callout.
It says, "You will fail if you don't heed this dire warning."
+Add some **bold text** and a [link](#link).
:::
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index ecc1f95bf44350..b67b992ec124a6 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -300,7 +300,7 @@
"/base-ui/guides": "How-to guides",
"/base-ui/guides/working-with-tailwind-css": "Working with Tailwind CSS",
"/base-ui/guides/overriding-component-structure": "Overriding component structure",
- "/base-ui/guides/next-js-app-router": "Integrating with Next.js App Router",
+ "/base-ui/guides/next-js-app-router": "Next.js App Router",
"/material-ui/getting-started-group": "Getting started",
"/material-ui/getting-started": "Overview",
"/material-ui/getting-started/installation": "Installation",
@@ -411,7 +411,7 @@
"/material-ui/guides/content-security-policy": "Content Security Policy",
"/material-ui/guides/right-to-left": "Right-to-left",
"/material-ui/guides/shadow-dom": "Shadow DOM",
- "/material-ui/guides/next-js-app-router": "Integrating with Next.js App Router",
+ "/material-ui/guides/next-js-app-router": "Next.js App Router",
"/material-ui/experimental-api": "Experimental APIs",
"/material-ui/experimental-api/classname-generator": "ClassName generator",
"CSS theme variables": "CSS theme variables",
@@ -505,6 +505,6 @@
"/joy-ui/guides/overriding-component-structure": "Overriding component structure",
"/joy-ui/guides/using-joy-ui-and-material-ui-together": "Joy UI and Material UI together",
"/joy-ui/guides/using-icon-libraries": "Using icon libraries",
- "/joy-ui/guides/next-js-app-router": "Integrating with Next.js App Router"
+ "/joy-ui/guides/next-js-app-router": "Next.js App Router"
}
}