---
paths:
  - "**/*.tsx"
  - "**/*.ts"
stacks:
  - nextjs
---

# Next.js Code Templates

When implementing Next.js features, use these templates as reference patterns.
Read the template file to see the exact pattern, then generate code following it.

## Scaffold (preferred for new features)

**Always use scaffold for new feature pages — never create feature files manually.**

```bash
morph-spec scaffold nextjs <feature> [--dry-run]
```

Examples:
```bash
morph-spec scaffold nextjs book
morph-spec scaffold nextjs user-profile
```

Generates 4 files: page (Server Component), list component, form component, TanStack Query hook.

**Only use `template render` for individual files when modifying an existing feature.**

| Template | Path | Purpose |
|----------|------|---------|
| Server Page | `.morph/framework/templates/frontend/nextjs/page.tsx.hbs` | App Router server component |
| Client Component | `.morph/framework/templates/frontend/nextjs/client-component.tsx.hbs` | `'use client'` component |
| Feature Form | `.morph/framework/templates/frontend/nextjs/feature-form.tsx.hbs` | react-hook-form + Zod + shadcn |
| Custom Hook | `.morph/framework/templates/frontend/nextjs/use-feature.ts.hbs` | TanStack Query hook |
| Env Config | `.morph/framework/templates/frontend/nextjs/env.mjs.hbs` | T3 Env validation |
| TypeScript Config | `.morph/framework/templates/frontend/nextjs/tsconfig.json.hbs` | Path aliases |
| Dockerfile | `.morph/framework/templates/frontend/nextjs/Dockerfile.nextjs.hbs` | Multi-stage build |