Redirect a Default Vercel Subdomain to Your Custom Domain

When launching a website on Vercel, setting up a custom domain is usually one of the final steps before you go live. However, what's not, perhaps, always obvious is that Vercel's default vercel.app subdomain carries on serving your website once your custom domain is connected.

For example, whilst building Linkudo, I set up linkudo.com as the primary domain, assuming that would be the only way to access the site. It became very clear very quickly that linkudo.vercel.app remained publicly accessible, effectively creating a duplicate version of the game.

Whilst this isn't necessarily a problem for everyone, it can lead to SEO issues around duplicate content. Search engines might struggle to determine which version should be ranked, potentially affecting visibility. Additionally, users could stumble upon the wrong URL and share it instead of your intended domain. Fortunately, the fix is simple, and Vercel provides a few different ways to handle it.

Option 1: Redirect Using Vercel's Dashboard

For possibly the quickest and simplest solution, look towards Vercel's dashboard, where you can handle this directly:

• Go to the Vercel Dashboard and open your project.
• Navigate to Settings → Domains.
• Find the default vercel.app subdomain.
• Click Edit and set it to redirect to your custom domain (yourdomain.com).
• Save the changes.

Being a domain‑level change, you should probably expect to wait a little while for the change to propagate fully, but in my experience, it is almost instantaneous. This is the easiest way to manage redirects if you don't want to touch code.

Option 2: Redirect Using vercel.json

If you'd rather define the redirect in code (perhaps for version control, or simply because you already have vercel.json set up), you can configure it in Vercel's vercel.json file:

1. Open your project and create (or update) vercel.json in the root directory.
2. Add the following:

{  "redirects": [    {      "source": "/:path*",      "destination": "https://yourdomain.com/:path*",      "permanent": true    }  ]}

After that, all you need to do is deploy and build.

Once deployed, all the traffic that arrives at your Vercel instance will be permanently redirected to yourdomain.com, including anything that arrives via yourproject.vercel.app, which is precisely what we want.

However, there are a couple of minor things worth noting:

• The wildcard (:path*) ensures that all pages within the subdomain are also redirected ‑ make sure you include it unless there are specific paths you want to keep on the Vercel subdomain.
• The 301 redirect type indicates that the move is permanent. If you want a temporary redirect, you could change it to 302.

Option 3: Redirect Using Next.js Middleware

If you're using Next.js (and if you're hosting with Vercel, I would say chances are very high that you are), then you could also implement this redirect at the application level using middleware. This is the approach to take if your application needs the extra flexibility, if you need to handle specific routes differently, etc.

1. If you don't already have one, create a middleware.ts file in your project root (or _middleware.ts in pages/ for older Next.js versions).
2. Add this code:

import { NextResponse } from "next/server";export function middleware(req: Request) {  const url = new URL(req.url);  if (url.hostname === "yourproject.vercel.app") {    url.hostname = "yourdomain.com";    return NextResponse.redirect(url.toString(), 308);  }  return NextResponse.next();}

And then commit, deploy, and build.

This allows your application to handle the redirects; even if someone manually enters your vercel.app URL, they will be redirected to your custom domain.

Wrapping up

There are several different ways to manage redirects with Vercel, whether you prefer a dashboard setting, a JSON configuration, or a Next.js middleware solution.

• For a quick fix

  , use the Vercel dashboard (Option 1).

• For a version‑controlled approach

  , use the vercel.json file (Option 2).

• For more control

  , use Next.js middleware (Option 3).

If you're using Netlify, I've previously written a very similar article covering this same issue with the netlify.app default subdomains: "Redirect a Default Netlify Subdomain to Your Custom Domain".