Developer Tools

Next.js Developer Tools: Your Secret Workshop 🛠️

Imagine you’re a wizard with a magical workshop. Every wizard needs special tools to craft amazing spells. In the world of Next.js, Developer Tools are your magical instruments—they help you peek behind the curtain, catch mistakes, and build incredible web experiences.

Let’s explore each tool in your workshop!

🎭 Draft Mode: Your “Sneak Peek” Glasses

The Story

Imagine you’re writing a book. Before anyone reads it, you want to see how your story looks on paper—even the parts you haven’t finished yet. Draft Mode is like wearing special glasses that let ONLY YOU see the unpublished pages!

What It Does

Draft Mode lets you preview unpublished content from your CMS (Content Management System) without showing it to everyone else.

Real Life Example:

• You write a blog post but don’t publish it yet
• With Draft Mode ON → You can see it on your website
• Everyone else → Sees nothing (it’s still hidden!)

How To Use It

// app/api/draft/route.js
import { draftMode } from 'next/headers'

export async function GET() {
  const draft = await draftMode()
  draft.enable()
  return new Response('Draft mode ON!')
}

To turn it OFF:

export async function GET() {
  const draft = await draftMode()
  draft.disable()
  return new Response('Draft mode OFF!')
}

To CHECK if it’s on:

import { draftMode } from 'next/headers'

export default async function Page() {
  const { isEnabled } = await draftMode()

  return (
    <p>Draft Mode: {isEnabled ? 'ON' : 'OFF'}</p>
  )
}

When To Use It

• Previewing blog posts before publishing
• Testing new pages privately
• Showing clients work-in-progress

🎬 Instrumentation Hook: Your “Opening Ceremony” Helper

The Story

Think of your app as a theater show. Before the curtains open, someone needs to set up the lights, check the microphones, and make sure everything is ready. The Instrumentation Hook is your backstage helper who runs ONCE when your app starts.

What It Does

The register() function runs ONE time when your Next.js server starts. It’s perfect for setting up monitoring, logging, or error tracking tools.

How To Use It

Create a file called instrumentation.js in your project root:

// instrumentation.js
export async function register() {
  console.log('App is starting up!')

  // Set up your monitoring tools here
  if (process.env.NODE_ENV === 'production') {
    // Initialize error tracking
    // Set up performance monitoring
  }
}

For Server vs Edge:

// instrumentation.js
export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    // Server-side setup
    console.log('Server runtime ready!')
  }

  if (process.env.NEXT_RUNTIME === 'edge') {
    // Edge runtime setup
    console.log('Edge runtime ready!')
  }
}

When To Use It

• Setting up error tracking (like Sentry)
• Initializing monitoring tools
• Logging when your app starts

🚨 onRequestError Hook: Your “Error Catcher” Net

The Story

Imagine you’re a circus performer. Below you is a safety net that catches you if you fall. The onRequestError Hook is your app’s safety net—it catches ALL errors and tells you exactly what went wrong!

What It Does

This hook runs whenever an error happens during a request. You can use it to log errors, send alerts, or report issues to your monitoring service.

How To Use It

Add this to your instrumentation.js:

// instrumentation.js
export async function onRequestError(err, request, context) {
  // err = the error that happened
  // request = info about the request
  // context = where the error occurred

  console.error('Error caught:', err.message)
  console.log('Path:', request.path)
  console.log('Where:', context.routerKind)

  // Send to your error service
  await reportToService({
    error: err,
    path: request.path,
    type: context.routeType
  })
}

What You Get:

export async function onRequestError(err, request, context) {
  // request contains:
  // - path: '/blog/post-1'
  // - method: 'GET'
  // - headers: { ... }

  // context contains:
  // - routerKind: 'App Router' or 'Pages Router'
  // - routePath: '/blog/[slug]'
  // - routeType: 'page', 'route', 'middleware'
  // - revalidateReason: 'fetch' (if during revalidation)
}

When To Use It

• Automatic error logging
• Sending alerts when things break
• Understanding where errors happen

🤖 Next.js MCP Server: Your “AI Assistant” Bridge

The Story

Imagine having a super-smart robot friend who can read your code and help you fix it. The MCP Server (Model Context Protocol) lets AI assistants like Claude understand your Next.js project and help you better!

What It Does

The MCP Server shares your project information with AI tools, so they can:

• Read your config files
• Understand your routes
• Help debug issues faster

