Next.js 16 DevTools: AI-Assisted Debugging with MCP

npm run dev

npm install -D next-devtools-mcp

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

User: My /blog/[slug] page is showing stale data. Here's my page component:
[pastes code]
And here's my fetch:
[pastes more code]
The cache seems to not invalidate properly...

User: Why is /blog/[slug] showing stale data?
 
AI: Looking at your route configuration, I see the issue. Your `generateStaticParams`
runs at build time, and your fetch uses the default cache. The route is configured with:
 
- Cache mode: force-cache (inherited from layout)
- Revalidation: none set
- Dynamic: false (static generation)
 
The page pre-renders with stale data and never revalidates. You have two options:
 
1. Add revalidation to the fetch:
   fetch(url, { next: { revalidate: 3600 } })
 
2. Make the route dynamic:
   export const dynamic = 'force-dynamic'
 
Based on your traffic patterns visible in the logs, option 1 with hourly revalidation
would balance freshness with performance.

// AI prompt: "Show me my routes"
// MCP response:
{
  routes: [
    {
      path: "/",
      type: "static",
      hasLayout: true,
      components: ["RootLayout", "HomePage"]
    },
    {
      path: "/blog/[slug]",
      type: "dynamic",
      generateStaticParams: true,
      cacheMode: "force-cache"
    }
  ]
}

// AI prompt: "What errors happened on /dashboard?"
// MCP response:
{
  logs: [
    {
      source: "server",
      level: "error",
      message: "Error in generateMetadata",
      route: "/dashboard",
      stack: "..."
    },
    {
      source: "browser",
      level: "warning",
      message: "Hydration mismatch in UserAvatar",
      component: "UserAvatar"
    }
  ]
}

// AI prompt: "Is /api/users cached?"
// MCP response:
{
  route: "/api/users",
  cacheStatus: "dynamic",
  lastRevalidation: null,
  dataCache: {
    entries: 0,
    strategy: "no-store"
  }
}

// AI prompt: "Help me upgrade to Next.js 16"
// MCP triggers codemods for:
// - Async params migration
// - PPR to cacheComponents
// - Middleware to proxy
// - Image component changes

User: I'm getting hydration errors on the home page
 
AI: I can see the hydration mismatch in your logs. The error occurs in the
`DateTime` component at line 23. Looking at the component:
 
The issue is that you're rendering `new Date().toLocaleString()` without
`suppressHydrationWarning`. The server renders at build time, the client
renders at request time - different timestamps.
 
Fix: Add `suppressHydrationWarning`:
<time suppressHydrationWarning>{new Date().toLocaleString()}</time>
 
Or use a client-only rendering pattern with useEffect.

User: /products is loading slowly
 
AI: Analyzing the route, I see several issues:
 
1. Your `generateStaticParams` fetches all 10,000 products at build time
2. Each product page makes 3 sequential database calls
3. No caching is configured - every request hits the database
 
Current metrics from dev logs:
- Average response time: 2.3s
- Database queries per request: 3
 
Recommendations:
1. Limit `generateStaticParams` to top 100 products
2. Use Promise.all for parallel database calls
3. Add revalidation: `{ next: { revalidate: 3600 } }`
 
Want me to generate the optimized code?

User: My API route should cache but doesn't seem to
 
AI: Looking at your route handler, the issue is the cookies() call:
 
export async function GET() {
  const session = cookies().get('session'); // This opts out of caching
  const data = await fetchData();
  return Response.json(data);
}
 
Reading cookies makes the route dynamic. If you need session-based
data but want caching, split the routes:
 
- /api/data (cached, no auth)
- /api/user-data (dynamic, with auth)
 
Or use a Request object to read cookies without calling cookies():
export async function GET(request: Request) {
  const session = request.cookies.get('session');
  // ...
}

User: Upgrade my app to Next.js 16
 
AI: I'll run the upgrade codemods. Scanning your project...
 
Found changes needed:
1. 12 files use sync params - converting to async
2. middleware.ts needs migration to proxy.ts
3. next.config.js has deprecated options
 
Running migrations...
 
✓ Converted params to async (12 files)
✓ Renamed middleware.ts to proxy.ts
✓ Updated proxy function export
✓ Migrated experimental.ppr to cacheComponents
 
Manual steps remaining:
1. Run `npx next typegen` for updated types
2. Test async params in dynamic routes
3. Verify proxy behavior matches middleware
 
Would you like me to explain any of these changes?

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

User: Why is the API response different between main app and admin?
 
AI: Comparing the /api/users route on both apps:
 
Main app (port 3000):
- Returns 20 users
- Cached for 1 hour
- Filters: role != 'admin'
 
Admin app (port 3001):
- Returns all 150 users
- No caching
- No filters
 
The admin app includes users that the main app filters out.
The cache difference explains why main app shows old data after
user changes - it needs up to an hour to reflect updates.

/** @type {import('next').NextConfig} */
const nextConfig = {
  devIndicators: {
    buildActivity: true,
    buildActivityPosition: 'bottom-right',
  },
  experimental: {
    // MCP is enabled by default in dev, but can be configured
    mcpServer: {
      enabled: true,
      // Limit log history to reduce memory
      maxLogEntries: 1000,
      // Expose additional context
      exposeEnv: ['NODE_ENV', 'NEXT_PUBLIC_*'],
    },
  },
};
 
module.exports = nextConfig;