Skip to content

Commit

Permalink
[docs] Fix broken link to Next.js docs
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Aug 18, 2024
1 parent cbb6f8d commit 0803716
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 7 deletions.
8 changes: 4 additions & 4 deletions docs/data/joy/customization/dark-mode/dark-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -115,21 +115,21 @@ export default class MyDocument extends Document {

### Next.js App Router

To use the Joy UI API with a Next.js project with the App Router, add the following code to the [`app/layout.js`](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#layouts) file in order to prevent flickering:
To use the Joy UI API with a Next.js project with the App Router, add the following code to the [root layout](https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) file in order to prevent flickering:

```jsx title="layout.js"
```jsx title="app/layout.js"
import InitColorSchemeScript from '@mui/joy/InitColorSchemeScript';
import { CssVarsProvider } from '@mui/joy/styles';
import CssBaseline from '@mui/joy/CssBaseline';

export default function RootLayout({ children }) {
export default function RootLayout(props) {
return (
<html lang="en" suppressHydrationWarning={true}>
<body>
<InitColorSchemeScript />
<CssVarsProvider>
<CssBaseline />
{children}
{props.children}
</CssVarsProvider>
</body>
</html>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -197,18 +197,18 @@ The `attribute` has to be the same as the one you set in the `colorSchemeSelecto

### Next.js App Router

Add the following code to the [root layout](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) file:
Add the following code to the [root layout](https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) file:

```jsx title="app/layout.js"
import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';

export default function RootLayout({ children }) {
export default function RootLayout(props) {
return (
<html lang="en">
<body>
{/* must come before the <main> element */}
<InitColorSchemeScript attribute=".mode-%s" />
<main>{children}</main>
<main>{props.children}</main>
</body>
</html>
);
Expand Down

0 comments on commit 0803716

Please sign in to comment.