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
- Open VS Code or Cursor
- Access DebuggAI extension settings (Cmd+, / Ctrl+,)
- Search for "DebuggAI"
- Set "Local Server Port" to your Next.js port (usually 3000)
Step 3: Create Your First Test
- Open Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
- Run "DebuggAI: Create New E2E Test" or use Cmd+Alt+C / Ctrl+Alt+C
- 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:
- Run "DebuggAI: Start Commit Testing"
- Make changes to your Next.js app
- Generate tests for working changes
- 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
- Learn about Extension Features for more testing capabilities
- Explore Advanced Features for complex scenarios
- Check Platform-Specific Features for React component testing
- Set up Commit Testing for continuous validation