Next.js Aider Configuration

A comprehensive Aider configuration for Next.js projects with TypeScript, automated testing, linting, and best practices enforcement.

What This Skill Does

This skill configures Aider to work optimally with Next.js applications by:

Instructions

When setting up Aider for a Next.js project:

1. **Initialize Configuration**

- Create `.aider.conf.yml` in project root

- Set `editor-model` to `claude-3-5-sonnet-20241022`

- Set `editor-edit-format` to `diff` for precise changes

2. **Configure Testing Pipeline**

- Define `test-cmd` array with:

- `pnpm test run` for unit/integration tests

- `pnpm type-check` for TypeScript validation

- `pnpm lint` for code quality checks

- Enable `watch-files: true` for real-time monitoring

3. **Establish Context Files**

- Add key files to `read` array that should always be in context:

- Type definitions (`src/types/index.ts`)

- Constants (`src/constants/index.ts`)

- Core utilities (`src/lib/api.ts`, `src/lib/utils.ts`)

- Project docs (`CLAUDE.md`)

- Dependency manifest (`package.json`)

4. **Set Up Linting**

- Enable `lint: true`

- Configure `lint-cmd` to run project linter

- Ensure linting happens before commits

5. **Configure Auto-Commits**

- Enable `auto-commits: true`

- Set `commit-prompt` template using semantic commit format

- Example: `feat: implement {description} with tests and documentation`

6. **Architecture Awareness**

- Set `map-tokens: 2048` for codebase mapping

- Set `map-refresh: auto` for dynamic updates

- This helps Aider understand project structure

7. **Enforce Code Style**

- Define `code-style` block with project conventions:

- TypeScript strict mode usage

- API route patterns (e.g., follow `src/lib/api.ts`)

- Tailwind utility patterns (e.g., use `cn()` for conditional classes)

- Testing requirements (comprehensive coverage for new features)

- Component structure guidelines

- Validation patterns (e.g., Zod for API routes)

- Error handling standards

8. **Apply to Next.js Projects**

- Adapt file paths in `read` array to match your structure

- Update `test-cmd` if using different package manager (npm, yarn, bun)

- Modify `code-style` to reflect your team's conventions

- Add framework-specific patterns (e.g., App Router vs Pages Router)

9. **Usage Pattern**

- Run `aider` in project root to start session with configuration

- Aider will automatically include context files

- Tests and linting run after each change

- Commits generated with semantic message structure

Example

```yaml

.aider.conf.yml

editor-model: claude-3-5-sonnet-20241022

editor-edit-format: diff

test-cmd:

- 'pnpm test run'

- 'pnpm type-check'

- 'pnpm lint'

watch-files: true

read:

- 'src/types/index.ts'

- 'src/constants/index.ts'

- 'src/lib/api.ts'

- 'src/lib/utils.ts'

- 'package.json'

- 'CLAUDE.md'

lint: true

lint-cmd:

- 'pnpm lint'

auto-commits: true

commit-prompt: 'feat: implement {description} with tests and documentation'

map-tokens: '2048'

map-refresh: auto

code-style: |

- Use TypeScript with strict typing

- Follow existing patterns in src/lib/api.ts for API routes

- Use the cn() utility for conditional Tailwind classes

- Create comprehensive tests for all new features

- Follow the component patterns established in src/components/

- Use Zod for validation in API routes

- Implement proper error handling with standardized responses

```

Important Notes