Project Structure

Special files in app/

In the App Router, folders define URL segments and special files define what each segment renders: page.tsx (the route's UI, making it public), layout.tsx (shared UI that wraps child routes and keeps state across navigation), loading.tsx (a loading state), error.tsx (an error boundary), not-found.tsx (404 UI) and route.ts (an API endpoint). Folders in square brackets ([id]) are dynamic segments. Other files (components, utilities) can live alongside routes or in separate folders.

The demo store's layout

The project used in this course.

app/
  layout.tsx                 root layout: <html>, nav, metadata defaults
  page.tsx                   /                product list (Server Component)
  not-found.tsx              404 UI
  products/[id]/page.tsx     /products/1 ...  dynamic route + metadata
  counter/page.tsx           /counter         uses a Client Component
  guestbook/page.tsx         /guestbook       Server Action form
  time/static/page.tsx       /time/static     static
  time/dynamic/page.tsx      /time/dynamic    rendered per request
  api/products/route.ts      /api/products    Route Handler (GET, POST)
  admin/page.tsx, login/page.tsx
components/Counter.tsx       "use client" component
lib/data.ts                  data access
proxy.ts                     runs before requests (/admin guard)
next.config.ts               redirects and other config

Keep data access in one place

Put database and API calls in a lib or data folder so pages stay small and the logic is reusable and testable.

Quick check: Which file makes a route segment publicly accessible as a page?

• page.tsx
• layout.tsx alone
• styles.css
• README.md