How to Integrate App Layout with Next JS 13 Shared Layout / Routing

[NicoPowers]

Hello CloudScape,

I love the idea and design paradigm of Cloudscape, and I really want to use it to build a custom app that I will be making alongside AWS Amplify, and I like the NextJS 13 routing system with their shared layout systems while using their Link component for navigating to other pages (because of the built-in support for pre-fetching, caching, etc.)

I followed the Workshop here, and I have a good understand of Cloudscape now, but I am confused on why there was multiple pages instead of a SPA approach.

How can I integrate the same functionality as that workshop but in a NextJS 13 shared layout system? I don't want to use the routing provided by the Side Navigation or Breadcrumbs, as I would like to use the NextJS 13 Linking instead to ensure combability with server-side fetching, loading, and caching. Is there a way to simply override the routing system used in Cloudscape to better leverage the routing in NextJS 13?

I started trying to create such a shared layout using the App Layout component, but I am getting some errors and not sure what the best way to do it is.

Here is the error I am getting: export { useComponentMetadata, COMPONENT_METADATA_KEY } from './base-component/component-metadata'; SyntaxError: Unexpected token 'export'

Any help would be greatly appreciated.

Thanks

[Al-Dani]

Hi Nico!
Do you transpile components package?
You can check Bundling with Next.js section

[yunghoy]

This is not related to transpile related answer. You may need to say "Cloudscape does not support nextjs13 routing, so you need to avoid cloudscape or use react instead of nextjs13" I guess?

I spent a week personally, but did not get a solution. I decided not use the AppLayout since this component cannot be working with nextjs13. Please provide an answer if you have a solution for the AppLayout and nextjs13 routing conflict issue.

[just-boris]

Hello! @yunghoy I would recommend you opening a new request, describing what you are trying to do and what error you get there separately

[rexwreyes]

I think the issue here might be that Next's app router layout system uses {children} in it's JSX for all the content on the page, but Cloudscape has you include your content as props, and the 2 don't seem compatible. Now while i see this (content as props) done for components like carousels (where the content is usually json from an api and consistent), I'm not sure what the logic is for doing this with all your content. Personally I love Next's app router and the layout system and I would love to get Cloudscape's App Layout working with it, but have not found a way to get it working in a Next layout.tsx file. If anyone has, please share...