Agent skill · writing content · wsimmonds
nextjs-app-router-fundamentals
Guide for working with Next.js App Router (Next.js 13+). Use when migrating from Pages Router to App Router, creating layouts, implementing routing, handling metadata, or building Next.js 13+ applications. Activates for App Router migration, layout creation, routing patterns, or Next.js 13+ development tasks.
Why this skill is useful
Provides specific patterns and migration steps for Next.js 13+ that the AI wouldn't reliably generate on its own.
What it needs
About 10k tokens when loaded. Last updated 2025-10-24. 109 stars on the source repository.
What this skill does
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: ✅ CORRECT: Common Next.js Type Patterns 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): App Router (Modern - Next.js 13+): 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: Migration Notes: Move …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills wsimmonds/nextjs-app-router-fundamentals