Layout Convention naming

In Rasengan.js, to create a layout, you have to create a file that follow the following name pattern when you are using config-based routing system:

[name].layout.js

Note that, it's not required to follow this convention but, it's recommended to do so.

For file-based routing system, you have to create a file named layout.tsx or layout.jsx inside the src/app/_routes folder.

A layout is UI that is shared between routes.

Example

import { LayoutComponent, Outlet } from "rasengan";
 
/*
 * This AppLayout is located inside the app.layout.tsx file
 */
const AppLayout: LayoutComponent = () => {
  return (
    <div>
      <h1>App Layout</h1>
 
      <Outlet />
    </div>
  )
}
 
AppLayout.path = "/";
 
export default AppLayout;

Based on the convention, we have juste replace the [name] by app in the convention name and we got app.layout.jsx.