Our example
As an example for this tutorial, I have spun up a framer proxy at www.unwrapdesign.com/fr. Here's another example showing how the pattern-matching routing works: www.unwrapdesign.com/fr/another-page.
Proxying through Next.js
It's pretty straightforward. Just go into your next.config.js and add a new URL rewrite (note: this is different from a redirect).
async rewrites() {
return [
{
source: '/fr/:path*',
destination: 'https://unwrap.framer.website/:path*',
basePath: false,
},
];
},Make sure to replace the destination subdomain (currently set to unwrap as a demo). Now you can go to http://localhost:3000/fr/ and see the home page for your framer site! Once you deploy, you will also see it on your production URL.
Other options
This idea can be applied anywhere else that supports URL rewrites/proxying. In theory, you can achieve the same effect using Next.js middleware and rewrite method on the response and their. The same applies if you're using Cloudflare, they support rewrites too! You can follow Cloudflare's guide on setting up rewrites here.
Can I do this for other website builders?
Your next thought might be, can I do this for a Ghost CMS blog, or for a Wix site? The answer depends on if the site has absolute or relative paths and how you want to handle that. The nice thing about Framer.com is that they have all their CSS/JS assets as absolute paths, if they were relative paths, then we'd have to create rewrite patterns to account for that... which once you get into that territory, you run the risk of having URL pattern collisions.
Example of an absolute path: https://framerusercontent.com/sites/icons/default-favicon.v3.png
Example of an relative path: /sites/icons/default-favicon.v3.png