Nextjs App Router Fundamentals
Migrate to or build on Next.js 13+ App Router with correct routing, layouts, metadata typing, and strict TypeScript—no any types.
Overview
Next.js App Router Fundamentals is an agent skill for the Build phase that guides App Router migration, layouts, routing, metadata, and strict no-any TypeScript for Next.js 13+.
Install
npx skills add https://github.com/wsimmonds/claude-nextjs-skills --skill nextjs-app-router-fundamentalsWhat is this skill?
- App Router migration and file-based routing conventions for Next.js 13+
- Layouts, metadata handling, and modern routing patterns in one guided skill
- Hard rule: never use any—@typescript-eslint/no-explicit-any breaks builds
- Typed page params, searchParams, form events, and FormData server actions
- Allowed agent tools: Read, Write, Edit, Glob, Grep, Bash for codebase work
- CRITICAL RULE: never use any when @typescript-eslint/no-explicit-any is enabled
Adoption & trust: 2.1k installs on skills.sh; 99 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are on Next.js 13+ but Pages Router habits, untyped params, or any types keep breaking eslint and confusing layout versus page boundaries.
Who is it for?
Solo developers shipping or migrating SaaS and marketing sites on the App Router with agent-assisted refactors.
Skip if: Legacy Pages Router-only apps with no migration intent, or backend API design outside Next.js route handlers.
When should I use this skill?
Migrating to App Router, creating layouts, implementing routing or metadata, or any Next.js 13+ App Router development task per skill description.
What do I get? / Deliverables
Your agent applies App Router file conventions, typed route and form handlers, and metadata patterns that pass strict TypeScript lint in this codebase.
- App Router route and layout structure
- Typed page and server action handlers
- Metadata configuration aligned with app directory conventions
Recommended Skills
Journey fit
App Router fundamentals are Build-phase frontend architecture for modern Next.js applications. Frontend is canonical because the skill covers file-based routing, layouts, page props, and client/server patterns—not DevOps deploy pipelines.
How it compares
Framework-specific App Router playbook—not a generic React hooks tutorial or a deployment/CI skill.
Common Questions / FAQ
Who is nextjs-app-router-fundamentals for?
Builders using Claude Code, Cursor, or similar agents on Next.js 13+ who need migration help, layouts, and lint-safe TypeScript patterns.
When should I use nextjs-app-router-fundamentals?
During Build when migrating from Pages Router, adding app directory layouts, implementing dynamic routes, handling metadata, or fixing any-related build failures.
Is nextjs-app-router-fundamentals safe to install?
Review Security Audits on this Prism page; the skill declares Bash and filesystem write tools—use only in repos you trust and control.
SKILL.md
READMESKILL.md - Nextjs App Router Fundamentals
# 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:** ```typescript function handleSubmit(e: any) { ... } const data: any[] = []; ``` **✅ CORRECT:** ```typescript function handleSubmit(e: React.FormEvent<HTMLFormElement>) { ... } const data: string[] = []; ``` ### Common Next.js Type Patterns ```typescript // 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) { ... } ``` ## When to Use This Skill Use this skill when: - Migrating from Pages Router (`pages/` directory) to App Router (`app/` directory) - Creating Next.js 13+ applications from scratch - Working with layouts, templates, and nested routing - Implementing metadata and SEO optimizations - Building with App Router routing conventions - Handling route groups, parallel routes, or intercepting routes basics ## Core Concepts ### App Router vs Pages Router **Pages Router (Legacy - Next.js 12 and earlier):** ``` pages/ ├── index.tsx # Route: / ├── about.tsx # Route: /about ├── _app.tsx # Custom App component ├── _document.tsx # Custom Document component └── api/ # API routes └── hello.ts # API endpoint: /api/hello ``` **App Router (Modern - Next.js 13+):** ``` app/ ├── layout.tsx # Root layout (required) ├── page.tsx # Route: / ├── about/ # Route: /about │ └── page.tsx ├── blog/ │ ├── layout.tsx # Nested layout │ └── [slug]/ │ └── page.tsx # Dynamic route: /blog/:slug └── api/ # Route handlers └── hello/ └── route.ts # API endpoint: /api/hello ``` ### File Conventions **Special Files in App Router:** - `layout.tsx` - Shared UI for a segment and its children (preserves state, doesn't re-render) - `page.tsx` - Unique UI for a route, makes route publicly accessible - `loading.tsx` - Loading UI with React Suspense - `error.tsx` - Error UI with Error Boundaries - `not-found.tsx` - 404 UI - `template.tsx` - Similar to layout but re-renders on navigation - `route.ts` - API endpoints (Route Handlers) **Colocation:** - Components, tests, and other files can be colocated in `app/` - Only `page.tsx` and `route.ts` files create public routes - Other files (components, utils, tests) are NOT routable ## Migration Guide: Pages Router to App Router ### Step 1: Understand the Current Structure Examine existing Pages Router setup: - Read `pages/` directory structure - Identify `_app.tsx` - handles global state, layouts, providers - Identify `_document.tsx` - customizes HTML structure - Note metadata usage (`next/head`, `<Head>` component) - List all routes and dynamic segments ### Step 2: Create Root Layout Create `app/layout.tsx` - **REQUIRED** for all App Router applications: ```typescript // app/layout.tsx export const metadata = { title: 'My App', description: 'App des