Skip to content
Discussion options

rexwreyes
Dec 14, 2023

You must be logged in to vote
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

Replies: 2 comments

Comment options

Al-Dani
Dec 18, 2023

You must be logged in to vote
0 replies
Comment options

Al-Dani
Jan 3, 2024

You must be logged in to vote
0 replies
Answer selected by Al-Dani
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
2 participants
@rexwreyes @Al-Dani