Setup

Verify Next.js Project Setup

Confirm that a Next.js project is properly configured for modern App Router development. Run these checks in order and report results.

Prerequisites

• Node.js 20.9+ installed (Next.js 16 minimum); TypeScript 5.1+
• A Next.js project directory with package.json

Step 1: Check Next.js Version

Read package.json and locate the next dependency:

{
  "dependencies": {
    "next": "^16.0.0"
  }
}

Step 2: Verify App Router Structure

Check that the project uses the app/ directory (not just pages/):

app/
├── layout.tsx       # Root layout (required)
├── page.tsx         # Home page
├── loading.tsx      # Optional loading state
├── error.tsx        # Optional error boundary
└── not-found.tsx    # Optional 404 page

If only pages/ exists, the project uses the legacy Pages Router. Recommend migrating to App Router for new features.

Step 3: Verify TypeScript Configuration

Check for tsconfig.json with Next.js recommended settings:

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "jsx": "preserve",
    "module": "esnext",
    "moduleResolution": "bundler",
    "strict": true,
    "paths": {
      "@/*": ["./src/*"]
    },
    "plugins": [{ "name": "next" }]
  }
}

Key checks:

• strict: true is set
• Path aliases (@/*) are configured
• The next plugin is present for IDE support

Step 4: Verify Next.js Config

Check for next.config.ts (TypeScript) or next.config.mjs:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  // Configuration options
}

export default nextConfig

The config file can be next.config.ts natively (TypeScript is fully supported). Common configuration to verify:

• images.remotePatterns — if using external image domains
• cacheComponents — must be true for use cache / Cache Components (16+)
• experimental — any experimental features enabled
• output — 'standalone' for Docker deployments

Step 5: Check Dev Server

Run the development server to confirm it starts:

npm run dev
# or
pnpm dev

Verify the server starts on http://localhost:3000 without errors.

Step 6: Verify MCP Integration (Next.js 16+)

For Next.js 16+, the built-in MCP endpoint is available at /_next/mcp when the dev server is running. Check for .mcp.json in the project root:

{
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

Or install with one command: npx add-mcp next-devtools-mcp@latest.

If not present, recommend adding it for enhanced AI-assisted development.

Optional: CI Type Checking

Recommend next typegen && npx tsc --noEmit in CI — next typegen generates route and PageProps types without a full build.

What This Skill Does NOT Cover

• Installing Node.js or package managers — see Node.js official docs
• Creating a new project from scratch — use npx create-next-app@latest
• Configuring MCP servers — that belongs to project-level .mcp.json configuration
• Setting up CI/CD or deployment — see deployment guides