How do you serve a static site (like from Webflow or a landing page generator) in Next JS on Vercel?

user_1177590 0
Viewed 1299

We created a landing page in Webflow and exported the code. We now have a HTML, CSS, JS and images from this export.

Our app is built with Next JS and hosted on Vercel. I would like to serve the static site above from certain routes like /, /pricing, /about, etc. and our own app on others.

We've looked at custom server on Next JS but that's not compatible with Vercel. Also looked into Rewrites but that has lower priority than static pages, so won't work.

We used to have a Node app and could just direct certain routes to serve static HTML and other routes would point to our React app. Not sure how to do this in Next JS. I'm hoping to have a similar setup with Next JS, but can't seem to figure it out after a lot of searching.

What is the best way to host our static Webflow site at the root and certain other paths in a Next JS app?

vercel next.js
1 Answers

Figured out how to do this with Rewrites.

Export your landing page from Webflow or any other landing page builder. Put it in the /public folder of your Next JS project. Rename the index.html of your landing page to something else like landing.html. Rename pages/index.js.

The order of execution in Next JS for choosing what to display is:

  1. File in public folder
  2. File in pages/
  3. Rewrites

So we removed index.html and public/index.js so that our rewrite can handle it.

Add the following rewrite to your next.config.js

      {
        source: "/",
        destination: "/landing.html"
      }
user_11775900
Related