mcp/hanzo_mcp/rules/javascript/javascript-nextjs-cursorrules.rules

---
name: JavaScript Next.js Best Practices
description: Rules for JavaScript development with Next.js
version: 1.0.0
author: Hanzo MCP
technologies:
  - JavaScript
  - Next.js
  - React
focus:
  - frontend
  - web development
---

# JavaScript Next.js Development Rules

When generating JavaScript code for Next.js projects, please adhere to the following guidelines:

## General Code Style

1. Use ES6+ features and syntax.
2. Prefer const over let; avoid var.
3. Use arrow functions for callbacks and anonymous functions.
4. Use template literals instead of string concatenation.
5. Use destructuring for props and state.
6. Apply meaningful variable and function names that describe their purpose.

## Next.js Specific Guidelines

1. Use the App Router for new projects.
2. Implement server-side rendering where appropriate for SEO-critical pages.
3. Place page components in the app directory with appropriate route segments.
4. Use the Link component from next/link for client-side navigation.
5. Implement proper loading states and error boundaries.
6. Use next/image for optimized image loading.
7. Prefer server components for data fetching.

## React Component Structure

1. Use functional components with hooks instead of class components.
2. Organize imports in the following order:
   - React and Next.js imports
   - Third-party library imports
   - Component imports
   - Utility/helper imports
   - Style imports
3. Create reusable components for UI elements used in multiple places.
4. Keep components focused on a single responsibility.

## Data Fetching

1. Use server components for data fetching where possible.
2. For client components, use the SWR library for client-side data fetching.
3. Implement proper loading states and error handling for data fetching.
4. Use environment variables for API endpoints and other configuration.

## Routing

1. Follow the Next.js App Router conventions.
2. Implement proper dynamic routing where needed.
3. Use middleware for authentication and other cross-cutting concerns.

## Performance Optimization

1. Implement code splitting using dynamic imports.
2. Optimize images using next/image.
3. Minimize client-side JavaScript.
4. Implement proper caching strategies.

## Accessibility

1. Use semantic HTML elements.
2. Implement proper ARIA attributes where needed.
3. Ensure keyboard navigation works properly.
4. Maintain sufficient color contrast.

Following these guidelines will help ensure consistent, maintainable, and performant Next.js applications.