Related-projects on the browser

Using @vercel/related-projects from the browser

Thanks for the package, it really helps linking projects in preview environments. For us, the main use-case is linking to different projects hosted on other subdomains and accessing the API. However, Since the environment variables are not exposed to the browser, the package only works in server environments.

Suggestion

Make relatedProjects and withRelatedProject also work in browser environments. This probably requires exposing the necessary environment variables to the browser. I can’t tell if this is already done, or whether this comes with security implications.

Thanks for the consideration! I’d be open to creating a PR against vercel/vercel if it is possible to contribute.

Hi Gabriel,

I think keeping @vercel/related-projects server-side is probably the safer default. The package reads VERCEL_RELATED_PROJECTS, and exposing that automatically to the browser would turn deployment/project mapping metadata into public client-side data.

For your use case, I’d put a very small server wrapper in front of it instead of trying to call the package directly from the browser. For example, in a Next.js Route Handler:

import { NextResponse } from "next/server"
import { withRelatedProject } from "@vercel/related-projects"

export async function GET() {
  const apiHost = withRelatedProject({
    projectName: "your-api-project",
    defaultHost: process.env.API_HOST,
  })

  return NextResponse.json({
    apiUrl: `https://${apiHost}`,
  })
}

Then the browser calls your own route:

const { apiUrl } = await fetch("/api/related-projects").then((res) => res.json())

That lets you expose only the specific URL the client needs, without exposing the full related-projects payload or other deployment metadata.

If you need the browser to call the other project’s API directly, I’d also make sure that API has its own auth/CORS rules and does not rely on the host being “hidden.” Anything returned to the browser should be treated as public.