Next.js 14 Tutorial - 16 - Route Group Layout

[@ferdousahmed7024]

Bro explaining stuff within 2 minutes and it's better than other long videos. How's this even possible? :o

[@PalrajG-b9t]

You are providing me with confidence when I'm feeling low.

[@BiggieBigM]

your an amazing human, thanks for making this for free, its defiantly worth more than money in our eyes

[@dawitderebie7227]

I came from react-router-dom outlets and was looking for an example of this concept in Next and FINALLY, I got it here. I really appreciate this video. Thank you very much. 🙌🙌🙌🙌

[@rishibakshi2004]

Broo my scenario is exactly the same

[@pranavghate5534]

Youre saving my job man

[@aiwithhamzanaeem]

Thanks for your work. My concepts are getting clear with each passing tutorial. Stay blessed.

[@akashshinde4261]

Hi Vishwas, I believe, we should get our hands dirty with a basic project and use each and every topic. It would be very helpful for all of us to understand end to end flow. I understand you might have the time constraint for this but if you can then it would be great.....

[@kdev_007]

Thank you very much. Is there a way to remove the header & footer in the (with-auth-layout) group's layout.tsx file?

[@ranaimranahmed2532]

Great videos please a project on next that cover all topics in this next series plzz

[@sammtanX]

Sir, but how can I make everything inside (with-auth-layout) to avoid using layout from app/layout.tsx?

[@emperor108]

you can do like this
(with-auth-layout)
(other-layout)
now add your page.jsx in your (other-layout) folder and also create one nested layout inside (other-layout).
Now you have nested two layouts one is for (with-auth-layout) and another for (other-layout).
Now you have to create your root layout which is nothing but only HTML and children init. make sure don't add any special component here only HTML and children prop.
Hope this will work for you :)

[@sammtanX]

@@emperor108 very thoughtful, thankyou!

[@yasinmahmudmazid-bl3fz]

@Codevolation how would you remove the main navbar on a login page for example? Since the Rootlayout is shared throughout the application...

[@harsh_g2543]

export default function RootLayout(context) {
const { children } = context;
const currentRoute = children.props.childPropSegment;
console.log(children);//dashboard
return (


{!currentRoute.startsWith("dashboard") &&
!currentRoute.startsWith("__DEFAULT__") ? (

root layout

) : (
""
)}
{children}


);
}

[@HamzaZaheer-b2s]

Learning Next js so much fun with you
i have question how can i hide or not use any layout in login, signup or forgot password page ???

[@xboy2374]

bro use conditional rendering

[@ranaimranahmed2532]

Ur videos r vry hlpfl plz make a project at the end of avery series that covers all topics of such series

[@RahulPal-tp3wv]

Question: We still have Header and Footer for register and signup. No one places Header and Footer on those pages. How can we ignore main layout?

[@abeekudjokoto3887]

What if you dont want the root layout to be inside the new layout you have?

[@harsh_g2543]

export default function RootLayout(context) {
const { children } = context;
const currentRoute = children.props.childPropSegment;
console.log(children);//dashboard
return (


{!currentRoute.startsWith("dashboard") &&
!currentRoute.startsWith("__DEFAULT__") ? (

root layout

) : (
""
)}
{children}


);
}

[@jerrykodes]

In this case I'll rather convert a root layout as well in the route group.
Like I have seen in projects
For auth pages they have (auth) group and for rest of the app (site) group
Eventually not having a root layout

[@riyad-appscode]

Great Video 👍

[@usamarehmanyousaf2010]

I've a question.
1. if we are in app directory, and we have a group folder (auth), which contains login, register folders etc.
2. we have a common layout in the base layout.jsx file, which is for sure applying on the auth files as well, it contains the header and footer, and some other confidential routes and information, for example for dashboard.
3. so how to apply that layout only on the routes other than auth routes.
4. if you say that I should make a dashboard folder and make a different layout for dashboard, that's not the case, my routes should be starting from "/".
5. again, I don't want to apply my base layout on auth directories, because there's no sense to show top bar or sidebar or hamburger menu there.
please answer.

