App Router Directory Structure

The App Router organises your application inside the app/ directory at the project root. Every folder inside app/ maps to a URL segment. To make a folder a routable segment you add a page.tsx file inside it — without page.tsx the folder is not publicly accessible, which is useful for grouping related code without polluting the URL structure. Next.js reserves several file names inside each route folder for specific purposes. layout.tsx wraps the segment and all its children, persisting across navigations without unmounting. loading.tsx shows a React Suspense fallback while the segment's page is streaming in. error.tsx is a React error boundary that catches runtime errors in the segment. not-found.tsx renders when notFound() is called from a server component. Route groups, created by wrapping a folder name in parentheses like (marketing), let you organise routes without affecting the URL path. This is particularly useful for applying different layouts to different sections of the app. Parallel routes and intercepting routes provide even more advanced layout patterns for dashboards and modal-style navigation.

Example

// Typical App Router directory structure
//
// app/
// ├── layout.tsx          <- root layout, rendered for every route
// ├── page.tsx            <- home page  /
// ├── globals.css
// ├── (marketing)/        <- route group (no URL impact)
// │   ├── about/
// │   │   └── page.tsx    <- /about
// │   └── blog/
// │       ├── layout.tsx  <- layout for /blog/**
// │       ├── page.tsx    <- /blog
// │       └── [slug]/
// │           └── page.tsx <- /blog/:slug
// ├── dashboard/
// │   ├── layout.tsx      <- layout wrapping all dashboard routes
// │   ├── page.tsx        <- /dashboard
// │   ├── loading.tsx     <- Suspense fallback for dashboard
// │   ├── error.tsx       <- error boundary for dashboard
// │   └── settings/
// │       └── page.tsx    <- /dashboard/settings
// └── api/
//     └── users/
//         └── route.ts    <- Route Handler at /api/users

// app/layout.tsx - root layout example
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

HTML

Full Editor

Related Resources

Next.js Reference

Complete tag & property list

Next.js How-To Guides

Step-by-step practical guides

Next.js Exercises

Practice what you've learned