Nextjs App Router Fundamentals

Migrating from Pages Router to App Router can be tricky, and this guide walks you through it systematically. It covers the full spectrum from understanding file conventions (layout.tsx, page.tsx, loading.tsx) to actually moving your routes and metadata over. The TypeScript guidance is strong, especially the hard rule against using `any` types since it'll break your build. I appreciate the side-by-side comparisons showing old Pages Router structure versus new App Router patterns. The migration steps are concrete: create root layout, move pages to the app directory, update navigation, clean up the old pages folder. It also covers metadata handling, nested layouts, and common routing patterns like dynamic routes and route groups.

skills.sh installs: 2.2K
GitHub stars: 110
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add wsimmonds/claude-nextjs-skills --skill nextjs-app-router-fundamentals --agent claude-code

Installs into .claude/skills of the current project.

Files

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[] = [];

✅ CORRECT:

function handleSubmit(e: React.FormEvent<HTMLFormElement>) { ... }
const data: string[] = [];

Common Next.js Type Patterns

// Page props
function Page({ params }: { params: { slug: string } }) { ... }
function Page({ searchParams }: { searchParams: { [key: string]: string | string[] | undefined } }) { ... }

// Form events
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { ... }
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { ... }

// Server actions
async function myAction(formData: FormData) { ... }