What is App Router?

The App Router is Frontend Accelerator's modern routing system built on Next.js 15+ App Router architecture, replacing the legacy Pages Router with a more powerful file-system based routing.

Key Features:

1. File-System Routing:

app/
  page.tsx           // Home page
  layout.tsx         // Root layout
  dashboard/
    page.tsx         // /dashboard
    profile/
    products/
    settings/
      page.tsx       // /dashboard/settings
    // .etc
  blog/
  login/

Special Files:

• page.tsx - Route page component
• layout.tsx - Shared UI for route segments
• loading.tsx - Loading UI with Suspense
• error.tsx - Error boundary
• not-found.tsx - 404 page
• template.tsx - Re-rendered layout

3. Nested Layouts:

Layouts wrap child layouts and pages, persisting state across navigation:

<RootLayout>
  <DashboardLayout>
    <SettingsPage />
  </DashboardLayout>
</RootLayout>

4. Route Groups:

Grouping contextually relevant files of a route, without affecting it's path (url).

(marketing)/  // Doesn't affect URL
  about/
  contact/
(app)/
  dashboard/
  profile/

5. Dynamic Routes:

[id]/page.tsx        // /products/123
[...slug]/page.tsx   // Catch-all routes

AI-Native Benefits:

The App Router's file-based structure makes it trivial for AI to:

• Understand the entire route hierarchy instantly
• Add new routes by creating appropriately named files
• Implement nested layouts without configuration
• Organize routes into logical groups

Advantages over Pages Router:

• Server Components by default
• Built-in loading and error states
• Nested layouts with persistent state
• Parallel and intercepting routes
• Streaming and Suspense support

Frontend Accelerator uses App Router exclusively for maximum performance and developer experience.