How to create multiple layouts in Next js?

Question

I want to create another layout on my nextjs app. I saw this method somewhere, on adding multiple/nested layout in next js. The problem is I can't make this work, there's always this error:

Error: MyApp(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Now this is my code:

My _app.js

import Layout from "./../components/Layout";

function MyApp({ Component, pageProps }) {

    const getLayout = Component.pageLayout || ((page) => <Layout>{page}</Layout>);

    return getLayout(<Component {...pageProps} />);

}

export default MyApp;

This is my Layout

import React, { Fragment, useState, useEffect, useRef } from "react";
import { useRouter } from 'next/router';
import NavBar from "./../NavBar";
import MidNavBar from "./../MidNavBar";
import Banner from "./../Banner";

const Layout = ({ children, navBarRefProps }) => {

    const navBarRef = useRef();

    const router = useRouter();

    const navBarRefPropsHandle = (props) => {
        navBarRef.current = props.current;
        navBarRefProps(navBarRef.current);
    }

    return(
        <Fragment>
            <div className="wrapper">
                <NavBar navBarRefProps={ navBarRefPropsHandle } />
                <div className="inner_wrapper">
                    <Banner/>
                    {
                        router.pathname !== "/" ?
                            <MidNavBar midNavBarRefProps = {midNavBarRefPropsHandle} dummyRefProps={dummyRefPropsHandle}/>
                        :
                        ""
                    }
                    { children }
                </div>
            </div>
        </Fragment>
    )

}

This is my AnotherLayout

const AnotherLayout = ({ children }) => {
    return(
        <Fragment>
            <main>
                <div>
                    <aside className="menu">
                        <div className="menu_header">
                            <div className="menu_title">
                                <span>
                                    Panel
                                </span>
                                <button onClick={logoutHandle}>
                                    logout
                                </button>
                            </div>
                            <button className="burger" onClick={openMenuHandle}>
                                <div className="burger-one">

                                </div>
                                <div className="burger-two">

                                </div>
                                <div className="burger-three">

                                </div>
                            </button>
                        </div>
                        <div ref={menuBodyRef} className="menu_body">
                            <ul>
                                <li>
                                    <Link href={ url + "/rooms" }>
                                        <div>
                                        </div>
                                        News
                                    </Link>
                                </li>
                                <li>
                                    <Link href={ url + "/events" }>
                                        <div>
                                        </div>
                                        Events
                                    </Link>
                                </li>
                                <li>
                                    <Link href={ url + "/categories" }>
                                        <div>
                                            <i className="fas fa-snowboarding"></i>
                                        </div>
                                        Activities
                                    </Link>
                                </li>
                            </ul>
                        </div>
                    </aside>
                    <section className="container_panel">
                        { children }
                    </section>
                </div>
            </main>
        </Fragment>
    )    
}

export default AnotherLayout;

And this is my index page

import React, { Fragment, useState, useEffect, useRef } from "react";
import AnotherLayout from "./../../../../components/AnotherLayout";

const Panel = () => {

    // a lot of codes here.....

    return(
        <Fragment>
            <section>
                <div>
                    <div>
                        <h1><span>Rooms</span> Panel</h1>
                    </div>
                    <div className="container_table">
                        <table>
                            <thead>
                                <tr>
                                    <td>Rooms</td>
                                    <td>
                                        <div>
                                            <input type="search" name="search" placeholder="search"/>
                                        </div>
                                    </td>
                                    <td className="col_add">
                                        <button>
                                            add 
                                            rooms
                                        </button>
                                    </td>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    rooms.map(room => {
                                        return(
                                            <tr key={room._id}>
                                                <td colSpan="2">
                                                    <button>{room.title}</button>
                                                </td>
                                                <td className="ud">
                                                    <button className="edit">
                                                        edit
                                                    </button>
                                                    <button className="delete">
                                                        delete
                                                    </button>
                                                </td>
                                            </tr>
                                         )
                                    })
                                }
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td>

                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </section>
        </Fragment>
    )
}

Panel.getLayout = (page) => {
    <AdminLayout>
        { page }
    </AdminLayout>
}

export default Panel;

Thank you!.

Answer 1

Solved this by adding return()

Panel.getLayout = (page) => {
    return(
        <AdminLayout>
            { page }
        </AdminLayout>
    )
}