Skip to main content
Layouts allow you create a structure that is applied to a set of routes, for instance you can have a dashboard layout that is applied to all your dashboard routes. Layouts allow you write components like your headers, footers and sidebars once and apply them wherever necessary

​
Creating a Layout

Hana automatically detects your layout component by looking for a _layout.tsx file in the pages directory. The _layout.tsx file should export a React component that will be rendered while a page is being fetched.
src/pages/_layout.tsx
const Layout: React.FC<React.PropsWithChildren> = ({ children }) => {
  return (
    <div>
      <header>Header</header>
      <main>
        <div>{children}</div>
      </main>
      <footer>Footer</footer>
    </div>
  );
};

export default Layout;

​
Scoped Layout Components

Hana allows you to have multiple _layout.tsx files. For example, you can have a _layout.tsx file in the pages/users directory that will be used for all pages in the /users directory. 
|- pages
  |- index.tsx
  |- _layout.tsx
  |- users
    |- _layout.tsx
Considering the directory structure above, the _layout.tsx file in the pages/users directory will be used for all pages in the /users directory. The _layout.tsx file in the pages directory will be used for all other pages.

​
Loading Layouts

You can also create layouts that show up only a page is being loaded by adding a _loading file. This uses React’s Suspense API under the hood, so you can use it with any asynchronous data fetching library.
src/pages/_loading.tsx
const Loading: React.FC = () => {
  return <div>Loading...</div>;
};

export default Loading;
And just like with _layout files, your loading layout files can also be scoped to particular folders, and you can have as many as you need in your application 
|- pages
  |- index.tsx
  |- _loading.tsx
  |- users
    |- _loading.tsx