Next.js Discord

Discord Forum

Dynamic routes with public/index.html files

Unanswered
Asian black bear posted this in #help-forum
Open in Discord
Asian black bearOP
Hi all, I'm fairly new to NextJS and I'm having some trouble with routing. Here's the situation and what I've tried:

- NextJS 15.2.1, SSG, trailingSlash: true
- I'm using Contentful headless CMS, so all my routes are dynamic. Using the newest /app structure. The only thing in /app is layout.js and [[...slug]]/page.js. One Contentful page I have is calc, so http://localhost:3000/calc/ works.
- I have static files in /public/ that are flat HTML files, like public/demo/index.html

If I go to http://localhost:3000/calc/, it will render the dynamic NextJS page. If I go to http://localhost:3000/demo/index.html it will render the static page.
The problem I'm having is I don't want users to have to go to /demo/index.html, I want it just to work like a regular directory index and have the URL be /demo/

I'm trying to setup rewrites() to work in both of the above situations and it's driving me crazy. I've looked at all the documentation, stackoverflow, etc. and tried all of the examples but nothing works.

If I do the setup below in the next.config.js, then the static files like /demo/ work, but the dynamic routes like /calc/ don't render correctly. Oddly, it "almost" does... the <head> content renders in the <body> somehow but none of the body content renders.

async rewrites() {
        return {
            afterFiles: [
                {
                    source: '/:path*/',
                    destination: '/:path*/index.html'
                }
            ]
        };
    }


I've also tried using beforeFiles, fallback, I've tried using the missing settings to identify headers that the static files don't have... nothing works.

Any advice for things I can try?

12 Replies

Asian black bearOP
Bumping today for visibility. Still need help on this if anyone knows what's the issue. Thanks in advance!
Asian black bearOP
Anyone? Any ideas? I'm still stuck here. Please let me know if you need any additional information to help understand the problem.
American Foxhound
Let me try
Next.js routing system is related to folder structure.
It's a simple example
The folder names in the app folder shows the routing url
Like localhost:3000/login
Asian black bearOP
Hey @American Foxhound thanks for the input!

So yes, I understand that part, but what I'm saying is all of my pages are generated at build time from URL's in my CMS. So really, other than the API page I have no hard coded 'pages'. Everything in [[...slug]] has their URL generated at build time. As an example below, this is my build output for a /404 page and a /calc page. These are both generated from the CMS content.

Somehow, the routing is conflicting with what's in /public as flat HTML if I use the rewrite() settings I have in the original post.


Route (app) Size First Load JS
┌ ƒ /_not-found 141 B 101 kB
├ ● /[[...slug]] 152 B 737 kB
├ ├ /404
├ ├ /calc
├ └ [+4 more paths]
├ ƒ /api 141 B 101 kB
+ First Load JS shared by all 101 kB
├ chunks/4bd1b696-c977a541ccf8fb5c.js 53.3 kB
├ chunks/684-43abe706a93d7d63.js 45.4 kB
└ other shared chunks (total) 1.93 kB
Asian black bearOP
Anyone else have any ideas? I'm still facing this issue and nothing I'm trying is working.
Asian black bearOP
Oh, and just to add more specific info to the mix... Now that I have a functioning 404 page I can see that in the case of the afterFiles settings in the original post, the /public/index.html is working and the /calc/ page is returning a 404 specifically. So in other words, it's still trying to apply this "forward to the calc/index.html rule here.

This one baffles me, because even with trying to apply the index.html rule only on pages missing a header, that the /calc/ page definitely does have and the /public/index.html definitely doesn't it STILL applying the index.html rule to the /calc/ page. How is that even possible?
Asian black bearOP
bump

Anyone? I'm still stumped! I've tried with middleware.js as well and nothing works.