[@lucaslimadiasmessias5456]

You can do this way:
app
(logged-area)
layout.tsx
products
page.tsx
posts
page.tsx
(auth)
login
page.tsx
register
page.tsx
this way, only the logged-area pages gonna have the layout applied.
Sorry for bad english, i'm from Brazil

[@indimerz]

if i dont want to show navbar and footer in auth layout, how can i do that?

[@antivirus401]

how to hide layout of the app folder in auth page?

[@Raghav__--]

We can set condition to specific paths...may be

[@harsh_g2543]

export default function RootLayout(context) {
const { children } = context;
const currentRoute = children.props.childPropSegment;
console.log(children);//dashboard
return (


{!currentRoute.startsWith("dashboard") &&
!currentRoute.startsWith("__DEFAULT__") ? (

root layout

) : (
""
)}
{children}


);
}

[@willesalo8930]

I have a question. I have my rootlayout which displays my nav, children(the page.tsx) and my footer. Now when the user signs in to my page I want to send them to the dashboard. Lets say /app/dashboard/page.tsx. How can i render a different layout for these users. For example i want them to see another navbar. Right now next send the rootlayout with the "old" nav and footer, to my new /app/dashboard/DashboardLayout.tsx which means i'm gonna end up with two navbars. Is there any solution to this?

[@aryanpatil7239]

same issue , solved or not ?

[@omarrayes2281]

But
Root Layout is still show with auth . so if I want to hide root layout should put it in new Group Route , Right ?

[@abouyousuf00]

When I trying to rename the folder auth to (auth) it throws an error says operation is not permitted! Any idea to solve the issue ?? Regards

[@AHMED-oi2vz]

stop local server and then change file name

[@hggnomm]

I should have found your series sooner.

[@abhirambasak9554]

route groups is not working on my case. When i trying to access /blog/abc its showing page not found. Here is my folder structure -
app/
├──(sidebar-layout)
│ └── (home)
│ └── @editorspack
│ └── loading.js
│ └── page.js
│ └── @latestpost
│ └── loading.js
│ └── page.js
│ └── @trending
│ └── loading.js
│ └── page.js
│ └── loading.js
│ └── layout.js
│ └── page.js
│ └── @aboutme
│ └── loading.js
│ └── page.js
│ └── @celebration
│ └── loading.js
│ └── page.js
│ └── @inspiration
│ └── loading.js
│ └── page.js
│ └── @newsletter
│ └── loading.js
│ └── page.js
│ └── @popularrecent
│ └── loading.js
│ └── page.js
│ └── @tagclouds
│ └── loading.js
│ └── page.js
│ └── @topics
│ └── loading.js
│ └── page.js
│ └── blog
│ └── [slug]
│ └── loading.js
│ └── page.js
│ └── layout.js
│ └── loading.js
├── about/
│ └── page.js
└── blogs/
└── page.js

[@loribryant4999]

How to get rid of header and footer in login page and in register page?

[@dmitriz6496]

Thank you for the video, but I wasn't able to rename with-auth-layout to (with-auth-layout). I had to stop the servers because Node.js in this project somehow blocked the renaming of folders. I tried to rename it in different IDEs and on different computers, and everywhere I got the same error: access denied. I find it funny that a company that creates something as complex as Next.js can't solve such a simple issue like renaming folders in a project.

[@shortflicks83]

Waiting for next video kindly upload fast and share a schedule with us so we know when you are going to upload next video

[@JackHsieh0715]

great video

[@dhanushkumarsivaji]

Hi Vishwas, could you please add the demo code

[@rishiraj2548]

Thanks

[@Riot-Mafia-UP32]

Thanks!

[@muhammadazam5599]

Waiting for Next .....

[@adetunjiigbatayo8535]

Thank you!!!!

[@neerajrajpal]

export default function AuthLayout({
children,
}: {
children: React.ReactNode;
}) {
return (

Inner layout
{children}

);
}

[@cuneytdonmez214]

best

[@feliz3331]

"with-auth-layout" sound like "without-layout"

[@prajwalparashkar460]

Great video 👍