1. Make your root `app/layout.tsx` shared for the app as basic as:
```js
export default function RootLayout({children}) {
return (
<html>
<body>{children}</body>
</html>
)
}
```
2. Create a folder with `(this-structure)` in app then add `login` and `register` to it. This is called Route Group.
```markdown
app/
- layout.tsx <-- root layout
- (auth)/
- layout.tsx <-- auth layout
- login/page.tsx
- register/page.tsx
- ...
- overview
- layout.tsx <-- app layout
- page.tsx
- about/
- page.tsx
- ...
```
Learn more about route group:
https://nextjs.org/docs/app/building-your-application/routing/route-groups
1. Make your root `app/layout.tsx` as basic as:
```js
export default function RootLayout({children}) {
return (
<html>
<body>{children}</body>
</html>
)
}
```
2. In your `app/login/layout.tsx`: make the layout for the login page without `<html>` and `<body>` tags.
3. Wrap your rest app in a route group:
```markdown
app/
- layout.tsx <-- root layout
- login/
- layout.tsx <-- login layout
- page.tsx
- ...
- (any-name-for-the-group)
- layout.tsx <-- app layout
- page.tsx
- about/
- page.tsx
- ...
```
Learn more about route group:
https://nextjs.org/docs/app/building-your-application/routing/route-groups
