nextjs-app-router-fundamentals

The `nextjs-app-router-fundamentals` skill provides comprehensive guidance for developers working with Next.js 13+ and its modern App Router system. It addresses the transition from the legacy Pages Router to the App Router, covering essential topics such as file-based routing, nested layouts, metadata handling, and routing conventions. By using this skill, developers can avoid common pitfalls and streamline the migration process, ensuring their applications adhere to the latest Next.js best practices. It also emphasizes strict TypeScript usage, enforcing type safety to prevent build failures due to the use of `any` types.

This skill equips developers with detailed insights into Next.js App Router features, including layout creation, page organization, error handling, loading states, and API route definitions. It highlights the differences between legacy Pages Router and modern App Router structures, explains special files such as `layout.tsx`, `page.tsx`, `route.ts`, and demonstrates common TypeScript patterns for handling page props, form events, and server actions. It also covers colocation principles, ensuring that only specific files create public routes while other supporting files remain non-routable.

The skill is particularly useful for developers migrating existing applications to Next.js 13+, building new projects from scratch, or implementing advanced routing patterns like route groups, parallel routes, and intercepting routes. Target users include front-end developers familiar with React and TypeScript who want to adopt modern Next.js patterns efficiently, maintain scalable code structures, and optimize SEO and metadata handling within their applications.