Guide Next.js v13+ App Router development with Server Components and routing.
npx skills add https://github.com/timelessco/recollect --skill nextjs-timelessco
Please help me install this Agent Skill. Skill: nextjs Source: https://github.com/timelessco/recollect/tree/main/.claude/skills/nextjs Command: npx skills add https://github.com/timelessco/recollect --skill nextjs-timelessco
This Skill guides developers through building Next.js applications, covering App Router, Server Components, data fetching patterns, routing, and performance optimizations—helping teams deliver server-rendered and static sites faster.
Start a new project with npx create-next-app@latest my-app, then enable App Router, and begin implementing routes in app/.
High-intent search queries and answers about installing and using this skill.
App Router enables file-based routing in the app/ directory with nested layouts, Server Components by default, and built-in support for data fetching patterns like ISR and SSG. Start with npx create-next-app@latest, enable App Router, then structure routes as files within app/ to automatically create nested pages and layouts for server-rendered and static sites.
Server Components execute only on the server, reducing bundle size and enabling direct database access, while Client Components run in the browser for interactivity. Next.js uses Server Components by default in App Router; add 'use client' directive at the top of files that need browser capabilities like event handlers or hooks.
Next.js provides automatic image optimization, metadata management for SEO, font optimization, and Suspense-enabled streaming. Configure metadata in layout files, use the Image component for responsive images, and leverage nested layouts to manage head tags and fonts across route segments for faster page loads and better search visibility.
Yes, App Router migration is supported for v13+ projects. Guidance covers incremental adoption: create an app/ directory alongside pages/, implement new routes using App Router conventions, then gradually move existing Pages Router routes. Server Components, nested layouts, and improved data fetching patterns provide performance and maintainability benefits during the transition.
App Router supports ISR (Incremental Static Regeneration) for periodic updates, SSG (Static Site Generation) for pre-rendered pages, and SSR (Server-Side Rendering) for dynamic content. Use async components and fetch() in Server Components to automatically cache or revalidate data, reducing client-side requests and improving performance.
API Routes and middleware enable authentication workflows and request handling. Create route handlers in app/api/ for endpoints, use middleware for authentication checks and request interception, and leverage Server Components to protect sensitive data. Middleware executes before route handlers, allowing centralized auth logic across your application.
cemegeInitialize SwiftUI iOS projects with configurable packages and settings.
pascallammersDeploys Next.js applications to Vercel with preview deployments and environment variables.
AdigunQIntegrate Next.js with Supabase and Drizzle ORM for type-safe database operations.
wilfriedagoDevelop full-stack Vue applications with Nuxt server-side rendering and file-based routing.
