Exclude page from using root layout

[timber nova]

Hi @lethal juniper. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information provided in the extracts, you can use the concept of Parallel Routes in Next.js to render a specific page without using the root layout.

In the case of a /login page, you can create a @auth slot that renders a <Modal> component when navigating to /login. Here's an example:

// app/layout.tsx
export default async function Layout(props: {
 // ...
 auth: React.ReactNode
}) {
 return (
 <>
 {/* ... */}
 {props.auth}
 </>
 )
}

// app/@auth/login/page.tsx
import { Modal } from 'components/modal'
 
export default function Login() {
 return (
 <Modal>
 <h1>Login</h1>
 {/* ... */}
 </Modal>
 )
}

To ensure that the contents of the modal don't get rendered when it's not active, you can create a default.js file that returns null.

// app/@auth/default.tsx
export default function Default() {
 return null
}

This way, the /login page will be rendered independently of the root layout.

For more details, you can refer to the Parallel Routes (https://nextjs.org/docs/app/building-your-application/routing/parallel-routes) section in the Next.js documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: