🎯 How to Serve a Static index.html Landing Page in a Next.js App Using Rewrites

DevCraftLabs

DevCraftLabs

— 2 min read

If you’re building a full-stack application in Next.js, but your landing page is designed in Webflow (or exported as static HTML), you might run into this question:

“How can I serve a static index.html file at the root / path, without breaking the rest of my Next.js app?”

In this guide, I’ll walk you through a clean solution using Next.js rewrites specifically the beforeFiles option to route incoming traffic to a static landing page before any dynamic Next.js routes are evaluated.

🧩 Why This Use Case Happens

It’s pretty common for teams to use tools like Webflow, Framer, or landing page generators for marketing purposes, while the main app is developed in Next.js.

These tools export simple static files:

/public
  └── index.html
  └── styles.css
  └── script.js

You want to serve this landing page at / but keep the rest of your app, like /dashboard, /api, etc., functional.

🔧 The Solution: Use Rewrites with beforeFiles

Next.js allows you to rewrite URLs at runtime through the next.config.js file.

Here’s the key:
We’ll use the beforeFiles rewrite phase to intercept the root path (/) and point it to our static index.html file before any page or dynamic route is checked.

✅ next.config.js Example

// next.config.js
const nextConfig = {
  output: 'standalone', // optional, for Docker/production builds
  async rewrites() {
    return {
      beforeFiles: [
        {
          source: '/',
          destination: '/index.html',
        },
      ],
    };
  },
};

module.exports = nextConfig;

📌 How It Works

  • beforeFiles: Runs before Next.js checks your /pages or /app routes.
  • source: '/': Catches the root URL.
  • destination: '/index.html': Redirects it to your static file inside the /public folder.

All static files inside /public are accessible directly so /index.html becomes accessible at /index.html.

But we’re rewriting / to it, making it the new home route!

🚀 Running the App

Once you’ve added your static files and updated next.config.js, you can build and run your app:

npm run build
npm start

Then visit:

http://localhost:3000/

🎉 You should now see your static index.html landing page!

⚠️ Gotchas & Notes

  • This rewrite only affects / other routes like /about or /api will still be handled by Next.js as usual.
  • Make sure all assets referenced in index.html (like style.css, script.js) use relative paths or start with /.
  • Works in Next.js 12+, including the latest versions using app/ or pages/ directories.

✨ When to Use This Approach

✅ You want to:

  • Use a Webflow-designed landing page for marketing
  • Avoid converting it manually to a React component
  • Keep the rest of the app dynamic and managed by Next.js

❌ Don’t use this if:

  • You want SEO optimization through Next.js rendering (SSG/SSR)
  • You’re planning to integrate the static HTML deeply into your app's components

💬 Final Thoughts

This is a clean, no-hacks-needed approach to integrating static landing pages into your modern web app stack. With beforeFiles rewrites, Next.js gives you the flexibility to blend static assets with dynamic routes the best of both worlds.

Let me know in the comments if you’ve used this trick in your own projects or if you’d like to see a full example with Webflow export!

Read more