• Documentation
  • /
  • Next.js Firebase
  • /
  • Route Shell

Route Shell

The Route Shell Component is a layout wrapper for your application's pages.

const Dashboard = () => {
  return (
    <RouteShell title={'Dashboard'}>
        <title key={'dashboard'}>Dashboard</title>

        // Dashboard Content

export default Dashboard;

export async function getServerSideProps(ctx: GetServerSidePropsContext) {
  return await withAppProps(ctx);


This component accepts two properties

  • title: the title of the page
  • style: 'topHeader', 'sidebar', or 'custom'
interface Props {
    title: string;
    style: 'topHeader' | 'sidebar' | 'custom'


  • It handles sign-out redirects automatically when the user signs out
  • Sets the page title automatically
  • It provides with 3 layout style configurations:
    • Top Menu
    • Side Menu
    • Custom


Top Menu

In this style, the menu of the application is horizontal, and the whole content is centered.

Side Menu

In this style, the menu of the application is placed in a left-hand sidebar.


In this case, no layout is provided; it will simply wrap the children, and it will be the consumer's responsibility to set up the layout.

Stay informed with our latest resources for building a SaaS

Subscribe to our newsletter to receive updatesor