Next.js App Router Architecture for Enterprise Apps

Next.js 15 App Router Directory Best Practices

With the adoption of React Server Components (RSC) and server actions, structuring files properly in Next.js is more critical than ever. In enterprise projects, our team follows a strict separation of server routing concerns, data managers, and client-side presentation components.

The Core Directory Layout

We isolate reusable components, custom hooks, and pages into distinct folders under the `src` directory to preserve structural sanity and keep page render files clean:

• src/app: Contains only routes, layouts, templates, and dynamic path configuration parameters.
• src/components: Reusable presentation layer elements divided into common UI and feature-specific components.
• src/lib: Utility libraries, client SDK instances (e.g. Prisma client, Supabase), and business logic handlers.
• src/hooks: Custom react hooks for client-side state handling and triggers.

Maximizing Server Component Benefits

Always fetch data inside React Server Components directly. Let the framework handle streaming via `loading.tsx` pages and Suspense boundaries. Avoid writing API routes that simply proxy database calls to your components.

// src/app/dashboard/page.tsx
import { Suspense } from "react";
import StatsList from "@/components/dashboard/StatsList";
import Loader from "@/components/ui/Loader";

export default async function DashboardPage() {
  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">Dashboard</h1>
      <Suspense fallback={<Loader />}>
        <StatsList />
      </Suspense>
    </div>
  );
}