Skip to content

Local business websites / Case 42

Serving independent local-business websites from one Next.js and Vercel codebase

21st Bean Cafe and AMP Thai Parts needed independent public domains, brand-specific content, local-business metadata, and clean search signals without creating two separate repositories and deployment pipelines.

Next.jsVercelMulti-domainLocal SEOStructured dataHost routing

What this solved for the business or user

Each business has a focused website on its own domain with the information customers need, including locations, contact details, directions, social links, and relevant services or products. Behind the scenes, both sites can be maintained and deployed from the same codebase as ConduitCode Labs.

What was happening

Two small local businesses needed lightweight websites with different brands and search goals. 21st Bean Cafe required a branch guide for Zambales and Tarlac with an announced Alviera location. AMP Thai Parts required a motorcycle-parts landing page for customers near San Miguel and Tarlac City. Both also needed their own canonical URLs, social previews, robots files, sitemaps, and structured data even though the implementation lived in one Next.js application.

Why the obvious solution was not enough

Simple path-based pages on the ConduitCode Labs domain were not enough once the independent domains were connected. Search engines and visitors should see each custom domain as its own site. Internal route names must not leak into the public URL, www and apex hosts must not compete, unknown paths should not expose the parent website, and metadata must use the domain that served the request.

How the solution works

  1. Keep each brand experience in its own App Router segment with isolated page components, styles, assets, metadata, and structured data.
  2. Use the Next.js proxy to map each recognized hostname to its internal route while preserving a clean public root URL on the custom domain.
  3. Redirect each www hostname to its apex domain with a permanent redirect so every brand has one canonical host.
  4. Redirect attempts to expose the internal Conduit route on a brand domain back to the clean public path.
  5. Rewrite brand-specific robots.txt, sitemap.xml, and Open Graph image requests to the correct internal handlers.
  6. Return a real 404 with a noindex header for unsupported paths on a brand domain instead of falling through to unrelated Conduit pages.
  7. Generate canonical URLs, Open Graph data, and structured data from the active request host so the same internal route remains correct on its custom domain and its Conduit preview path.
  8. Use LocalBusiness, AutoPartsStore, Organization, and CafeOrCoffeeShop structured data only where the visible page contains the matching real-world information.
  9. Keep both sites in the existing Vercel deployment workflow so content and technical updates ship through one reviewed repository.
Simplified host-to-route mapping
const brandSites = [
  { host: "21stbeancafe.com", path: "/21st-bean-cafe" },
  { host: "ampthaiparts.com", path: "/amp-thai-parts-tarlac" },
];

export function proxy(request) {
  const host = request.headers.get("host")?.split(":")[0];
  const site = brandSites.find((entry) => entry.host === host);

  if (!site) return NextResponse.next();
  if (request.nextUrl.pathname === "/") {
    const destination = request.nextUrl.clone();
    destination.pathname = site.path;
    return NextResponse.rewrite(destination);
  }

  return new NextResponse("Not Found", {
    status: 404,
    headers: { "X-Robots-Tag": "noindex" },
  });
}

What should be verified before shipping

  • Open each apex domain and confirm it renders the correct brand without exposing the internal route in the address bar.
  • Open each www domain and confirm it permanently redirects to the matching apex domain while preserving the requested path.
  • Inspect canonical, Open Graph, Twitter, robots, sitemap, and JSON-LD output separately on both custom domains.
  • Request an unsupported brand-domain path and confirm it returns 404 with noindex instead of displaying the ConduitCode Labs site.
  • Check phone, directions, social, and ordering links on mobile devices where local customers are most likely to use them.
  • Run a production build after changing proxy rules because a host-routing mistake can affect every domain in the shared deployment.

What changed

The shared Next.js application can serve ConduitCode Labs, 21st Bean Cafe, and AMP Thai Parts as distinct public websites with clean host routing and domain-specific search metadata. The businesses receive independent domain experiences while development, review, and deployment remain consolidated in one maintainable project.

Reusable lesson

A shared codebase does not have to create a shared public identity. Host-aware routing, strict canonical rules, isolated metadata, and explicit unknown-path behavior let small sites share infrastructure without confusing visitors or search engines.