Static index.html to index.js

I have a page that I want to be my index.html because it will be built throughout the day to save on queries. It is a nextjs/react app on vercel. My index file is in public. When I go to index.html the header and footer show but the rest returns 404. Other static html pages in public folder display just fine.

How do I have index.html served first and if someone clicks on a button it then goes to index.js?

I've tried the below and more:

Code, configuration, and steps that reproduce this issue

"routes": [ { "src": "/(.*)", "dest": "/index.html", "continue": true, "has": [ { "type": "query", "key": "__nextStaticAsset" } ] } ]

"rewrites": [ { "source": "/", "destination": "/index.html" } ]

"rewrites": [ { "source": "/", "destination": "/index.html" }, { "source": "/(.*)", "destination": "/index.html" } ]

Project information

Environment (local, preview, production): Vercel prod
Operating System:
Node/Runtime Version:
Package Manager: NPM
Project Framework:
Relevant Packages:

Vercel Staff

This seems like a non-standard setup. Can you share a minimal reproducible example and the Build and Development Settings I should use to replicate the problem?

Hi,

Thanks for looking https://github.com/mrbrimm/minimum

GitHub

GitHub - mrbrimm/minimum

Contribute to mrbrimm/minimum development by creating an account on GitHub.

Index.html works locally on localhost:3000 Default build settings on vercel Nextjs, React

Vercel Staff

Thanks for sharing that example. It looks like the index.html file exists outside of the router's expected path and is not included as a page in the build. The file still exists on your computer, but it's not included in the build so it isn't available in any deployments. That's why you're getting a 404 when deployed even though it works locally.

If you're looking to build a static site, I would recommend using the Next.js Static Site Generation (SSG) strategy instead. That's going to get you the benefits of using Next.js with the ability to generate static pages.

https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation

nextjs.org

Rendering: Static Site Generation (SSG) | Next.js

Use Static Site Generation (SSG) to prerender pages at build time.

Thank you. I will look into that.

This topic is closed. It no longer accepts new replies.