Project Structure

Directory layout

my-app/
├── app/
│   ├── pages/              # Page components → routes
│   │   ├── layout.tsx      # Root layout (wraps every page)
│   │   ├── index.tsx       # → /
│   │   ├── about.tsx       # → /about
│   │   └── blog/
│   │       ├── layout.tsx  # Blog-section layout
│   │       ├── index.tsx   # → /blog
│   │       └── [slug].tsx  # → /blog/:slug
│   ├── components/         # Shared components (not routed)
│   └── public/             # Static assets served at /
│       ├── favicon.ico     # → GET /favicon.ico
│       └── main.css        # → GET /main.css
├── server/                 # API route handlers
│   ├── users/
│   │   ├── index.ts        # → GET/POST /users
│   │   └── [id].ts         # → GET/PUT/DELETE /users/:id
│   └── auth.ts             # → /auth
├── middleware.ts           # (optional) Global middleware
├── nuke.config.ts          # (optional) Config overrides
└── package.json

app/pages/

Every .tsx file here that exports a default React component becomes a URL route. The file path relative to pages/ (minus the extension) is the URL. Files named layout.tsx are layouts, not routes.

app/components/

Place shared components here. Files in this directory are never treated as routes — only files directly inside pages/ and its subdirectories are routed.

app/public/

Any file placed here is served directly at its path. app/public/logo.png is available at /logo.png. No import, no route file needed. On Vercel, these files land on the CDN automatically.

server/

API route handlers live here. Export named functions (GET, POST, etc.) and NukeJS wires them up. The same file-path → URL mapping applies as for pages.

middleware.ts

A single optional file at the project root. Its default export runs before every request — before static files, API routes, and SSR. Use it for auth, logging, or header injection.

nuke.config.ts

Optional configuration file. NukeJS works out of the box without it. See the Configuration page for all options.