Skip to main content

Next.js Testing

Test your Next.js applications with AI-powered remote browsers. No code installation required.

How It Works​

DebuggAI connects to your running Next.js development server and tests it using remote browsers. Our AI agents interact with your app just like real users would, testing everything from static pages to dynamic API routes.

Quick Setup​

1. Start Your Next.js App​

npm run dev        # Your app runs on localhost:3000

2. Create a Test​

  • Press Cmd+Alt+C in VS Code
  • Describe what to test: "Test the homepage navigation menu"
  • DebuggAI runs the test using remote browsers

3. Get Results​

  • Screenshots and recordings in VS Code Test Results panel
  • Pass/fail status with detailed analysis
  • AI insights about any issues found

Common Test Examples​

Page Navigation​

"Test navigation between homepage and product pages"
"Check that the main menu works on mobile"
"Verify the search functionality finds products"

Forms and Interactions​

"Test user registration form with valid data"
"Check login flow redirects to dashboard"
"Test contact form submission shows success message"

Dynamic Content​

"Test product page loads with correct details"
"Verify shopping cart updates when adding items"
"Check user profile displays personal information"

Next.js Features Supported​

DebuggAI automatically handles:

  • App Router & Pages Router - Both routing systems work seamlessly
  • Server Components - Tests server-rendered content as users see it
  • API Routes - Tests frontend interactions that call your API endpoints
  • Dynamic Routes - Handles parameterized pages like /product/[id]
  • Middleware - Tests authentication, redirects, and other middleware effects

Troubleshooting​

Common Issues​

  • Port not found: Make sure your Next.js app is running on the expected port
  • Extension not connected: Check that DebuggAI extension is installed and authenticated
  • Tests timing out: Ensure your app loads quickly on localhost

Getting Help​

  • Check Troubleshooting Guide for common solutions
  • Review test results and screenshots for debugging hints
  • Contact support through debugg.ai if needed

CI with Debugg CLI​

Automate Next.js testing in PRs using the Debugg CLI:

  • Use the Next.js template in Debugg CLI Workflows
  • Build with pnpm build and start with pnpm start (port 3000)
  • Set DEBUGGAI_API_KEY as a repository secret

Next: Explore React Testing for component-specific testing patterns.