Ask
84
@filament_jam ·

is 11 layout.tsx files normal or am i nesting route groups wrong Routing

Came from the pages router about a month ago. I now have (marketing), (app) and (auth) groups, each with a layout, plus per-section layouts under (app) for settings, billing, projects and one per project for the tabs. Eleven layout.tsx files, several of which just render {children} with a wrapper div.

It feels like a lot for an app with maybe 25 pages. Is this what everyone's tree looks like, or have I cargo-culted a structure I do not need?

8 answers Share
Report

Answering anonymously — a moderator will review it first.

  • @awkward_ash · 7mo ago

    The trap at eleven layouts is data. Every await in a layout is on the critical path of every navigation into that subtree, and they run before the page's loading boundary can show anything. Four nested layouts each doing a "quick" 60ms lookup is a quarter second of blank added to every click.

    Audit it: grep your layouts for await. If the count is above two you have a latency problem waiting to be reported as "the app feels slow".

    27
    Share
    Reply

    Answering anonymously — a moderator will review it first.

    Report
  • @litercount_lou · 7mo ago · 2 replies

    The number is not the problem. The question for each one is "does this own something that persists across navigation?" - a nav, a provider, a shell that must not remount. If the answer is no and it just wraps children in a div, delete it and put the div in the page.

    Two things worth knowing while you are in there, because they explain most confusion at this stage:

    • Layouts do not re-render on navigation between their children. That is the feature. It is also why state in a layout survives and state in a page does not.
    • A layout cannot read searchParams. If you find yourself wanting that, the thing you want is a page or a client component reading the hook.

    Eleven with real jobs is fine. Eleven where four are decorative means you have four to delete.

    35
    Share
    Reply

    Answering anonymously — a moderator will review it first.

    Report
    • @filament_jam · 7mo ago

      Deleted five. Three were pure wrapper divs and two were duplicating padding that the parent already had. Tree reads much better and nothing changed visually.

      12
      Share
      Reply

      Answering anonymously — a moderator will review it first.

      Report
  • @quiet_stacker · 7mo ago · 2 replies

    Most apps I have worked on land on three: marketing shell, app shell, auth shell. Everything below that is a component that a page renders, not a layout.

    Route groups are for when two sets of routes need genuinely different chrome at the same URL depth. They are not for organising files - your editor already does that.

    24
    Share
    Reply

    Answering anonymously — a moderator will review it first.

    Report
    • @litercount_lou · 7mo ago

      Agree on three, with one exception: per-resource layouts that fetch the resource once and share it with all its tabs are worth their weight. projects/[id]/layout.tsx loading the project so the four tab pages do not each refetch it is a real win, not organisation.

      10
      Share
      Reply

      Answering anonymously — a moderator will review it first.

      Report
  • @hemline_hank · 7mo ago

    Also learn the difference between layout.tsx and template.tsx before you need it rather than after. I spent a day on "why does my mount animation only play once" and the answer was one filename.

    16
    Share
    Reply

    Answering anonymously — a moderator will review it first.

    Report
  • @stipend_sam · 7mo ago

    Small thing that saved me a lot of squinting: name groups after the audience, not the feature - (public), (signed-in), (admin). When you have eleven of anything the names carry more weight than the structure.

    14
    Share
    Reply

    Answering anonymously — a moderator will review it first.

    Report
  • @epoxy_puddle · 7mo ago

    eleven layouts, twenty five pages, and one of them is definitely a div with p-4 on it. we have all been there.

    8
    Share
    Reply

    Answering anonymously — a moderator will review it first.

    Report