nextjs

FractionEstate's avatarfrom FractionEstate

Next.js 16.1+ App Router patterns including Server Components, Client Components, Server Actions, Route Handlers, Turbopack, MCP integration, and modern React patterns. Use when building pages, layouts, data fetching, or API routes. Triggers on Next.js, App Router, RSC, or Server Actions questions.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 5, 2026
[Developer Tools]

When & Why to Use This Skill

This Claude skill provides expert-level guidance and automated utilities for Next.js 16.1+ development, specifically optimized for the App Router architecture. It features deep integration with the Model Context Protocol (MCP), allowing AI agents to perform real-time debugging, metadata inspection, and error detection. By covering React Server Components (RSC), Server Actions, and Turbopack, it streamlines the creation of high-performance, modern web applications while ensuring adherence to the latest React patterns.

Use Cases

  • Architecting scalable web applications using React Server Components (RSC) for optimized performance and reduced client-side JavaScript.
  • Implementing secure server-side logic and data mutations using Next.js Server Actions and Route Handlers with type-safe patterns.
  • Leveraging MCP-powered tools to perform real-time error detection, log analysis, and component hierarchy inspection during development.
  • Accelerating project migrations and upgrades to Next.js 16.1+ using automated codemods and expert architectural advice.
  • Optimizing development workflows and build speeds by configuring Turbopack and utilizing experimental bundle analysis tools.
namenextjs
descriptionNext.js 16.1+ App Router patterns including Server Components, Client Components, Server Actions, Route Handlers, Turbopack, MCP integration, and modern React patterns. Use when building pages, layouts, data fetching, or API routes. Triggers on Next.js, App Router, RSC, or Server Actions questions.
authorFractionEstate
version'16.1.1'

Next.js App Router

Expert knowledge for building modern web applications with Next.js App Router.

Next.js 16.1.1 highlights

  • Turbopack improvements: faster next dev restarts (project-dependent)
  • Bundle Analyzer (experimental): next experimental-analyze
  • Easier Debugging: next dev --inspect
  • Upgrade Command: next upgrade
  • MCP Server: Built-in /_next/mcp endpoint for coding agents

MCP Server (Coding Agents)

Next.js 16+ includes MCP support for AI coding agents via next-devtools-mcp:

Setup

// .mcp.json at project root
{
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

Available Tools

Tool Purpose
get_errors Build errors, runtime errors, and type errors
get_logs Dev log file path (browser console, server output)
get_page_metadata Routes, components, rendering info
get_project_metadata Project structure, config, dev server URL
get_server_action_by_id Lookup Server Actions by ID

Capabilities

  • Error Detection: Real-time build/runtime/type errors
  • Live State Queries: Access application state and runtime info
  • Page Metadata: Query routes, components, rendering details
  • Server Actions: Inspect Server Actions and component hierarchies
  • Knowledge Base: Query Next.js documentation
  • Migration Tools: Automated upgrade helpers with codemods
  • Playwright Integration: Browser testing via Playwright MCP

Core Concepts

Server Components (Default)

All components in the app/ directory are Server Components by default:

// app/posts/page.tsx - Server Component
export default async function PostsPage() {
  const posts = await db.post.findMany();

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

Client Components

Use 'use client' directive for interactivity:

'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
}

Server Actions

Use 'use server' for mutations:

'use server';

import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  await db.post.create({ data: { title: formData.get('title') } });
  revalidatePath('/posts');
}

File Conventions

File Purpose
page.tsx Unique UI for route
layout.tsx Shared UI wrapper
loading.tsx Loading UI (Suspense)
error.tsx Error boundary
not-found.tsx 404 UI
route.ts API endpoint

References

Assets