Skip to main content

Next.js Testing

DebuggAI provides comprehensive end-to-end testing capabilities for Next.js applications through our VS Code and Cursor extensions. Test your Next.js apps directly from your IDE with zero configuration required.

Overview​

Next.js applications are perfect for DebuggAI's testing approach because they typically run on localhost during development. Our AI agents can interact with your Next.js app just like real users would, testing everything from static pages to dynamic API routes.

Prerequisites​

Before testing your Next.js application with DebuggAI:

  • Next.js 12.x or later (supports both App Router and Pages Router)
  • DebuggAI extension installed in VS Code or Cursor
  • Your Next.js development server running locally
  • DebuggAI account connected through the extension

Getting Started​

Step 1: Start Your Next.js Development Server​

Make sure your Next.js application is running locally:

# Using npm
npm run dev

# Using yarn
yarn dev

# Using pnpm
pnpm dev

# Using bun
bun dev

Your app will typically be available at http://localhost:3000.

Step 2: Configure the Extension​

  1. Open VS Code or Cursor
  2. Access DebuggAI extension settings (Cmd+, / Ctrl+,)
  3. Search for "DebuggAI"
  4. Set "Local Server Port" to your Next.js port (usually 3000)

Step 3: Create Your First Test​

  1. Open Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
  2. Run "DebuggAI: Create New E2E Test" or use Cmd+Alt+C / Ctrl+Alt+C
  3. Describe your test in natural language

Next.js-Specific Testing Scenarios​

Testing Pages and Routing​

DebuggAI understands Next.js routing patterns and can test navigation between pages:

Example test descriptions:
• Test navigation from home page to about page
• Verify dynamic routing with product pages
• Test nested routing in dashboard sections
• Check 404 page handling for invalid routes

API Routes Testing​

Test your Next.js API routes through the frontend:

Example test descriptions:
• Test user registration flow with API validation
• Verify login form submits to authentication API
• Test contact form submission to API endpoint
• Check API error handling in the UI

App Router vs Pages Router​

DebuggAI works seamlessly with both routing systems:

App Router (Next.js 13+):

  • Tests server components and client components
  • Validates loading states and error boundaries
  • Tests parallel routes and intercepting routes

Pages Router (Traditional):

  • Tests getServerSideProps and getStaticProps data
  • Validates dynamic imports and code splitting
  • Tests custom _app and _document functionality

Server-Side Rendering (SSR)​

DebuggAI can test SSR functionality by verifying:

Example test descriptions:
• Test page loads with server-rendered content
• Verify SEO meta tags are properly set
• Check hydration works correctly
• Test dynamic data fetching on page load

Static Site Generation (SSG)​

For statically generated pages:

Example test descriptions:
• Test static blog post pages render correctly
• Verify static product pages display proper content
• Check incremental static regeneration updates
• Test static form submissions work

Advanced Next.js Testing Features​

Testing with Different Configurations​

DebuggAI adapts to your Next.js configuration:

// next.config.js
const nextConfig = {
  // DebuggAI works with all configurations
  experimental: {
    appDir: true,          // App Router support
  },
  images: {
    domains: ['example.com'], // Image optimization testing
  },
  i18n: {
    locales: ['en', 'fr'],   // Internationalization testing
  },
  // Custom configurations are automatically handled
}

Environment Variables​

Test different environments by configuring your .env files:

# .env.local
NEXT_PUBLIC_API_URL=http://localhost:8000
DATABASE_URL=your_test_database_url

# DebuggAI tests will use these environment variables
# when running against your local development server

Middleware Testing​

Test Next.js middleware functionality:

Example test descriptions:
• Test authentication middleware redirects
• Verify rate limiting middleware works
• Check geolocation middleware behavior
• Test custom middleware functions

Testing with External Services​

When your Next.js app integrates with external services:

Example test descriptions:
• Test payment flow with Stripe integration
• Verify email signup with SendGrid
• Check authentication with Auth0
• Test data fetching from external APIs

Best Practices for Next.js Testing​

Organizing Tests by Feature​

Structure your test descriptions around user flows:

Authentication Flow:
• Test user registration with email verification
• Test login with valid credentials
• Test password reset functionality
• Test logout and session cleanup

E-commerce Flow:
• Test product browsing and filtering
• Test adding items to cart
• Test checkout process with payment
• Test order confirmation and email

Testing Responsive Design​

DebuggAI can test responsive behavior:

Example test descriptions:
• Test mobile navigation menu functionality
• Verify responsive layout on tablet view
• Check touch interactions on mobile
• Test desktop hover states and animations

Performance Testing​

Monitor your Next.js app's performance:

Example test descriptions:
• Test page load times under normal conditions
• Verify lazy loading works for images
• Check code splitting reduces bundle size
• Test Core Web Vitals meet standards

Common Next.js Testing Patterns​

Form Validation​

Test Description: "Test contact form validation and submission"

DebuggAI will:
1. Fill out the form with various inputs
2. Test required field validation
3. Test email format validation
4. Submit valid form data
5. Verify success message appears

Data Fetching​

Test Description: "Test blog post page loads with correct content"

DebuggAI will:
1. Navigate to a blog post URL
2. Verify content loads properly
3. Check images and media display
4. Test related posts section
5. Verify SEO metadata

User Authentication​

Test Description: "Test complete user authentication flow"

DebuggAI will:
1. Visit registration page
2. Fill out signup form
3. Handle email verification (if applicable)
4. Test login with new credentials
5. Verify protected routes work
6. Test logout functionality

Debugging Next.js Tests​

Common Issues and Solutions​

Port Configuration:

  • Ensure extension is configured for correct port (usually 3000)
  • Check your Next.js dev server is running
  • Verify no other services are using the same port

Build vs Development Mode:

  • DebuggAI tests against your development server
  • No need to run next build for testing
  • Tests reflect your current development state

API Route Issues:

  • Ensure API routes are working in development
  • Check network tab for API call failures
  • Verify environment variables are set

Test Result Analysis​

DebuggAI provides detailed results for Next.js apps:

  • Screenshots: Visual progression of test execution
  • Network Activity: API calls and responses
  • Console Logs: Next.js and browser console output
  • Performance Metrics: Page load times and Core Web Vitals
  • Error Details: Specific failures with context

Integration with Development Workflow​

Commit-Based Testing​

Enable automatic testing for your Next.js changes:

  1. Run "DebuggAI: Start Commit Testing"
  2. Make changes to your Next.js app
  3. Generate tests for working changes
  4. Review test results before committing

Team Collaboration​

Share Next.js test results with your team:

  • Test Descriptions: Standardized testing language
  • Visual Documentation: Screenshots and recordings
  • Performance Insights: Shared performance baselines
  • Issue Identification: Collaborative debugging

Next Steps​