nextjs-app-router-fundamentals

SKILL.md

Comprehensive guide for migrating to and building with Next.js App Router (13+).

Covers migration from Pages Router including file structure mapping, layout creation, metadata handling, and cleanup steps

Explains App Router file conventions (page.tsx, layout.tsx, loading.tsx, error.tsx, route.ts) and routing patterns (dynamic routes, catch-all, route groups)

Details Server Components as the default with async/await support, Client Components with 'use client' directive, and data fetching patterns including parallel requests

Includes generateStaticParams for static site generation with multiple dynamic segments and fallback configuration

Enforces strict TypeScript typing (no any type) with common Next.js type patterns for page props, form events, and server actions

Next.js App Router Fundamentals

Overview

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.

TypeScript: NEVER Use any Type

CRITICAL RULE: This codebase has @typescript-eslint/no-explicit-any enabled. Using any will cause build failures.

❌ WRONG:

function handleSubmit(e: any) { ... }
const data: any[] = [];