[re-opened] Static export base path

[coral dirge]

So I've seen this issue around a few times but the solutions haven't worked for me. I'm exporting my nextjs app as static content, i.e. to out/index.html. However, when I visit that file in a browser, there's no CSS/JS.

If I understand correctly, this is because all of the hrefs in the html file use an absolute path '/' instead of a relative path. So, I tried changing all of the paths to be "./_next/..." but this didn't really work.

What can I try next?

[opaque fulcrum]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[coral dirge]

when i change all of the script tags, i get these errors:

downloadable font: failed to start download (font-family: "__Inter_aaf875" style:normal weight:100..900 stretch:100 src index:0): status=2152857601 source: file:///_next/static/media/c9a5bc6a7c948fb0-s.p.woff2

TypeError: URL constructor: null is not a valid URL.

Uncaught Error: Minified React error #423; visit https://react.dev/errors/423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

i also changed the file paths in the generated CSS file, but that didn't help

i also went through every js file and changed /_next to ./_next, still did nothing

https://github.com/vercel/next.js/issues/2581

related to this

this is actually so stupid dude

[plucky glade]

Static export does not work for the file:// protocol because that’s not how the web works. You have to use the http:// protocol.

[coral dirge]

so is there any solution to what i'd like to do?

[plucky glade]

i don't know. all i know is that nextjs does not support the file:// protocol.

this is an XY problem. why do you need to use the file:// protocol in the first place?

any functional hosting platform should support http://, many even supports https://. if you are making an electron app for example, it should support the nextjs output folder as well. file:// is for viewing a file, not for viewing a webpage.

as for local development, there are plenty of lightweight http:// servers. i used to use python's simplehttpserver, but now i think you have serve in javascript land. even vscode has a built-in simple webserver feature if i recall correctly. it's not rocket science.

[coral dirge]

OK, i know this an XY problem, so let me give some more context.

I'm trying to build a VST plugin (music making software) with Nextjs as a frontend. The most convenient option for me is to be able to just load a static HTML file as the GUI for the plugin. However, I have the issue of broken paths when trying to just load the HTML file in this environment

[plucky glade]

yeah for plugin GUI, nextjs is not a good framework for this. i heard using vite with some weird configuration options would work? i don't know. if vite doesn't support it i can totally see myself making a html file manually without a framework.

[coral dirge]

i've heard CRA might work, i'm going to try it next

[NO SOLUTION] Static Export without a Server

[coral dirge]

reopening this in case i can solve this the same way i did with CRA

[re-opened] Static export base path

for context, when i was working on my project with CRA, i was able to set the base path to a custom protocol, and then my plugin backend would handle the requests.

is there a way i can do this with nextjs?

i think i tried using assetprefix or basepath but they complained when i tried to do weird stuff