00:00:02 Now we can create the routes for our two authentication pages.

00:00:06 We can do that by creating two new folders in the app folder.

00:00:10 First one will be called sign-in and the second one will be called sign-up.

00:00:17 Within both of these we'll create a new page.tsx within which I'll run RAFCE and I'll rename it to sign in.

00:00:28 I'll repeat the same thing for sign up by creating a new page.tsx, running RAFCE and renaming it to sign up.

00:00:38 There we go.

00:00:39 So now we have two new routes.

00:00:42 There are two things happening now.

00:00:44 Even if you head over to forward slash sign in, you won't be able to see the route name because it's going below the navbar.

00:00:52 And second thing is that we don't even want to see a navbar on the authentication pages.

00:00:57 And how do I know that?

00:00:58 Because it's shown in the design.

00:01:01 If you head over all the way to the right side of the design, you'll see our authentication pages, specifically these two,

00:01:09 the create your account and the sign in.

00:01:13 What a great yet simple design.

00:01:15 But as you can see, even though all the other pages have the navbar, our auth pages are completely empty.

00:01:21 They don't have it.

00:01:22 So what do you think?

00:01:24 How can we make sure that the navbar shows in all of the other pages besides the auth pages?

00:01:30 We can do it by using the concept known as route groups.

00:01:34 Route groups allow you to nest additional folders without mapping them to URL paths.

00:01:41 And what they allow you to do is to organize your routes into more groups based on section, intent, or team.

00:01:48 And more importantly, they enable you to nest different layouts, allowing you to have a completely different layout for a different route group.

00:01:57 The way in which you create them is by simply wrapping a folder in parentheses.

00:02:01 So let's give it a shot by creating a new folder in the app folder and I'll name it parentheses auth.

00:02:08 Now I'll move both the sign in route and the sign up route into the auth folder.

00:02:13 Now I'll create a second route group by creating a new folder and I'll call it root, the root of our application.

00:02:21 And in there, I'll put our existing page.tsx.

00:02:25 Now, as I've just told you, each route groups allows us to have its own layout.

00:02:30 So let's create two new layouts.

00:02:33 I'll create a new file in the Auth folder called layout.tsx.

00:02:38 and I'll create another one in the root route group, and I'll call it layout.dsx.

00:02:44 It has to be called that way to follow our convention.

00:02:46 Now, we can move the navbar import from the general layout right here, which contains all of the general information about our app,

00:02:55 which we want to show both in the auth routes and the root routes, but we don't want to show the navbar.

00:03:01 So let's copy it from here, or rather remove it from here, and then move it over to our root layout by creating a new layout.

00:03:10 We can do that by running RAFCE.

00:03:13 We can name this root layout.

00:03:16 Every layout has to get children as a prop, and it'll be of a type.

00:03:21 Children is a React node, which we can import from React.

00:03:27 Then we can return everything in a main element.

00:03:30 We can render the navbar right here at the top and right below it, we can render all the children.

00:03:37 Let's copy this entire layout and also put it in the auth layout, but this time we will remove the navbar and just keep the children right here.

00:03:45 And in the auth layout, make sure to rename it from root layout to auth layout.

00:03:54 If you do that, you'll notice that now we don't have a name mismatch and no error is happening.

00:03:58 So just to recap, we now have our app which contains two different route groups.

00:04:05 Outside of those route groups, we have a layout which contains all the general information about our application that we want to show and share with all

00:04:13 the route groups, both auth and root.

00:04:16 For example, theme provider.

00:04:18 We want to make sure that our theme persists on both auth and homepages.

00:04:23 Then, within the root route, we have a page.tsx, which is going to act as our homepage.

00:04:28 We can see it by going to localhost 3000. Or rather, we can't because it's hidden behind the navbar.

00:04:35 But we know that it's there.

00:04:37 Now, why is the navbar showing here?

00:04:39 Because root is referring to the layout within the root where we do, in fact, render a navbar.

00:04:45 But now, if you manually switch over to something like sign-in, you'll see that there is no navbar.

00:04:53 There's just a sign-in page.

00:04:55 Why is that?

00:04:55 Well, because the layout right here doesn't contain the navbar.

00:04:59 The only thing it does contain is the sign-in page.

00:05:02 I hope this makes sense.

00:05:03 Essentially, we just use the route groups to group and organize our code.

00:05:08 Another thing I want to mention is that route groups are not reflected in the URL.

00:05:12 So to get to the sign in, you don't have to say forward slash auth, forward slash sign in, as you usually would with a normal folder.

00:05:20 That's exactly why we use the route groups using the parentheses so we can just head over to sign in and the page will automatically be there.

00:05:27 Pretty cool, right?

00:05:29 You just created your auth routes for this application and learned a bit more about implementing route groups in Next.js in practice.

00:05:37 Great work.