---

name: nextjs description: 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. metadata: author: FractionEstate 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

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

Available Tools

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:

Copy// 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:

Copy'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:

Copy'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

References

• references/routing.md - Routing patterns
• references/data-fetching.md - Data fetching strategies
• references/server-actions.md - Server Actions guide

Assets

• assets/page.tsx - Basic page template
• assets/layout.tsx - Layout template
• assets/route-handler.ts - API route template
• assets/server-action.ts - Server Action template
• assets/middleware.ts - Middleware template