Next.js SPA Navigation Testing

This application demonstrates various routing scenarios for Next.js static export deployed on AWS CloudFront + S3. Test each navigation pattern to ensure proper SPA routing configuration.

Test Scenarios

1. Trailing Slash

Tests basic routing with a trailing slash in the URL.

2. Trailing Slash with Query

Tests routing with both trailing slash and query parameters.

3. No Trailing Slash (Nested)

Tests nested routes without trailing slashes - a common failure point.

4. No Trailing Slash with Query (Nested)

The most complex scenario: nested route + no trailing slash + query params.

Testing Instructions

  1. Click each link in the navigation header
  2. On each page, refresh the browser (Cmd/Ctrl + R)
  3. Check that the URL remains intact after refresh
  4. Verify query parameters are preserved where applicable
  5. Try accessing URLs directly by copying and pasting them

Important: If any page returns a 404 or loses its URL structure after refresh, the CloudFront error pages are not configured correctly for SPA routing.

This example uses Next.js production mode with static export configuration.