How To Use It

Install it globally:

npm install -g @anthropic-ai/mcp

Configure for Claude Desktop:

Add to your Claude config file:

{
  "mcpServers": {
    "nextjs": {
      "command": "npx",
      "args": [
        "@anthropic-ai/mcp-server-nextjs",
        "--project-path",
        "/path/to/your/project"
      ]
    }
  }
}

What It Shares:

• Your next.config.js settings
• Your route structure
• Error messages with context
• Build configuration

When To Use It

• Getting AI help with debugging
• Letting Claude understand your project structure
• Faster problem-solving with AI assistants

📊 useReportWebVitals Hook: Your “Health Check” Monitor

The Story

Just like a doctor checks your heartbeat and temperature, useReportWebVitals checks your website’s health! It measures how fast your pages load and how smooth they feel.

What It Does

It tracks Web Vitals—special measurements that tell you if your website is healthy:

How To Use It

Create a component to track vitals:

// app/components/WebVitals.js
'use client'

import { useReportWebVitals } from 'next/web-vitals'

export function WebVitals() {
  useReportWebVitals((metric) => {
    console.log(metric.name, metric.value)

    // Send to your analytics
    sendToAnalytics({
      name: metric.name,
      value: metric.value,
      id: metric.id
    })
  })

  return null
}

Use it in your layout:

// app/layout.js
import { WebVitals } from './components/WebVitals'

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <WebVitals />
        {children}
      </body>
    </html>
  )
}

The metric object includes:

{
  id: 'unique-id',
  name: 'LCP',        // Which vital
  value: 1234,        // The measurement
  delta: 56,          // Change since last
  rating: 'good'      // 'good', 'needs-improvement', 'poor'
}

When To Use It

• Tracking real user performance
• Sending data to analytics
• Finding slow pages

🏰 Multi-zones Setup: Your “Kingdom of Websites”

The Story

Imagine you have a kingdom with different villages. Each village has its own mayor and rules, but they’re all part of YOUR kingdom. Multi-zones lets you combine multiple Next.js apps into ONE website!

What It Does

Multi-zones connects separate Next.js applications under one domain. Each “zone” handles different parts of your site.

yoursite.com/
  ├── /          → Main App (Zone 1)
  ├── /blog      → Blog App (Zone 2)
  └── /shop      → Shop App (Zone 3)

How To Use It

Zone 1 - Main App (next.config.js):

// main-app/next.config.js
module.exports = {
  async rewrites() {
    return {
      fallback: [
        {
          source: '/blog/:path*',
          destination: 'https://blog.example.com/:path*'
        },
        {
          source: '/shop/:path*',
          destination: 'https://shop.example.com/:path*'
        }
      ]
    }
  }
}

Zone 2 - Blog App (next.config.js):

// blog-app/next.config.js
module.exports = {
  basePath: '/blog',
  // All routes now start with /blog
}

Zone 3 - Shop App (next.config.js):

// shop-app/next.config.js
module.exports = {
  basePath: '/shop',
  // All routes now start with /shop
}

The Flow

graph TD
    A["User visits yoursite.com"] --> B{Which path?}
    B -->|/| C["Main App handles it"]
    B -->|/blog/*| D["Rewrites to Blog App"]
    B -->|/shop/*| E["Rewrites to Shop App"]
    C --> F["User sees main page"]
    D --> G["User sees blog"]
    E --> H["User sees shop"]

Important Rules

1. Each zone manages its own pages - No overlapping routes!
2. Use basePath - So each app knows its starting point
3. Rewrites connect them - The main app redirects to other zones

When To Use It

• Large sites with different teams
• Mixing old and new Next.js versions
• Gradually migrating a big website
• Separating concerns (blog team, shop team)

🎯 Quick Summary

🚀 You Did It!

You now know the six powerful developer tools in your Next.js workshop:

1. Draft Mode 🎭 - Sneak peek at unpublished content
2. Instrumentation 🎬 - Set up your app at startup
3. onRequestError 🚨 - Catch errors like a safety net
4. MCP Server 🤖 - Connect AI assistants to help you
5. useReportWebVitals 📊 - Check your website’s health
6. Multi-zones 🏰 - Build a kingdom of connected apps

Each tool makes you a better developer. Use them wisely, and your Next.js apps will be stronger, faster, and easier to debug!

Happy coding, wizard! ✨