Cookie Consent by Free Privacy Policy Generator 📌 Group routes according to the categories and apply different layouts with layout.tsx in NextJs App Routing.


✅ Group routes according to the categories and apply different layouts with layout.tsx in NextJs App Routing.


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

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:

Faulty Folder Layout

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:

Faulty Preview 1

Faulty Preview 2

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:

Final Folder Layout

You can check the code for the above explanation on my github repository here.

...

✅ How to Create Categories and Use WordPress Categories


📈 37.98 Punkte

✅ Conquer Complex Routing in Next.js 14: Mastering Group Routes for a Smoother Dev Experience


📈 37.07 Punkte

✅ CVE-2023-24231 | Inventory Management System v1 categories.php Categories Name cross site scripting


📈 36.47 Punkte

✅ Transit Routing and Reverse Routes Could Come to GNOME 3.24 Desktop's Maps App


📈 34.63 Punkte

✅ Next.js 14 Intercepting Routes with Dynamic Routes


📈 34.61 Punkte

✅ Made typos in routes? Redirect routes with functions


📈 34.61 Punkte

✅ Laravel Wildcard Routes & Fallback Routes


📈 34.61 Punkte

✅ Implementing Photo Modal in Next JS using Parallel Routes & Intercepting Routes


📈 34.61 Punkte

✅ Protecting routes with NextAuth in Nextjs


📈 32.26 Punkte

✅ Handle protected page routes in NextJS using NextAuth


📈 32.26 Punkte

✅ What is NextJs?  Why Should You Use it in 2023?  NextJs Pros and Cons Guide


📈 31.42 Punkte

✅ NextJS examples: 60 popular websites built with NextJS and headless CMS


📈 31.42 Punkte

✅ 3 Exciting Improvements Between NextJS 14 And NextJS 13


📈 31.42 Punkte

✅ Change Keyboard Layout on Windows 10 (Add, Switch, and Remove Layouts)


📈 30.43 Punkte

✅ Change Keyboard Layout on Windows 10 (Add, Switch, and Remove Layouts)


📈 30.43 Punkte

✅ Angular 17 routing with routes.ts


📈 30.37 Punkte

✅ Graphing ZFS - A tool to visualize and compare different ZFS RAID layouts and settings


📈 29.91 Punkte

✅ How to Apply Flexbox for Simple Responsive Layouts


📈 29.89 Punkte

✅ July 2019 update of Dynamics 365 Layout provides locked layouts, improved HoloLens 2 experience


📈 28.92 Punkte

✅ Crafting Perfect Layouts: Mastering CSS Layout Techniques.🚀


📈 28.92 Punkte

✅ Master The Layouts In React JS. Control Layout From Any Page - DEV Community.


📈 28.92 Punkte

✅ How to protect routes for different user roles with restricted access?


📈 27.58 Punkte

✅ Serving different routes depending the port webserver serves my applciation in laravel.


📈 27.58 Punkte

✅ Adding different keyboard layouts on Windows 11


📈 26.89 Punkte

✅ Apply Yaml Manifest Using “kubectl apply”


📈 26.56 Punkte

✅ TRENDnet TEW-827DRU prior 2.05B11 Routing RIP Settings apply.cgi passwd command injection


📈 26.34 Punkte

✅ Confused on +layout.js and +layout.svelte props passed in load() function...


📈 26.14 Punkte

✅ Open Routing: Facebook gibt interne Plattform für Backbone-Routing frei


📈 26.12 Punkte

✅ Advanced Routing: Homematic IP bekommt intelligentes Routing


📈 26.12 Punkte

✅ Kotlin Routing - routing everything


📈 26.12 Punkte











matomo

Datei nicht gefunden!