Nextjs Developer

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 => 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

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

• build-production.sh: Create optimized production build

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

• analyze-bundle.sh: Analyze bundle size and dependencies

  ./scripts/analyze-bundle.sh
  

Code Generation

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

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

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

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

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

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

Testing

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

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

• run-tests.sh: Run tests with various options

  ./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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.