Next.js Developer Skill

Overview

This skill provides comprehensive expertise in building production-ready Next.js applications using the App Router (Next.js 13+). It covers Server Components, data fetching patterns, routing, API routes, caching, and performance optimization.

Core Capabilities

App Router Architecture

• •Server Components: Default rendering model for optimal performance
• •Client Components: Interactive components with "use client" directive
• •Layouts: Shared UI with preserved state across routes
• •Templates: Fresh instances on navigation (no state preservation)
• •Loading UI: Streaming with loading.tsx files
• •Error Handling: Granular error boundaries with error.tsx

Data Fetching

• •Server-side fetching: Direct database/API access in Server Components
• •Caching strategies: Static, dynamic, and incremental regeneration
• •Revalidation: Time-based and on-demand cache invalidation
• •Parallel fetching: Optimized data loading patterns

Routing System

• •File-based routing: Automatic route generation from file structure
• •Dynamic routes: [param] and catch-all [...slug] patterns
• •Route groups: (folder) for organization without URL impact
• •Parallel routes: @slot for simultaneous route rendering
• •Intercepting routes: Modal patterns with (.), (..), (...)

Server Actions

• •Form handling: Progressive enhancement with action attribute
• •Mutations: Server-side data modifications
• •Revalidation: Automatic cache updates after mutations
• •Optimistic updates: Immediate UI feedback patterns

Implementation Patterns

Project Structure

app/
├── layout.tsx          # Root layout
├── page.tsx            # Home page
├── globals.css         # Global styles
├── (auth)/             # Route group
│   ├── login/page.tsx
│   └── register/page.tsx
├── dashboard/
│   ├── layout.tsx      # Dashboard layout
│   ├── page.tsx        # Dashboard home
│   ├── loading.tsx     # Loading UI
│   ├── error.tsx       # Error boundary
│   └── [id]/page.tsx   # Dynamic route
├── api/
│   └── [route]/route.ts # API routes
└── components/         # Shared components

Component Patterns

Server Component (Default)

// app/posts/page.tsx
async function PostsPage() {
  const posts = await db.posts.findMany()

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

export default PostsPage

Client Component

// app/components/counter.tsx
"use client"

import { useState } from "react"

export function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  )
}

Data Fetching Patterns

Static Generation (Default)

// Cached indefinitely (can be revalidated)
async function Page() {
  const data = await fetch('https://api.example.com/data')
  return <div>{data}</div>
}

Dynamic Rendering

// Opt out of caching
async function Page() {
  const data = await fetch('https://api.example.com/data', {
    cache: 'no-store'
  })
  return <div>{data}</div>
}

Time-based Revalidation

async function Page() {
  const data = await fetch('https://api.example.com/data', {
    next: { revalidate: 3600 } // Revalidate every hour
  })
  return <div>{data}</div>
}

Server Actions

// app/actions.ts
"use server"

import { revalidatePath } from "next/cache"

export async function createPost(formData: FormData) {
  const title = formData.get("title") as string

  await db.posts.create({ data: { title } })

  revalidatePath("/posts")
}

// app/posts/new/page.tsx
import { createPost } from "@/app/actions"

export default function NewPost() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <button type="submit">Create</button>
    </form>
  )
}

Best Practices

Performance

• •Use Server Components by default
• •Implement proper caching strategies
• •Optimize images with next/image
• •Use next/font for font optimization
• •Implement streaming with Suspense boundaries

Security

• •Validate all inputs in Server Actions
• •Use environment variables for secrets
• •Implement proper authentication patterns
• •Sanitize user-generated content

Code Organization

• •Colocate components with routes when possible
• •Use route groups for logical organization
• •Implement proper error boundaries
• •Create reusable layout patterns

Scripts

This skill includes executable scripts in the scripts/ folder:

Development

• •

  dev-server.sh: Start the development server with hot reloading

  bash

  ./scripts/dev-server.sh [--port PORT] [--turbo]
  

• •

  build-production.sh: Create optimized production build

  bash

  ./scripts/build-production.sh [--analyze]
  

• •

  analyze-bundle.sh: Analyze bundle size and dependencies

  bash

  ./scripts/analyze-bundle.sh
  

Code Generation

• •

  create-page.sh: Generate a new page with optional layout/loading/error files

  bash

  ./scripts/create-page.sh <page-path> [--layout] [--loading] [--error]
  

• •

  create-api-route.sh: Generate API route handlers

  bash

  ./scripts/create-api-route.sh <route-name> [--dynamic]
  

• •

  create-component.sh: Generate React components with optional tests

  bash

  ./scripts/create-component.sh <name> [--client] [--test] [--dir DIR]
  

Testing

• •

  setup-testing.sh: Set up Jest and React Testing Library

  bash

  ./scripts/setup-testing.sh [--playwright]
  

• •

  run-tests.sh: Run tests with various options

  bash

  ./scripts/run-tests.sh [--watch] [--coverage] [--file FILE]
  

Templates

This skill includes production-ready templates in the templates/ folder:

Pages

• •page-server.tsx: Server Component page with async data fetching, metadata, and Suspense streaming
• •page-client.tsx: Client Component page with state management, hooks, and interactivity
• •page-dynamic.tsx: Dynamic route page with params, generateStaticParams, and generateMetadata

Components

• •component-server.tsx: Server Component with data fetching and composition patterns
• •component-client.tsx: Client Component with hooks, event handlers, and localStorage

API & Backend

• •api-route.ts: Complete API route handler with CRUD, validation (Zod), auth, and CORS
• •server-action.ts: Server Actions with form handling, validation, and revalidation
• •middleware.ts: Middleware with auth, rate limiting, i18n, and security headers

Infrastructure

• •layout.tsx: Root/nested layout with navigation, footer, metadata, and fonts
• •page.test.tsx: Testing patterns for pages, components, API routes, and Server Actions

Resources

This skill includes detailed reference guides in the resources/ folder:

• •app-router-patterns.md: Comprehensive App Router patterns and examples
• •data-fetching.md: Data fetching strategies and caching
• •server-components.md: Server vs Client Components guide
• •routing-reference.md: Complete routing system reference
• •performance-optimization.md: Performance best practices
• •api-routes.md: API route handlers and patterns
• •testing-patterns.md: Testing strategies for Next.js apps

Specialization: Next.js App Router Development Version: 1.0 Last Updated: January 2026