All examples

Next.js app (TypeScript), Cursor rule

The Next.js rules as a Cursor .mdc rule: same content, with frontmatter that applies it to every request.

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

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

File

nextjs.mdc, 43 lines

Format

Cursor rule (.mdc)

Save as

.cursor/rules/nextjs.mdc

Category

JavaScript

Tags

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

License

CC0 1.0, public domain. No attribution needed.

Download nextjs.mdc Lint a copy

Badge

Markdown for a README:

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

nextjs.mdc

View rendered

---
description: Next.js with TypeScript
alwaysApply: true
---

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