All examples

Next.js app (TypeScript)

App Router app with Server Components by default, Server Actions, Zod validation, Vitest, and Playwright.

Composed from the nextjs-typescript rules pack. Same file from the CLI: aibysitter init --packs nextjs-typescript --format agents

Written for this site, CC0, scored by this linter, not tested against any agent.

File

AGENTS.md, 38 lines

Format

AGENTS.md

Save as

AGENTS.md

Category

JavaScript

Tags

• TypeScript
• Next.js
• React
• Tailwind CSS
• pnpm

License

CC0 1.0, public domain. No attribution needed.

Download AGENTS.md Lint a copy

Badge

Markdown for a README:

[![Aibysitter lint score: A 100](https://aibysitting.net/gallery/nextjs-typescript/badge.svg)](https://aibysitting.net/Gallery/nextjs-typescript)

AGENTS.md

View rendered

# Next.js with TypeScript

Next.js with the App Router, TypeScript in strict mode, Tailwind CSS. Package manager: pnpm.

## Commands
- Install: `pnpm install --frozen-lockfile`
- Dev server: `pnpm dev`
- Type check: `pnpm tsc --noEmit`
- Lint: `pnpm lint`
- Unit tests: `pnpm test` (Vitest)
- End-to-end tests: `pnpm test:e2e` (Playwright)

## Structure
- Routes live in `app/`. Shared UI lives in `components/`. Data access lives in `lib/data/`.
- Components are Server Components by default. A component that uses state, effects, or browser APIs starts with `"use client"`.
- Client components receive data as props. Data fetching stays in the Server Component that renders them.
- Mutations are Server Actions in `app/**/actions.ts` and call `revalidatePath` for the route they change.

## TypeScript
- No `any`. Use `unknown` and narrow it.
- No non-null assertions (`!`) outside tests.
- Form data, route params, and API responses are parsed with the Zod schemas in `lib/schemas/` before use.

## Styling
- Tailwind classes only. No inline `style` attributes and no new CSS files.
- Colors come from the theme tokens in `app/globals.css`. No raw hex values in components.

## Server code
- Modules that read secrets or the database import `server-only` on their first line.
- Secrets are read from `process.env` in server code only. Secret names never start with `NEXT_PUBLIC_`.

## Tests
- A component with logic gets a Vitest test next to it: `ProductCard.test.tsx` for `ProductCard.tsx`.
- A new route gets one Playwright test in `e2e/` covering its main path.

## Before opening a PR
- `pnpm tsc --noEmit`, `pnpm lint`, and `pnpm test` pass.
- No `console.log` calls remain in `app/`, `components/`, or `lib/`.

1. # Next.js with TypeScript
3. Next.js with the App Router, TypeScript in strict mode, Tailwind CSS. Package manager: pnpm.
5. ## Commands
6. - Install: `pnpm install --frozen-lockfile`
7. - Dev server: `pnpm dev`
8. - Type check: `pnpm tsc --noEmit`
9. - Lint: `pnpm lint`
10. - Unit tests: `pnpm test` (Vitest)
11. - End-to-end tests: `pnpm test:e2e` (Playwright)
13. ## Structure
14. - Routes live in `app/`. Shared UI lives in `components/`. Data access lives in `lib/data/`.
15. - Components are Server Components by default. A component that uses state, effects, or browser APIs starts with `"use client"`.
16. - Client components receive data as props. Data fetching stays in the Server Component that renders them.
17. - Mutations are Server Actions in `app/**/actions.ts` and call `revalidatePath` for the route they change.
19. ## TypeScript
20. - No `any`. Use `unknown` and narrow it.
21. - No non-null assertions (`!`) outside tests.
22. - Form data, route params, and API responses are parsed with the Zod schemas in `lib/schemas/` before use.
24. ## Styling
25. - Tailwind classes only. No inline `style` attributes and no new CSS files.
26. - Colors come from the theme tokens in `app/globals.css`. No raw hex values in components.
28. ## Server code
29. - Modules that read secrets or the database import `server-only` on their first line.
30. - Secrets are read from `process.env` in server code only. Secret names never start with `NEXT_PUBLIC_`.
32. ## Tests
33. - A component with logic gets a Vitest test next to it: `ProductCard.test.tsx` for `ProductCard.tsx`.
34. - A new route gets one Playwright test in `e2e/` covering its main path.
36. ## Before opening a PR
37. - `pnpm tsc --noEmit`, `pnpm lint`, and `pnpm test` pass.
38. - No `console.log` calls remain in `app/`, `components/`, or `lib/`.