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