nextjs-app-router-fundamentals

Provide comprehensive guidance for Next.js App Router (Next.js 13+), covering migration from Pages Router, file-based routing conventions, layouts, metadata handling, and modern Next.js patterns. CRITICAL RULE: This codebase has @typescript-eslint/no-explicit-any enabled. Using any will cause build failures. ❌ WRONG: ✅ CORRECT: Use this skill when: Pages Router (Legacy - Next.js 12 and earlier): App Router (Modern - Next.js 13+): Special Files in App Router: Colocation: Examine existing Pages Router setup: Create app/layout.tsx - REQUIRED for all App Router applications: Migration Notes: Simple Page Migration: Nested Route Migration: Replace anchor tags with Next.js Link: After migration: Layout Behavior: Group routes without affecting URL: Wrong: Correct: Wrong: Correct: After migrating routes, remove the old pages/ directory files to avoid confusion. The build will fail if you have conflicting routes. Routes are NOT accessible without a page.tsx file. Layouts alone don't create routes. Wrong: Correct: All components in app/ are Server Components by default: Benefits: Use 'use client' directive when you need: generateStaticParams is the App Router equivalent of getStaticPaths from the Pages Router. It generates static pages at build time for dynamic routes.