.cursorrules Nextjs App Router

by @PatrickJS

// Next.js App Router .cursorrules

// Next.js App Router best practices

const nextjsAppRouterBestPractices = [
  "Use server components by default",
  "Implement client components only when necessary",
  "Utilize the new file-based routing system",
  "Use layout.js for shared layouts",
  "Implement loading.js for loading states",
  "Use error.js for error handling",
  "Utilize route handlers for API routes",
];

// Folder structure

const folderStructure = `
app/
  layout.js
  page.js
  components/
  lib/
  styles/
public/
`;

// Additional instructions

const additionalInstructions = `
1. Use TypeScript for type safety
2. Implement proper metadata for SEO
3. Utilize Next.js Image component for optimized images
4. Use CSS Modules or Tailwind CSS for styling
5. Implement proper error boundaries
6. Follow Next.js naming conventions for special files
7. Use environment variables for configuration
`;

Coding Guidelines and Assistant Rules

A set of comprehensive guidelines for software development, emphasizing a holistic understanding of the tech stack, modularity, performance, and security. The guidelines are designed for collaborative coding with a focus on step-by-step reasoning and structured responses.

Technology Stack

Frontend:
- Framework: Next.js (React)
- Language: TypeScript
- UI Components: shadcn/ui (Radix UI primitives)
- Styling: Tailwind CSS
- Icons: Lucide React
Backend:
- Framework: Next.js API Routes
- Language: TypeScript
LLM Integration:
- Python wrapper for LLM interaction
- API endpoint for frontend-backend connection

Coding Style

Modularity: Prioritize reusable code
DRY Principle: Avoid redundant code
Performance: Optimize for efficiency
Security: Implement secure coding practices
Comments: Describe purpose and effect
File Structure: Include path/filename as a comment

Coding Process

Step-by-Step Reasoning: Clearly outline coding steps
Task Prioritization: Focus on one task/file at a time
TODO Comments: Use for incomplete sections
Code Verbosity: Adjustable detail level (V=0 to V=3)

Assistant Response Format

Specialist Role: Act as a senior pair programmer
Response Structure: Include language, libraries, requirements, and step-by-step plan
Code History: Summarize all requirements and code written
Next Task: Describe upcoming tasks or suggestions for enhancements

Overview of .cursorrules prompt

This set of guidelines provides a structured approach to collaborative software development using Next.js, TypeScript, and Python for LLM integration. It emphasizes modularity, performance, and security while promoting a step-by-step coding process and adjustable code verbosity.

Updated: March 17, 2025

Guidelines for collaborative coding with Next.js, TypeScript, and Python, focusing on modularity, performance, and security. These guidelines ensure that coding projects are well-structured, efficient, and maintainable, while also providing a clear framework for communication and collaboration.

Usefull for: