From 4036eb60b45c260e9f49904f1b54f8c947a944d2 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 16 Jul 2023 13:35:02 +0200 Subject: [PATCH] [docs] Fix broken link to Base UI Next.js App Router (#37973) --- .../components/autocomplete/autocomplete.md | 8 +-- .../next-js-app-router/next-js-app-router.md | 11 ++-- docs/data/base/pages.ts | 2 +- .../next-js-app-router/next-js-app-router.md | 39 ++++++------- docs/data/joy/pages.ts | 2 +- .../next-js-app-router/next-js-app-router.md | 58 +++++++++---------- docs/data/material/pages.ts | 2 +- docs/pages/experiments/docs/callouts.md | 4 ++ docs/translations/translations.json | 6 +- 9 files changed, 66 insertions(+), 66 deletions(-) diff --git a/docs/data/base/components/autocomplete/autocomplete.md b/docs/data/base/components/autocomplete/autocomplete.md index 588ba50495f82a..8be9194c3418ba 100644 --- a/docs/data/base/components/autocomplete/autocomplete.md +++ b/docs/data/base/components/autocomplete/autocomplete.md @@ -54,7 +54,7 @@ export default function App() { }); return ( - <> +
@@ -65,7 +65,7 @@ export default function App() { ))} )} - + ); } ``` @@ -158,7 +158,7 @@ export default function App(props) { const rootRef = useForkRef(ref, setAnchorEl); return ( - <> +
@@ -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" } }