Nextjs Developer
Structure and implement Next.js App Router layouts, routes, and API handlers when your agent is building the web UI and server routes.
Overview
Next.js Developer is an agent skill for the Build phase that guides App Router file structure, layouts, and API route handlers for Next.js applications.
Install
npx skills add https://github.com/jeffallan/claude-skills --skill nextjs-developerWhat is this skill?
- Complete App Router tree: layouts, loading.tsx, error.tsx, not-found, template, and route groups
- Dynamic [slug], catch-all [...slug], and parallel @analytics slot patterns
- Root layout.tsx with Metadata API, Google fonts, and global CSS wiring
- Marketing route groups without URL segments for about and contact pages
- api/users/route.ts pattern for Route Handlers alongside UI routes
- Documents 7+ special App Router files: layout, page, loading, error, not-found, template, route groups
- Includes dynamic [slug] and catch-all [...slug] segment examples
- Root layout example targets Next.js 14 Metadata and font integration
Adoption & trust: 3.3k installs on skills.sh; 9.7k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your agent keeps mixing Pages Router patterns or misplacing layouts, slots, and route groups in a new Next.js app tree.
Who is it for?
Indie SaaS and content sites where one developer drives Next.js 14+ UI, marketing pages, and colocated API routes in the same codebase.
Skip if: Mobile-native apps, legacy Pages Router-only maintenance with no App Router migration plan, or backend-only services with no Next frontend.
When should I use this skill?
User is building or refactoring a Next.js application with the App Router, layouts, dynamic segments, or app/api Route Handlers.
What do I get? / Deliverables
You get a correct app/ directory scaffold with root layout, segment pages, error/loading boundaries, and route handlers matching Next.js App Router rules.
- App Router directory and file scaffold
- Layout and page TSX modules with Metadata patterns
- API Route Handler stubs under app/api
Recommended Skills
Journey fit
Build is the only primary phase: the skill is implementation guidance for Next.js file-based routing and React server components, not discovery or launch distribution. Frontend subphase matches app/, layouts, loading and error boundaries, parallel routes, and colocated route.ts API handlers.
How it compares
Skill-packaged App Router conventions beat generic React snippets that omit Metadata, slots, and route.ts handler placement.
Common Questions / FAQ
Who is nextjs-developer for?
Solo builders and small frontend-led teams using AI agents to generate and extend Next.js App Router projects correctly.
When should I use nextjs-developer?
Use it during Build while scaffolding marketing routes, dashboard shells, dynamic blog paths, and app/api Route Handlers.
Is nextjs-developer safe to install?
It is documentation and code patterns only—review the Security Audits panel on this page; apply usual dependency and secret hygiene in your Next app.
SKILL.md
READMESKILL.md - Nextjs Developer
# App Router Architecture ## File-Based Routing ``` app/ ├── layout.tsx # Root layout (required) ├── page.tsx # Home page (/) ├── loading.tsx # Loading UI ├── error.tsx # Error boundary ├── not-found.tsx # 404 page ├── template.tsx # Re-mounted layout │ ├── (marketing)/ # Route group (no URL segment) │ ├── layout.tsx │ ├── about/ │ │ └── page.tsx # /about │ └── contact/ │ └── page.tsx # /contact │ ├── dashboard/ │ ├── layout.tsx # Shared dashboard layout │ ├── page.tsx # /dashboard │ ├── settings/ │ │ └── page.tsx # /dashboard/settings │ └── @analytics/ # Parallel route (slot) │ └── page.tsx │ ├── blog/ │ ├── [slug]/ │ │ └── page.tsx # /blog/my-post (dynamic) │ └── [...slug]/ │ └── page.tsx # /blog/a/b/c (catch-all) │ └── api/ └── users/ └── route.ts # API route handler ``` ## Root Layout (Required) ```tsx // app/layout.tsx import type { Metadata } from 'next' import { Inter } from 'next/font/google' import './globals.css' const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { title: { default: 'My App', template: '%s | My App' }, description: 'Next.js 14 application', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en"> <body className={inter.className}> {children} </body> </html> ) } ``` ## Nested Layouts ```tsx // app/dashboard/layout.tsx import { Sidebar } from '@/components/sidebar' import { auth } from '@/lib/auth' import { redirect } from 'next/navigation' export default async function DashboardLayout({ children, }: { children: React.ReactNode }) { const session = await auth() if (!session) { redirect('/login') } return ( <div className="flex"> <Sidebar /> <main className="flex-1">{children}</main> </div> ) } ``` ## Templates (Re-mount on Navigation) ```tsx // app/template.tsx 'use client' import { useEffect } from 'react' export default function Template({ children }: { children: React.ReactNode }) { useEffect(() => { // Runs on every navigation console.log('Template mounted') }, []) return <div>{children}</div> } ``` ## Loading States ```tsx // app/dashboard/loading.tsx export default function Loading() { return ( <div className="flex items-center justify-center h-screen"> <div className="animate-spin rounded-full h-32 w-32 border-b-2" /> </div> ) } ``` ## Error Boundaries ```tsx // app/error.tsx 'use client' export default function Error({ error, reset, }: { error: Error & { digest?: string } reset: () => void }) { return ( <div> <h2>Something went wrong!</h2> <button onClick={() => reset()}>Try again</button> </div> ) } ``` ## Route Groups ```tsx // (marketing) and (shop) share the same URL level app/ ├── (marketing)/ │ ├── layout.tsx # Marketing layout │ └── about/ │ └── page.tsx # /about └── (shop)/ ├── layout.tsx # Shop layout └── products/ └── page.tsx # /products ``` ## Parallel Routes ```tsx // app/dashboard/layout.tsx export default function Layout({ children, analytics, team, }: { children: React.ReactNode analytics: React.ReactNode team: React.ReactNode }) { return ( <> {children} {analytics} {team} </> ) } // app/dashboard/@analytics/page.tsx export default function Analytics() { return <div>Analytics Dashboard</div> } ``` ## Intercepting Routes ```tsx // Show modal when navigating from same app // but show full page on direct navigation // app/photos/[id]/page.tsx (full page) export default function PhotoPage({ params }: { params: { id: string } }) { return <div>Photo {params.id} - Full Page</div> } // app/@modal/(.)photos/[id]/page.tsx (modal) export default function P