You want your public marketing pages and your logged-in app to have completely different visual shells — different nav, different fonts, arguably a different entirely — while keeping both in the same Next.js project. How would you structure the app/ directory to achieve that?

A strong answer covers: Proposes two route groups, e.g. (marketing) and (app), each with its own layout.tsx; Explains that route group names don't appear in the URL, so this reorganization doesn't change any existing paths; Recognizes that with no shared top-level layout.tsx, each group's layout becomes its own root layout and must independently define and ; Mentions or reasons about the navigation cost: crossing between the two groups triggers a full page reload, not a soft client-side transition.

Lesson 3 of 81

Route Groups & Private Folders

Every folder in app/ becomes a URL segment by default — until you tell the router otherwise. Route groups and private folders are the two ways to opt a folder out of that default without moving files anywhere.

9 min read

Check your understanding

Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.

Question 1 of 3

`app/dashboard/_internal/page.tsx` exists — a `page.tsx` file inside an underscore-prefixed folder. Is `/dashboard/internal` (or any variant) reachable?

No — private folders opt out everything nested inside them, including page.tsx files, so no route is createdYes, at `/dashboard/internal`, because page.tsx always creates a route regardless of its containing folderYes, but only reachable via the URL-encoded path `/dashboard/%5Finternal`

Stuck? Ask the AI tutor

Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.

Interview questions on Route Groups & Private Folders

What interviewers actually ask about this, and what a strong answer has to cover.

You want your public marketing pages and your logged-in app to have completely different visual shells — different nav, different fonts, arguably a different <html> entirely — while keeping both in the same Next.js project. How would you structure the app/ directory to achieve that?

A strong answer covers

Proposes two route groups, e.g. (marketing) and (app), each with its own layout.tsx
Explains that route group names don't appear in the URL, so this reorganization doesn't change any existing paths
Recognizes that with no shared top-level layout.tsx, each group's layout becomes its own root layout and must independently define <html> and <body>
Mentions or reasons about the navigation cost: crossing between the two groups triggers a full page reload, not a soft client-side transition

Likely follow-ups

What would go wrong if you also had a top-level app/layout.tsx alongside these two route groups' layouts?
How is this different from using a private folder like _shared for common components used by both sections?

Practice these with the AI interviewer →

The plain-language idea

In the App Router, folder nesting normally maps directly onto URL structure: app/blog/posts/page.tsx is /blog/posts. Two conventions let you organize files into folders without that folder name showing up in the URL:

Route groups — (folderName). Wrapping a folder name in parentheses tells the router "this folder is for organization only, don't add it to the path." app/(marketing)/about/page.tsx still resolves to /about, not /marketing/about. The main reason to reach for this: it lets you attach a different layout.tsx to different sections of your app that otherwise sit at the same URL depth — including giving each section its own root layout (its own <html>/<body>).
Private folders — _folderName. Prefixing a folder with an underscore opts that folder and everything inside it out of routing entirely, even if it contains a page.tsx. This is where you colocate components, hooks, or utilities that belong to a specific route but shouldn't be reachable as one — app/dashboard/_components/StatsCard.tsx is never a URL, no matter what's inside it.

See it in a real thing: splitting marketing pages from the authenticated app

app/
├── (marketing)/
│   ├── layout.tsx        → root layout #1: public nav, footer, <html>/<body>
│   ├── page.tsx           → "/"
│   └── pricing/page.tsx   → "/pricing"
├── (app)/
│   ├── layout.tsx        → root layout #2: sidebar shell, its own <html>/<body>
│   ├── dashboard/
│   │   ├── _components/
│   │   │   └── RevenueChart.tsx   → not a route, just colocated UI
│   │   └── page.tsx      → "/dashboard"

Neither (marketing) nor (app) appears in any URL — /, /pricing, and /dashboard are the actual paths. But each group gets its own layout.tsx, and because there's no shared app/layout.tsx above them, both are root layouts: each must independently define its own <html> and <body> tags. _components/RevenueChart.tsx sits right next to the dashboard page that uses it, but the router never considers it a route candidate, underscore-prefixed or not.

What people usually miss

Watch out

Route groups can collide. (marketing)/about/page.tsx and (shop)/about/page.tsx both resolve to /about — since the group names are invisible to the URL, the router sees two files both claiming the same path and errors.
Private folders opt out everything nested inside them, recursively — a page.tsx several levels deep inside a _folder is still unreachable, it doesn't "escape" back into routing just by having the right filename.
If you split into multiple root layouts via route groups, you must remember the home route (/) needs to live inside one of them — there's no implicit top-level layout left to fall back on once you've removed app/layout.tsx.
Underscore-prefixed folders are the framework convention, but the reverse — trying to make a URL segment that literally starts with an underscore — needs %5F-encoding, since a bare underscore prefix always means "private" to the router.

Why this matters in interviews

"How would you give your marketing pages and your logged-in app completely different shells, sharing one codebase?" is a real architecture question, and route groups with multiple root layouts is the actual, current Next.js answer — confusing it with private folders (which do the opposite: hide files from routing rather than reorganize URL-visible sections) is a common tell that the candidate hasn't used the App Router in a real project.