# Project Structure — Next.js

Source: https://www.skillbyai.com/en/nextjs/i-structure

> Folders are routes.

## 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.

```text
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.

**Quiz:** Which file makes a route segment publicly accessible as a page?

- [x] page.tsx
- [ ] layout.tsx alone
- [ ] styles.css
- [ ] README.md

*Answer:* page.tsx. Only page (or route) files create reachable URLs.