How to host a Framer site on Netlify

To host a Framer site on Netlify, convert the published site to code, push the project to Git and connect the repository to Netlify. Netlify can't run a Framer project as it is, but it hosts both kinds of project Deframer can write for it: a static Vite site, which comes with netlify.toml and _redirects already written and can send form submissions to Netlify Forms, or a Next.js app, which Netlify runs with its Next.js support. For most marketing sites, the Vite route is the simpler fit.

The general multi-host guide is deploying a converted Framer site; this post goes further into Netlify specifically. Deframer is an independent tool and is not affiliated with, endorsed or sponsored by Framer or Netlify.

Vite or Next.js: which project should Netlify host?

Both work. They differ in what runs at request time.

Pick Vite if the site is content and marketing pages and you want the least moving parts. Pick Next.js if you plan to add server features (auth, a database, payments) or need Framer's split tests to keep running. Which framework to export Framer to compares all five.

Step 1: Convert and download

1. Paste the published site's address into the convert form on deframer.co. Converting is free.
2. Choose Vite or Next.js.
3. Choose where assets live: on Framer's CDN (the default) or in the project. If you're leaving Framer for good, Assets in the project puts images, fonts and videos in public/ so Netlify serves them.
4. Verify the site is yours with the meta tag Deframer shows (Site Settings, then Custom Code, publish), and download. A verified download costs 1 credit; see pricing.

Downloads are only for sites you own or have the owner's permission to convert.

Step 2: Build locally first

For a Vite project:

npm install
npm run build      # prerenders every page into dist/
npm run preview    # serves dist/ as a static host does

For a Next.js project:

npm install
npm run build
npm start

Click through every route in the README's table. A problem you can see locally is easier to fix than one you find on a deploy log.

Step 3: Deploy a Vite project to Netlify

The Vite project already has the Netlify pieces:

• netlify.toml at the root, which serves the site's 404 page at unknown URLs with the 404 status (and each locale's 404 page on multi-language sites).
• public/_redirects, the redirects you set in Framer's site settings. Netlify has no 307 or 308 codes in _redirects, so temporary redirects become 302 and permanent ones 301, which search engines treat the same way.
• Clean URLs. Each page is written as an HTML file at its URL (about.html for /about), which Netlify serves at /about.

In Netlify, add a new site from your Git repository and set:

• Build command: npm run build
• Publish directory: dist
• Node version: 22 or later (set NODE_VERSION in the site's environment, or in netlify.toml). The prerender script needs Node.js 22.18 or later.

Or from the CLI:

npm i -g netlify-cli
netlify init
netlify deploy --build          # a draft deploy with its own URL
netlify deploy --build --prod   # production

Forms with Netlify Forms

A static site has no server, so each native form in a Vite project posts to an endpoint you choose at build time. Set the build environment variable:

netlify env:set VITE_FORM_ENDPOINT netlify

With netlify, submissions go to Netlify Forms, where you can see them in the dashboard and set up email notifications. You can also set a form service's URL instead (Formspree, Basin and similar), or a per-form variable such as VITE_FORM_CONTACT_ENDPOINT; the README lists each form's variable. Because Vite writes the value into the build, redeploy after changing it.

Check Netlify's current docs for how Forms detects forms and for its plan limits on submissions.

Step 4: Deploy a Next.js project to Netlify

Netlify detects Next.js and applies its Next.js runtime. You can make the build explicit with a netlify.toml you add at the root:

[build]
  command = "npm run build"
  publish = ".next"

[build.environment]
  NODE_VERSION = "22"

Then set your form webhooks:

netlify env:set FORMS_WEBHOOK_URL https://hooks.example.com/your-endpoint

The project uses src/proxy.ts for the site's URL forms (trailing slashes, locale prefixes) and split tests. Before switching the domain, confirm on a draft deploy that unknown URLs return the 404 page and that a URL with the wrong trailing slash redirects as it did on Framer. Netlify's Next.js support moves with Next.js releases, so check its docs for the version you deploy.

Step 5: Move the domain

1. Lower the TTL on your apex and www records a day ahead.
2. In Netlify, add your custom domain under the site's domain settings, with the same primary form (with or without www) the Framer site used.
3. Change the DNS records to the values Netlify shows, or delegate DNS to Netlify if you prefer.
4. Wait for Netlify to issue the HTTPS certificate, then test.
5. Remove the domain from your Framer project.

Before you switch, update public/robots.txt, public/sitemap.xml and (for Next.js) metadataBase if the domain changes. Moving a domain off Framer without downtime covers rollback.

Deploy previews for review

Every pull request on a connected repository gets its own deploy preview URL on Netlify. That's a good way to let a designer approve changes before they go live; preview deployments for a converted Framer site sets up the workflow.

Things to know on Netlify

• CMS items added later. On the Vite target, each CMS item known at conversion has its prerendered page. An item added in Framer afterwards renders in the browser from 404.html, with a 404 status, until you convert again. If you keep editing content, move it into the project's JSON or a headless CMS; see Framer CMS to JSON in Next.js.
• Build minutes and bandwidth. Netlify's plans meter both. A static Vite site with assets on Framer's CDN uses little of either.
• Headers. You can add security headers in netlify.toml. Security headers for a self-hosted Framer site has a starting set.