Next.js 15 App Router & Directory Anatomy (app/)

Next.js 15 App Router

In the App Router, folder names define route segments, and special file conventions handle views:

• app/page.tsx: Route UI (/)
• app/layout.tsx: Shared root layout wrapper
• app/loading.tsx: Instant streaming skeleton with React Suspense
• app/error.tsx: Granular error boundary

// app/page.tsx
export default function HomePage() {
    return (
        <main className="p-8">
            <h1 className="text-4xl font-extrabold">Welcome to E-Tutorial</h1>
        </main>
    );
}