I'll create a custom page that handles subdomains client-side, reading the subdomain once on initial load and rendering the appropriate content.

This custom page handles subdomains client-side with the following features:

Key Features:

• Single subdomain check: Reads the subdomain only once on component mount using useEffect with an empty dependency array
• Client-side detection: Uses window.location.hostname to parse the subdomain
• Development support: Includes support for localhost testing using URL parameters (?subdomain=admin)
• Dynamic content: Renders different content based on the detected subdomain
• Fallback handling: Shows default content for the apex domain (no subdomain)

Supported Subdomains:

• admin.yourdomain.com - Admin dashboard with metrics
• app.yourdomain.com - Main application interface
• support.yourdomain.com - Support center with tickets
• yourdomain.com - Main landing page showing available subdomains

For Development: Test locally by visiting:

• localhost:3000?subdomain=admin
• localhost:3000?subdomain=app
• localhost:3000?subdomain=support

For Production: The page will automatically detect subdomains from the hostname. Make sure your Vercel project is configured to handle wildcard domains 12.