How does the App Router resolve a URL to a page component?

Based on the repository data available, I can only provide a high-level picture of App Router's URL resolution from the patterns documented:

How App Router Resolves URLs (from available documentation)

The App Router uses file system conventions to map URLs to page components:

1. File structure → URL pattern: The directory structure under app/ defines routes. For example:

   • app/page.tsx → /
   • app/products/[slug]/page.tsx → /products/{slug} (dynamic segment)
   • app/products/[category]/[slug]/page.tsx → /products/{category}/{slug} (nested dynamic)

2. Layout composition: Routes are resolved through a hierarchy of layout.tsx files that compose together, with page.tsx as the leaf component. Each layout wraps its children as shown in [.claude-plugin/plugins/cache-components/skills/cache-components/PATTERNS.md:L510-L604].

3. Dynamic segments in filenames (using [paramName]) capture URL segments as route parameters, which are passed to page/layout components as a params object.

4. generateStaticParams allows pre-rendering specific route permutations at build time by providing parameter values [.claude-plugin/plugins/cache-components/skills/cache-components/PATTERNS.md:L510-L604].

However, the repository data doesn't contain details about the internal matcher logic, route precedence rules, or middleware integration for URL resolution. A more targeted search of the Next.js source would be needed for that deeper implementation detail.

FOLLOW_UPS:

• How does Next.js handle dynamic route precedence and conflicts?
• What is the role of middleware in App Router request routing?
• How are catch-all routes [...slug] matched and handled?