In the Next.js App Router, what does a folder named @analytics inside a route segment create, how does its content reach the screen, and what does it do to the URL?
answer
- @ prefix, no URL segment
- arrives as a prop on the layout
- children is the unnamed slot
- each slot resolves its own route
- own loading and error per slot
basics
~20 sAn @-prefixed folder is a parallel route slot. Next renders it independently within the same segment and passes it to that segment's layout as a prop named after the slot, so the layout must render it. Slot names never appear in the URL.
solid answer
~50 sA folder starting with `@` defines a **parallel route slot**. It is not a URL segment — `@analytics` never shows up in the address bar. Instead, Next resolves it as its own subtree for the current URL and hands it to the segment's `layout.tsx` as a prop named after the folder, so `app/dashboard/@analytics` and `app/dashboard/@team` mean the layout receives `analytics` and `team` alongside `children`. `children` is itself an implicit slot — the unnamed one. The layout decides where each slot goes in the markup, and if it never renders the prop, nothing appears. Each slot is an independent subtree: it resolves its own route, can define its own `loading.tsx` and `error.tsx`, and streams separately. That is what makes it useful for a dashboard rendering two sections at once, for showing a different view depending on state, and as the container for a modal.
go deeper
Recognise the @ folder as a Next-specific convention and remember two facts: it does not change the URL, and its content arrives as a prop on the layout.
Explain the mechanics end to end — folder name becomes prop name, children is the unnamed slot, the layout controls placement, and each slot resolves its own route with its own loading and error files.
Show production judgment: reach for slots when panels have genuinely independent data, failure modes and streaming, and know that every slot needs a default.tsx or a hard load will 404 the route.
Own the call between routed slots and plain composition. Argue when the extra file-convention surface and the fallback boilerplate buy real isolation, and when a team is paying router complexity for what a component tree already gives them.
## The convention A folder whose name starts with `@` is a **slot**, and slots are how the App Router expresses parallel routes: two or more route trees resolved at the same time for the same URL, rendered side by side inside one layout. ``` app/ dashboard/ layout.tsx page.tsx -> the implicit `children` slot @analytics/ page.tsx @team/ page.tsx ``` ## How the content reaches the screen Slots are not rendered automatically wherever they happen to sit in the tree. Next resolves each slot for the current URL and passes the result into the segment's layout as a prop named after the folder, minus the `@`: ```tsx // app/dashboard/layout.tsx export default function DashboardLayout({ children, analytics, team, }: { children: React.ReactNode analytics: React.ReactNode team: React.ReactNode }) { return ( <section> <div>{children}</div> <aside>{analytics}</aside> <aside>{team}</aside> </section> ) } ``` Two things follow. First, the layout is in charge of placement — a slot you never render simply does not appear, with no error. Second, `children` is nothing special: it is the *unnamed* slot, the one filled by `page.tsx` and the ordinary route folders. Once you see `children` as a slot, parallel routes stop looking like a bolt-on and start looking like the general case. ## Slots do not touch the URL `@analytics` contributes no segment. `/dashboard` is still `/dashboard`, whether it has zero slots or five. This is the single most-missed fact about the feature, and it is what makes slots different from just nesting more folders. It also means a slot cannot be linked to by name — you navigate to real URLs, and each slot independently works out what it should show for that URL. ## Independent subtrees Each slot resolves its own route below its own folder, which is the actual payoff: - A slot can define its own `loading.tsx`, so a slow analytics panel shows a skeleton while the main content is already interactive. - A slot can define its own `error.tsx`, so one panel failing does not take down the page. - Slots stream independently, so the fastest one paints first. - Sub-navigation inside one slot leaves the others alone: Next tracks the active sub-route of every slot separately. That last point is the difference between parallel routes and a plain client-side tab component. Tabs built from `useState` lose their state on reload and are invisible to the router; slots are resolved by the router on every navigation. ## What people actually use them for - **Dashboards** whose panels are genuinely separate views with separate data and separate failure modes. - **Conditional routes** — render one subtree or another for the same URL, for example a signed-in view versus a marketing view, with the layout choosing which slot to render. `useSelectedLayoutSegment` accepts a slot name so a client component can tell which sub-route a given slot is currently showing. - **Modals**, where a `@modal` slot holds an overlay rendered above `children`. This is the pairing with intercepting routes that makes a modal addressable by URL. ## The catch to remember Because a slot resolves its own route, a URL can perfectly well have no match inside a given slot — you navigate to `/dashboard/settings` and `@team` has nothing at `settings`. On a client-side navigation Next keeps showing what that slot had before. On a full page load there is no "before", so the slot needs a `default.tsx` to fall back to; without one, the whole route 404s. Any real use of parallel routes therefore ships `default.tsx` files alongside the slots. ## Typing and ergonomics Slots are just props, so they are typed as `React.ReactNode` in the layout signature. There is no registry to update and no import: creating the folder is what creates the prop. The flip side is that a typo in the folder name produces a prop the layout never receives, and the symptom is silence — nothing renders, no error.
- If a layout ignores one of its slot props, what does the user see?Nothing from that slot, and no warning. Slots are ordinary React props — Next resolves the subtree and hands it over, but placement is entirely the layout's job. This is why a mistyped folder name (`@analytic` versus `@analytics`) shows up as silently missing UI rather than as an error.
- How is a parallel route different from just rendering two components inside one page?A slot is resolved by the router, not by the page. It has its own route below its folder, its own `loading.tsx` and `error.tsx`, its own streaming boundary, and its own active sub-route that survives navigation. Two components inside a page share one route, one error boundary and one loading state.
- Can a client component tell which sub-route a particular slot is currently showing?Yes — `useSelectedLayoutSegment` takes an optional slot name, so calling it with `'analytics'` returns the active segment inside that slot rather than inside `children`. Teams use it to highlight navigation for a slot, or to let a layout decide which of two slots to render for the same URL.
saying these in an interview costs you the question
- Thinks @analytics adds /analytics to the URL
- Expects the slot to render without the layout using its prop
- Treats children as unrelated to slots
- Says all slots share the parent's single loading state
- Confuses parallel routes with useState-driven tabs