TypeScript + Next.js Project Rules

typescriptnextjsreactfrontend

Comprehensive coding conventions and best practices for TypeScript projects using Next.js App Router, React Server Components, and modern frontend patterns.

Целевые файлы

Файл	Формат
.cursorrules	plaintext
CLAUDE.md	markdown
.github/copilot-instructions.md	markdown

Содержимое

Tech Stack: TypeScript, Next.js (App Router), React 19, Tailwind CSS. Package manager: ${package_manager}. Always use lockfile. Never use `npm install` if the project uses ${package_manager}. Use strict TypeScript — enable "strict": true in tsconfig.json. Avoid `any`; prefer `unknown` with type guards. Prefer React Server Components by default. Add "use client" only when the component needs browser APIs, hooks, or event handlers. File naming: use kebab-case for files (e.g., user-profile.tsx), PascalCase for component exports. Colocate related files: page.tsx, loading.tsx, error.tsx, and layout.tsx in the same route folder. Data fetching: use async server components and `fetch()` with Next.js caching. Avoid useEffect for data loading. Use Zod for runtime validation of API inputs, form data, and environment variables. Styling: prefer Tailwind CSS utility classes. Extract repeated patterns into reusable components, not custom CSS. Avoid default exports except for Next.js pages, layouts, and route handlers. Error handling: always provide error.tsx and not-found.tsx boundaries for each major route segment. Environment variables: prefix client-side vars with NEXT_PUBLIC_. Never expose server secrets to the client bundle. Imports: use path aliases (e.g., @/components, @/lib) instead of deep relative paths. Keep components small — under 150 lines. Extract logic into custom hooks or utility functions.

Переменные

ID	Метка	По умолчанию	Варианты
package_manager	Package Manager	pnpm	npmyarnpnpmbun

CLI

npx mindaxis apply typescript-nextjs-rules --target cursor --scope project

Используется в паках

Cursor Power User

Supercharge your Cursor IDE