Use this when your domain points to Vercel but your email stays at SiteGround, Hostinger, or cPanel hosting.
Related deep-dive: How to Fix SiteGround Webmail 404 on Vercel.
Prerequisites
- Next.js App Router project
- webmail host URL from your provider
- deploy access to Vercel
Step-by-Step
Step 1: Create route files
Create this structure:
app/webmail/route.ts
app/webmail/[...slug]/route.ts
Step 2: Add root redirect
import { NextResponse } from "next/server";
export const runtime = "edge";
const WEBMAIL_BASE = "https://your-webmail-host.example/webmail";
export function GET() {
return NextResponse.redirect(`${WEBMAIL_BASE}/`, 307);
}
Step 3: Add catch-all redirect
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
export const runtime = "edge";
const WEBMAIL_BASE = "https://your-webmail-host.example/webmail";
export function GET(
request: NextRequest,
{ params }: { params: { slug: string[] } }
) {
const tail = `/${params.slug.join("/")}`;
const query = request.nextUrl.search;
return NextResponse.redirect(`${WEBMAIL_BASE}${tail}${query}`, 307);
}
Step 4: Deploy and verify
Test both URLs:
https://yourdomain.com/webmail/
https://yourdomain.com/webmail/mail?token=...
Both should forward to your provider's webmail host.
Validation Checklist
- Query token is preserved.
- No 404 for nested
/webmail/*paths. - No logged token values in server logs.
- MX records remain unchanged.
Need build help for routing and migrations? Contact ValeoFX.
Keep the Thread Going
- Service path: Next.js Migrations
- Related read: Fix SiteGround Webmail 404 on Vercel with Next.js
- Proof point: Aerconic
- Ready to scope your own version? Start a project
