Vercel logo

Custom Error Pages with App Router

This example demonstrates how to create custom error pages using Next.js App Router conventions. Replace Vercel's default platform error pages with your own branded experience for errors like function timeouts or throttling.

How it works:

  • Create error pages at app/500/page.tsx and app/504/page.tsx
  • Vercel automatically detects and serves these for platform errors
  • The 500 page acts as a fallback for all unhandled error codes

Template tokens:

  • ::vercel:REQUEST_ID:: - Unique request identifier
  • ::vercel:ERROR_CODE:: - Error type (e.g., FUNCTION_INVOCATION_TIMEOUT)

Try it out:

Click "Trigger Timeout" to trigger a function timeout and see the custom error page in action. The page is configured to timeout after 3 seconds.

Trigger TimeoutView SourceDocumentation