React Academy · Lesson

App Router File Conventions

Understand the app/ directory, page.tsx, layout.tsx, loading.tsx, and error.tsx files.

App Router File Conventions is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The app/ Directory

Next.js App Router uses the app/ directory. Folders define URL segments; special files within folders define behavior for each segment.

page.tsx — The Route UI

page.tsx exports the React component rendered for a URL segment. Without a page.tsx, the route is not publicly accessible.

// app/dashboard/page.tsx
export default function DashboardPage() {
  return <h1>Dashboard</h1>;
}
// → accessible at /dashboard

layout.tsx — Persistent Shells

layout.tsx wraps child routes. It persists across navigations — its state is not reset when the child route changes.

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

loading.tsx — Instant Loading UI

loading.tsx renders immediately while the page's async data loads. It wraps the page in an automatic Suspense boundary.

// app/dashboard/loading.tsx
export default function Loading() {
  return <Skeleton />;
}
// Shown while dashboard/page.tsx is fetching

error.tsx — Error Boundaries

error.tsx is a React error boundary for the segment. It receives the error and a reset function to retry.

'use client';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

not-found.tsx — 404 UI

not-found.tsx renders when notFound() is called from a server component or when no route matches.

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>404 — Page not found</h2>
      <Link href="/">Go home</Link>
    </div>
  );
}

template.tsx — Re-mounting Layouts

template.tsx is like layout.tsx but creates a new instance on every navigation — state resets and effects re-run. Use for animations or analytics.

// app/shop/template.tsx
export default function ShopTemplate({ children }: { children: React.ReactNode }) {
  return <div className="shop-fade-in">{children}</div>;
}

route.ts — API Routes

route.ts (not route.tsx) exports HTTP method handlers (GET, POST, etc.) to create API endpoints inside the app/ directory.

// app/api/users/route.ts
export async function GET() {
  const users = await getUsers();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await createUser(body);
  return Response.json(user, { status: 201 });
}

middleware.ts — Edge Middleware

middleware.ts at the project root runs before every matched request at the edge — used for auth checks, redirects, and header rewrites.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  return NextResponse.next();
}

export const config = { matcher: ['/dashboard/:path*'] };

Colocation

You can colocate non-route files (components, utils, tests) inside app/ folders. Only files named with the special conventions (page, layout, etc.) are treated as route segments.

Nested Layouts

Each folder can have its own layout.tsx. The nested layout wraps only its segment's children, composing with the parent layout above it.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

Quick Check

Which App Router file provides an automatic Suspense fallback while a page's async data loads?

Recap

App Router uses special files: page.tsx (route UI), layout.tsx (persistent shell), loading.tsx (Suspense fallback), error.tsx (error boundary), not-found.tsx (404), route.ts (API), and middleware.ts (edge logic).

Frequently asked questions

Is the “App Router File Conventions” lesson free?

Yes — the full text of “App Router File Conventions” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “App Router File Conventions”?

Understand the app/ directory, page.tsx, layout.tsx, loading.tsx, and error.tsx files. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “App Router File Conventions” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy