Nextjs Expert

Overview

Create production-ready Next.js features for this repo using App Router patterns, strict TypeScript, Tailwind styling, and Prisma for data access. Favor clear, minimal changes that match existing conventions.

Quick Start

• Scan app/, components/, lib/, and prisma/schema.prisma before editing.
• Confirm the route, data source, and UI requirements; clarify server vs. client behavior.
• Start from templates in assets/ and adjust to the specific task.

Core Tasks

Pages and Components

• Create route files as app/<route>/page.tsx and layouts as app/<route>/layout.tsx.
• Default to Server Components; add "use client" only when using hooks, state, or browser APIs.
• Place reusable UI in components/; keep route-only UI next to the route.

Route Handlers and APIs

• Implement APIs in app/api/<name>/route.ts with named GET, POST, etc.
• Validate request bodies with Zod and return typed JSON responses via NextResponse.
• Include explicit status codes for error cases.

Prisma and Database

• Update models in prisma/schema.prisma and keep relations explicit.
• Prefer npx prisma migrate dev for schema changes; use npx prisma db push only when migrations are not required.
• Keep database access in server-only modules and avoid client-side Prisma usage.

Conventions

• TypeScript strict: no any unless justified; prefer @/* path alias.
• Tailwind CSS is the styling default; keep class lists readable and grouped.
• Use clear, imperative naming for components and functions (e.g., UserTable, createOrder).

Assets

• assets/app-page.tsx: basic App Router page template.
• assets/route-handler.ts: API route handler starter.
• assets/prisma-model.prisma: model scaffold for new tables.

References

• references/stack.md: stack assumptions and defaults.