How We Connected a Framer Site and a Next.js App to the Same 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 a 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.

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.

How to Use Framer + Next.js on One Domain

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

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.

app/
  quiz/
    page.tsx  ← your custom route
  page.tsx    ← OPTIONAL (delete if you want Framer to serve 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 {
      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
Any custom Next.js route → Next.js

4. Connect Your Domain to Vercel (Not Framer)

In Vercel, go to your project → Settings → Domains → Add example.com.

At your registrar, point example.com → Vercel (A or CNAME as shown in Vercel). Do not connect the domain to Framer.

Once DNS propagates: Vercel receives all traffic, Next.js serves routes it knows, everything else is automatically proxied to Framer.

5. Final Behaviour

| Path | Served By | Notes | |------|-----------|-------| | / | Framer | Perfect for your marketing site | | /about | Framer | All CMS pages still work | | /quiz | Next.js | Your custom app logic | | Any new Next.js path | Next.js | Native Next.js handling | | Any Framer path | Framer | Proxied cleanly via Vercel |

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 — 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.