Frontend Beauty
ESC

Type to search the knowledge base.

File-based Routing

Next.js App Router file conventions map folders to URLs: page, layout, route groups, dynamic segments, and special files.

beginner3 min read
  • nextjs
  • file-based

Next.js App Router maps the app/ directory to URL paths. Files with reserved names define UI and behavior for a segment — you rarely hand-write a route table.

Docs: Routing Fundamentals, Project Structure.

Core files

File Role
page.tsx UI for a route; makes the segment publicly accessible
layout.tsx Shared UI wrapping pages; preserves state on child navigations
loading.tsx Instant loading UI (Suspense boundary)
error.tsx Error boundary for the segment (Client Component)
not-found.tsx 404 UI
route.ts Route Handler (API endpoint)
template.tsx Like layout but remounts on navigation 
app/
  layout.tsx          → applies to all
  page.tsx            → /
  blog/
    page.tsx          → /blog
    [slug]/
      page.tsx        → /blog/:slug

Dynamic segments

// app/shop/[slug]/page.tsx
export default async function ProductPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  return <h1>{slug}</h1>;
}

Catch-alls: [...slug], optional [[...slug]]. Route groups (marketing) organize files without affecting the URL.

Linking

import Link from 'next/link';
<Link href={`/blog/${slug}`}>Read</Link>

Prefer Link for client navigations and prefetch — see prefetch.

Pages Router note

pages/ uses filesystem routing with different conventions (getServerSideProps, _app). New apps should use app/. Know both for legacy.

Interview out-loud

“App Router maps folders under app/ to URLs. page.tsx creates a route, layout.tsx nests shared UI that keeps state, and special files handle loading, errors, and API routes. Dynamic segments use bracket folders, and route groups parenthesize folders without changing the path.”

Further reading

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides