nextjs-app-router-fundamentals
🎯Skillfrom wsimmonds/claude-nextjs-skills
|A comprehensive Next.js App Router skill covering migration from Pages Router, file-based routing, layouts, metadata handling, and TypeScript patterns for Next.js 13+.
Overview
A Claude Code skill that provides comprehensive guidance for working with the Next.js App Router (Next.js 13+), covering migration from Pages Router, file-based routing conventions, layouts, metadata handling, and modern Next.js patterns. It enforces strict TypeScript practices, prohibiting the use of any type to prevent build failures.
Key Features
- Pages Router to App Router Migration - Detailed guidance for converting from the legacy
pages/directory structure to the modernapp/directory with layouts and nested routing - File Convention Reference - Complete coverage of special files including layout.tsx, page.tsx, loading.tsx, and their roles in the App Router architecture
- Strict TypeScript Enforcement - Built-in rules against
anytype usage with correct type patterns for page props, form events, and server actions - Metadata and SEO Optimization - Guidance on implementing metadata handling in the App Router for search engine optimization
- Advanced Routing Patterns - Support for route groups, parallel routes, intercepting routes, and dynamic route segments
Who is this for?
This skill is designed for developers building Next.js 13+ applications who need reliable guidance on App Router conventions and patterns. It is especially valuable for teams migrating existing Pages Router applications to the App Router architecture and those who want to enforce strict TypeScript standards in their Next.js projects.
Same repository
wsimmonds/claude-nextjs-skills(9 items)
Installation
npx vibeindex add wsimmonds/claude-nextjs-skills --skill nextjs-app-router-fundamentalsnpx skills add wsimmonds/claude-nextjs-skills --skill nextjs-app-router-fundamentals~/.claude/skills/nextjs-app-router-fundamentals/SKILL.mdSKILL.md
More from this repository8
Guides developers in choosing between Next.js Server and Client Components, handling routing, searchParams, and component rendering strategies effectively.
Guides advanced Next.js App Router patterns including Route Handlers, Parallel Routes, Intercepting Routes, Server Actions with 'use server' directive, error boundaries, draft mode, streaming with Suspense, and cookie handling from client components.
Vercel AI SDK v5 implementation skill for building AI chat interfaces with useChat hook, streaming responses, tool calling, embeddings, and MCP integration
Provides a two-file pattern for Next.js client components calling server actions to set cookies, covering the separation of client-side interaction (onClick, form submission) from server-side cookie operations for authentication, preferences, or session management.
Explains the required pattern for using Next.js useSearchParams hook with a Suspense boundary, covering single-file and inline patterns for building search interfaces, filters, and pagination that read URL query parameters client-side.
Guides implementing navigation in Next.js Server Components using the Link component and redirect() function, covering the distinction between server and client navigation methods to avoid unnecessary 'use client' conversions.
Guides creating Next.js App Router dynamic routes and working with pathname parameters, covering dynamic segments ([id], [slug]), catch-all routes, the params prop, and strategies to avoid over-nesting by defaulting to the simplest route structure.
Provides a focused pattern for fetching data using URL parameters in Next.js dynamic routes ([id], [slug]), demonstrating how to access route parameters in server components to load individual items like product pages, blog posts, or user profiles.