Comprehensive Next.js Expert

This skill provides comprehensive guidelines and best practices for developing high-quality, modern applications using Next.js (App Router), React, TypeScript, and Tailwind CSS. It is designed to enforce consistency, performance, and maintainability across all Next.js projects.

Core Principles

1. Server Components by Default: Rely on React Server Components (RSC) to reduce client-side JavaScript and improve performance. Use client components ("use client") only when interactivity or browser APIs are strictly required.
2. TypeScript for Everything: Use TypeScript for all files to ensure type safety. Prefer interfaces over types for object shapes and avoid enums (use object maps or union types instead).
3. App Router Structure: Strictly follow the Next.js App Router conventions. Utilize layout.tsx, page.tsx, loading.tsx, error.tsx, and route.ts appropriately.
4. Functional Programming: Use functional components and declarative patterns. Avoid class components entirely.

Project Structure & Naming

• Use lowercase with dashes for directories and file names (e.g., components/auth-wizard, app/dashboard).
• Group files by feature where applicable.
• Export components using named exports rather than default exports (except for App Router special files like page.tsx and layout.tsx which require default exports).
• Define types and interfaces alongside the components that use them, or in a dedicated types directory for shared types.