app-router

The app-router skill provides specialized assistance for developers building with the Next.js App Router architecture. It acts as a guide for the file-system based router, ensuring that developers follow established React Server Components and file-based routing patterns correctly. This skill is ideal for teams or individuals looking to scale their Next.js project structure while maintaining high performance through efficient route segment definitions.

• Streamlines the creation of essential file conventions including page.tsx, layout.tsx, loading.tsx, and error.tsx for route segments.
• Implements complex routing patterns such as dynamic routes ([slug]), catch-all segments ([...slug]), route groups ((folder)), and parallel routes (@slot).
• Provides automated guidance on managing metadata, both static and dynamic, ensuring SEO compliance and correct generation patterns.
• Facilitates the use of React Suspense for loading UI and Error Boundaries for robust application resilience.
• Organizes project directories by following colocation standards, private folder patterns (_folder), and intercepting routes (.).

Usage Notes:

• When creating a new route, simply prompt the skill to add a page or define a segment; it will generate the required file structure based on standard Next.js conventions.
• Use this skill for refactoring existing Pages Router applications to the App Router model to ensure compatibility with Server Components.
• Ideal for debugging routing issues, identifying misconfigured loading or error states, and managing complex nested layouts.
• Inputs expected include route paths, desired behavior (e.g., dynamic parameters), and functional requirements for layouts or UI states.
• The skill maintains adherence to the app/ directory constraints, helping to avoid common pitfalls like placing components in invalid route segments.