Problem:
While making a project in NextJs you sometimes need specific components which you want to render within your route path. For example: You want to show a Header and a Sidebar along with the data required on the specific route path. To do that you might add those Components in /app/layout.tsx like this:
import Header from "./components/Header";
import Sidebar from "./components/Sidebar";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<Header />
<div className="w-full h-[calc(100%-56px)] flex flex-nowrap justify-start items-start ">
<Sidebar />
{children}
</div>
</body>
</html>
);
}
You might also want to add a Login and SignUp page to your NextJs project to authenticate a user. Then you will get a folder layout like this:
But if we make a folder named login and create a page.tsx file in it and go the the "/login" path, there you see that Header and Sidebar are present as well, which is not necessary here.
The preview for such case would be something like this:
Now you can say that we can make folders for each route and add a layout file in which the Header and Sidebar components can be added. You can do this but it will increase the number of layout files required and also there will be a repetitive code in each such layout file. You will also run into a situation where you want to add Header and Sidebar components to page on your "/" path. And if you want to add these components you will have to add them to the /app/layout.tsx file, then these components will also appear on your Login and SignUp pages.
So how do we solve this problem?
Solution:
To solve this problem we have learn about Route Groups which you can read more about here.
NextJs Route Groups in App Routing are folders which act as a group of similar type of contents and the folder name is enclosed in parenthesis for example: (auth). This folder does not make any routes in the App Routing. If a login route is to be created in the (auth) Route Group, its route will look like: project.com/login, the (auth) does not come into the route uri as it is just a group. You can define a layout.tsx file in this (auth) folder and all the routes created in this (auth) group will follow the same layout. As such you can create another group named (loggedIn) where you can define the layout.tsx file with Header and Sidebar components as such:
import Header from "../components/Header";
import Sidebar from "../components/Sidebar";
export default function LoggedInLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<>
<Header />
<div className="w-full h-[calc(100%-56px)] flex flex-nowrap justify-start items-start ">
<Sidebar />
{children}
</div>
</>
);
}
And the layout.tsx file in (auth) group without Header and Sidebar components can be defined as:
export default function AuthLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<>
<div className="w-screen h-screen">{children}</div>
</>
);
}
Finally you can define the root layout.tsx file directly in the app folder as:
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<div className="w-full h-screen">{children}</div>
</body>
</html>
);
}
Now, if you want to show a page at route "/" with Header and Sidebar components, then create a "page.tsx" file directly inside the (loggedIn) Route Group and keep in mind that no direct Route Groups without a parent route should directly contain a page.tsx file as it can give rise to conflicting route scenarios. Also, make sure that the "app" folder should not contain a "page.tsx" file in it, directly.
At the end, the "app" folder layout should look like this:
You can check the code for the above explanation on my github repository here.
Top comments (0)