Home / Cursor rules / Nextjs
Nextjs
Next.js with TypeScript and Tailwind UI best practices
Cursor rules (.mdc)Public domain (CC0)
–unranked
Install
mkdir -p .cursor/rules && curl -sL https://raw.githubusercontent.com/PatrickJS/awesome-cursorrules/b044f956f021b6e8877f16781bcfc466a6a120e9/rules/nextjs.mdc -o .cursor/rules/nextjs.mdcDownloads the file at commit b044f956f021 into .cursor/rules/.
To remove it later:
rm .cursor/rules/nextjs.mdcContext cost: ≈435 tokens when used.
Rules file
--- description: "Next.js with TypeScript and Tailwind UI best practices" globs: **/*.tsx, **/*.ts, src/**/*.ts, src/**/*.tsx alwaysApply: false --- # Next.js Best Practices ## Project Structure - Use the App Router directory structure - Place components in `app` directory for route-specific components - Place shared components in `components` directory - Place utilities and helpers in `lib` directory - Use lowercase with dashes for directories (e.g., `components/auth-wizard`) ## Components - Use Server Components by default - Mark client components explicitly with 'use client' - Wrap client components in Suspense with fallback - Use dynamic loading for non-critical components - Implement proper error boundaries - Place static content and interfaces at file end ## Performance - Optimize images: Use WebP format, size data, lazy loading - Minimize use of 'useEffect' and 'setState' - Favor Server Components (RSC) where possible - Use dynamic loading for non-critical components - Implement proper caching strategies ## Data Fetching - Use Server Components for data fetching when possible - Implement proper error handling for data fetching - Use appropriate caching strategies - Handle loading and error states appropriately ## Routing - Use the App Router conventions - Implement proper loading and error states for routes - Use dynamic routes appropriately - Handle parallel routes when needed ## Forms and Validation - Use Zod for form validation - Implement proper server-side validation - Handle form errors appropriately - Show loading states during form submission ## State Management - Minimize client-side state - Use React Context sparingly - Prefer server state when possible - Implement proper loading states
Security
Scanned Nov 4, 2026 at commit b044f956f021, with Cisco's open-source skill-scanner.
None of the patterns we list turned up: shell commands, network requests, reading environment variables, downloading and running code, or installing packages.
A scan lists patterns in the code. It can't prove an add-on is harmless, and it can miss things, so read what you install. How we scan