The 2-Day Battle: Trying to Make Framer and Next.js Share a Domain

We spent two full days wrestling with DNS, Cloudflare Workers, rewrites, proxies, and every trick in the book just to make a simple Next.js page load under my Framer domain.
We tried:

• making Framer the default host

• using Cloudflare reverse proxy rules

• masking Vercel with subpaths

• rewriting URLs inside Next.js

• proxying assets manually

• even embedding iframes as a fallback

Every attempt either broke styling, broke routing, or caused infinite redirect loops.

Then it finally clicked:

Framer shouldn’t own the domain.
Vercel should own it — and Framer should become the origin.

That’s the architecture nobody tells you about, and it’s by far the cleanest, most scalable way to run Framer for your main website and Next.js for specific app routes under the same domain.

Here’s the exact setup that finally worked — elegantly and reliably.

How to Use Framer + Next.js on One Domain (The Architecture That Actually Works)

This method lets you:

• Keep your Framer site as your homepage & marketing pages

• Add custom app routes like /quiz, /dashboard, /checkout in Next.js

• Keep everything under one domain (e.g. example.com)

• Avoid Cloudflare, Workers, DNS hacks, or iframe embedding

• Scale organically into a full app when you're ready

Let’s break it down step by step.

1. Keep Your Framer Site at Its Default .framer.app URL

In Framer, your published site will look like:

https://your-project-id.framer.app/

This becomes your origin server.

Important:

• Do not connect your custom domain to Framer.

• Do not use Framer's reverse-proxy add-on.

• Let Framer live only at its native .framer.app address.

This keeps everything simple and avoids SSL conflicts.

2. Create a “Gateway” Next.js App on Vercel

Your Next.js app becomes the traffic router for your entire domain.

Directory structure (App Router):

app/
  quiz/
    page.tsx     ← your custom route
  page.tsx       ← OPTIONAL (delete this if you want Framer to serve your homepage)

If you want Framer to serve /, do NOT create a page.tsx at the root.

3. Add a Fallback Rewrite to Proxy All Other Routes to Framer

In next.config.ts, add:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  async rewrites() {
    return {
      // If Next.js can't find the route locally,
      // it falls back to the Framer site.
      fallback: [
        {
          source: "/:path*",
          destination: "https://your-project-id.framer.app/:path*",
        },
      ],
    };
  },
};

export default nextConfig;

This is the magic.
Now:

• /quiz → Next.js page

• / → Framer homepage

• /about, /services, /contact → Framer

• /app/some-route (if created in Next) → Next.js

Everything stays perfectly at:

https://example.com
https://example.com/quiz
https://example.com/about

No redirects. No iframe. No styling issues. No proxy servers needed.

4. Connect Your Domain to Vercel (Not Framer)

In Vercel:

• Go to your project → Settings → Domains

• Add:

example.com

At your registrar (GoDaddy, Namecheap, Cloudflare, etc.):

• Point example.com → Vercel (A or CNAME as shown in Vercel)

Do not connect the domain to Framer anymore.

Once DNS propagates:

• Vercel receives all traffic

• Next.js tries to serve routes it knows

• Everything else is automatically proxied to Framer

This is exactly how multi-origin architectures run in high-end production environments.

5. Final Behaviour (What You Get)

This gives you the best of both:

• Framer’s speed, design flexibility, and CMS → for the website

• Next.js power, authentication, APIs, and apps → for the logic-heavy parts

This is how you scale from a simple website to a real software product — without redesigning everything.

Conclusion: The Setup I Wish Someone Told Me on Day 1

After 48 hours of debugging:

• DNS loops

• Framer domain overrides

• Cloudflare proxy failures

• Styling disappearing

• Vercel not seeing the domain

• Framer not serving paths properly

This architecture solved everything instantly:

Make Vercel the gateway.
Make Framer the origin.
Let Next.js handle only the routes you need.

You get:

• One clean domain

• Zero conflicts

• Infinite scalability

• No more hacks

If you’re running Framer and want to layer in real app functionality, this is the cleanest pattern you’ll ever use.