Can App Layout be used in NextJs layout file? #1809

rexwreyes · 2023-12-14T14:53:35Z

rexwreyes
Dec 14, 2023

When App Layout has you include your content as props how do you get it working on a page that has you include your content as { children } ? Is this just not possible?

Answered by Al-Dani

Jan 3, 2024

Posting here for posterity, as it was discussed in more details in a separate request.

App Layout cannot be used in the server part of the layout file, because it uses hooks that wouldn't work on a server.
You would have to create a client-side wrapper where you can pass children to the content slot:

// client-layout.tsx
"use client";
import { AppLayout } from "@cloudscape-design/components";

export default function ClientLayout(props: { children: React.ReactNode }) {
  return <AppLayout content={props.children} />;
}

and use it in the layout:

// layout.tsx
...
import ClientLayout from './client-layout';
..
export default function RootLayout({ children }: { children: React.ReactNode }) …

View full answer

Al-Dani · 2023-12-18T11:21:20Z

Al-Dani
Dec 18, 2023
Maintainer

Hey!
You can pass children to the content slot of the AppLayout:

<AppLayout
   ...
   content={props.children}
/>

0 replies

Al-Dani · 2024-01-03T17:12:03Z

Al-Dani
Jan 3, 2024
Maintainer

Posting here for posterity, as it was discussed in more details in a separate request.

App Layout cannot be used in the server part of the layout file, because it uses hooks that wouldn't work on a server.
You would have to create a client-side wrapper where you can pass children to the content slot:

// client-layout.tsx
"use client";
import { AppLayout } from "@cloudscape-design/components";

export default function ClientLayout(props: { children: React.ReactNode }) {
  return <AppLayout content={props.children} />;
}

and use it in the layout:

// layout.tsx
...
import ClientLayout from './client-layout';
..
export default function RootLayout({ children }: { children: React.ReactNode }) {
  ....
  return (
    <html lang="en">
      ....
      <body>
        <ClientLayout>{children}</ClientLayout>
      </body>
    </html>
  )
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can App Layout be used in NextJs layout file? #1809

{{title}}

Replies: 2 comments

{{title}}

{{title}}

Select a reply

Can App Layout be used in NextJs layout file? #1809

rexwreyes Dec 14, 2023

Replies: 2 comments

Al-Dani Dec 18, 2023 Maintainer

Al-Dani Jan 3, 2024 Maintainer

rexwreyes
Dec 14, 2023

Al-Dani
Dec 18, 2023
Maintainer

Al-Dani
Jan 3, 2024
Maintainer