How to create multiple layouts in Next js? - reactjs

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>
)
}