Engrain by ByteRush

RCT.07.01 Mid-level· 12 minCore — asked often

Next.js App Router fundamentals: files become routes

How the Next.js App Router turns folders into URLs: page, layout, loading, error and not-found files, nested layouts, route groups, dynamic segments with async params, parallel and intercepting routes, and Link prefetching.

Comes up in: React, Frontend system design

Learn#

Aditi joins a Next.js project and cannot find the router config. There is none. In the App Router, folders under app/ are URL segments, and special file names decide what renders there:

app/
  layout.tsx          ← wraps every page (html, body, header)
  page.tsx            ← /
  loading.tsx         ← shown while a segment loads (a Suspense fallback)
  error.tsx           ← an error boundary for its segment
  not-found.tsx       ← 404 for unknown routes
  (marketing)/about/page.tsx   ← /about  (the group adds nothing to the URL)
  blog/
    layout.tsx        ← wraps every /blog page
    page.tsx          ← /blog
    [slug]/page.tsx   ← /blog/anything

A layout wraps the pages below it and stays mounted while users move between them, keeping its state. Each folder is a route segment; layouts nest the same way segments do.

A dynamic route such as [slug] matches any value. In Next.js 16, params is a promise: const { slug } = await params.

Matching /blog/react-19 and nesting its layoutsStep 1 of 4

State

  • segments: [blog, react-19]

Page

    empty

    The user opens /blog/react-19. Next.js splits it into segments: blog, react-19.

    Read the steps as text
    1. The user opens /blog/react-19. Next.js splits it into segments: blog, react-19.
    2. app/blog/[slug] matches the second segment, so params is { slug: "react-19" } (a promise you await).
    3. Layouts wrap from the root down: app/layout, then app/blog/layout, then the page.
    4. Navigating to another post keeps both layouts mounted, with their state. Only the page part re-renders; loading.tsx shows while it loads.

    Predict#

    Predict first

    Both app/blog/new/page.tsx and app/blog/[slug]/page.tsx exist. Which renders /blog/new?

    Interview angle#

    Say it like this — about 30 seconds

    “In the App Router, folders in app are URL segments and special files define the UI: page makes a route public, layout wraps child segments and persists across navigation, loading is an automatic Suspense fallback, error is an error boundary, and not-found handles 404s. Folders in parentheses are route groups that organize code without changing the URL. Square brackets make dynamic segments, and params are async in Next.js 16. Components are Server Components by default, and Link prefetches routes in the viewport.”

    Stays on your device. Nothing is uploaded.
    Follow-up Explain the Next.js App Router file conventions.
    page, layout, loading, error and not-found per segment; (group) folders for organization; [param] and […param] for dynamic segments.
    Follow-up What is the difference between a layout and a template?
    A layout persists across navigations and keeps state; a template remounts on every navigation.
    Follow-up What are parallel routes?
    Named slots (@slot folders) that render several pages in one layout at once, such as a dashboard with independent panels.

    Practice#

    Guided

    Implement the App Router’s matching rules on a list of files: groups, dynamic and catch-all segments, and nested layouts.

    Done when

    • Route groups are ignored in the URL, and static segments beat dynamic ones.
    • [name] and [...name] fill params correctly.
    • Layouts are listed from the root down to the matched page.
    Your solution
    Ctrl/⌘ + Enter

    Remember#

    Try to answer each card before you open it. Then add them to your reviews.

    Which file makes a route segment publicly reachable?

    page.tsx (or .js).

    What does loading.tsx become?

    A Suspense fallback for its segment.

    What do parentheses in a folder name do?

    Make a route group that does not change the URL.

    How do you read params in Next.js 16?

    Await them: const { slug } = await params.

    Go deeper

    Four layers. Stop at the one your interview needs; each ends with a quick check.

    The core ideaEvery round

    Layouts persist across navigations between their child pages, keeping state and avoiding re-rendering shared UI. Use template.tsx when you need a fresh instance each time.

    Check yourself: Does a layout re-render or remount when navigating between its child pages?

    It stays mounted and keeps its state.

    How it works underneathSenior rounds

    Route groups such as (marketing) organize files and can give a section its own root layout, without appearing in the URL.
    Static segments beat dynamic ones; [...parts] catches the rest, and [[...parts]] also matches no segment at all .

    Check yourself: Which segment wins for /shop/shoes: [category] or shoes?

    The static shoes folder.

    Edge cases and trapsWhere people slip

    Parallel routes (@slot folders) render several pages in one layout. Intercepting routes, such as (.)photo/[id], show a route as a modal on soft navigation while a hard load shows the full page.
    In Next.js 16 every parallel slot needs a default.js.

    Check yourself: What do intercepting routes do?

    Show a route inside the current layout, such as a photo modal, while the URL still deep-links to the full page.

    In productionStaff-level answers
    <Link> prefetches routes as links enter the viewport. Next.js 16 downloads shared layouts once and fetches only missing parts (Next.js 16, current 16.4.3) .
    Check yourself: When does Link prefetch?

    When the link enters the viewport (and with priority on hover), in production builds.

    Finished the five steps? Mark it, and its cards join your reviews.

    Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.

    Interview questions this answers

    • Explain the Next.js App Router file conventions.