I have layout.tsx page in root app folder. Its path is frontend/app/layout.tsx
import Navbar from './Navbar'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={`${inter.className} mx-5`} >
<Navbar />
<main>
{children}
</main>
</body>
</html>
)
}
And then I have the layout in folder which is authLayout. It's path is frontend/app/(auth)/layout.tsx. I also have two routes in auth folder login and register. To which I would like to implement authLayout so that I don't have navbar in login and register page
export default function AuthLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<div className="flex items-center justify-center w-full flex-1 px-20 text-center bg-grey-400">
{children}
</div>
)
}
Am I doing it the wrong way with using layout in the folder or my routing is wrong or the process I am trying to do is wrong? P.S. I know the method of checking if it is logged in or not I want to know if its possible using layout.tsx