[docs] Fix broken link to Base UI Next.js App Router (mui#37973)

oliviertassinari · Jul 16, 2023 · 4036eb6 · 4036eb6
1 parent e6b4c22
commit 4036eb6
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 66 deletions.
diff --git 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 (
-    <>
+    <React.Fragment>
       <div {...getRootProps()}>
         <input {...getInputProps()} />
       </div>
@@ -65,7 +65,7 @@ export default function App() {
           ))}
         </ul>
       )}
-    </>
+    </React.Fragment>
   );
 }
 ```
@@ -158,7 +158,7 @@ export default function App(props) {
   const rootRef = useForkRef(ref, setAnchorEl);
 
   return (
-    <>
+    <React.Fragment>
       <div {...getRootProps()} ref={rootRef}>
         <input {...getInputProps()} />
       </div>
@@ -173,7 +173,7 @@ export default function App(props) {
           )}
         </Popper>
       )}
-    </>
+    </React.Fragment>
   );
 }
 ```

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
@@ -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 (
     <html lang="en">
       <body>
@@ -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 (
-    <>
+    <React.Fragment>
       {/* Next.js won't render this button without 'use-client'*/}
       <Button
         slotProps={{
@@ -189,7 +190,7 @@ export default function Page() {
       >
         Return
       </Button>
-    </>
+    </React.Fragment>
   );
 }
 ```

diff --git 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
@@ -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 (
     <html lang="en">
       <body>
@@ -116,11 +117,9 @@ import Typography from '@mui/joy/Typography';
 
 export default function Page() {
   return (
-    <>
-      <Sheet variant="outlined">
-        <Typography fontSize="sm">Hello World</Typography>
-      </Sheet>
-    </>
+    <Sheet variant="outlined">
+      <Typography fontSize="sm">Hello World</Typography>
+    </Sheet>
   );
 }
 ```
@@ -135,19 +134,17 @@ import Sheet from '@mui/joy/Sheet';
 
 export default function Page() {
   return (
-    <>
-      <Sheet variant="outlined">
-        {/* Next.js won't render this button without 'use-client' */}
-        <Button
-          variant="outlined"
-          onClick={() => {
-            console.log('handle click');
-          }}
-        >
-          Submit
-        </Button>
-      </Sheet>
-    </>
+    <Sheet variant="outlined">
+      {/* Next.js won't render this button without 'use-client' */}
+      <Button
+        variant="outlined"
+        onClick={() => {
+          console.log('handle click');
+        }}
+      >
+        Submit
+      </Button>
+    </Sheet>
   );
 }
 ```

diff --git 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
@@ -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 (
     <html lang="en">
       <body>{children}</body>
@@ -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 (
     <html lang="en">
       <body>
@@ -189,15 +191,13 @@ import Typography from '@mui/material/Typography';
 
 export default function Page() {
   return (
-    <>
-      <Container maxWidth="lg">
-        <Box>
-          <Card raised>
-            <Typography variant="h2">Hello World</Typography>
-          </Card>
-        </Box>
-      </Container>
-    </>
+    <Container maxWidth="lg">
+      <Box>
+        <Card raised>
+          <Typography variant="h2">Hello World</Typography>
+        </Card>
+      </Box>
+    </Container>
   );
 }
 ```
@@ -212,19 +212,17 @@ import Container from '@mui/material/Container';
 
 export default function Page() {
   return (
-    <>
-      <Container maxWidth="lg">
-        {/* Next.js won't render this button without 'use-client' */}
-        <Button
-          variant="text"
-          onClick={() => {
-            console.log('handle click');
-          }}
-        >
-          Submit
-        </Button>
-      </Container>
-    </>
+    <Container maxWidth="lg">
+      {/* Next.js won't render this button without 'use-client' */}
+      <Button
+        variant="text"
+        onClick={() => {
+          console.log('handle click');
+        }}
+      >
+        Submit
+      </Button>
+    </Container>
   );
 }
 ```

diff --git 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
@@ -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
@@ -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"
   }
 }