How to influence full path of all generated files when using static export
Answered
Herr_Zatacke posted this in #help-forum
I'm planning to migrate one of my plain react projects (webpack/react) to use nextjs with static exports, mostly to be ready to migrate to dynamic hosting at some point in the future.
In a quick test I notices the full output path of the files is like
My app currently also needs to be statically hosted on a esp8266 running
Is there an explicit config option to achieve this which I have missed?
If not, how would I approach shortening the names of all exported files?
In a quick test I notices the full output path of the files is like
_next/static/chunks/4bd1b696-67ee12fb04071d3b.js which has a length of 48 characters.My app currently also needs to be statically hosted on a esp8266 running
spiffs/littlefs. Both filesystems have a limit of 31 characters per full file-path which is generally incompatible with the nextjs export. Additionally I need to have a folder on the microcontroller to separate the "htdocs" from other stored files, which takes away another 2 characters of allowed filename-length.Is there an explicit config option to achieve this which I have missed?
If not, how would I approach shortening the names of all exported files?
Answered by Herr_Zatacke
To bring this to a conclusion (and not be that guy who just comments "I found a solution"), here's what I tried:
* My first approach was to use the webpack config to shorten the filenames. Output was fine in the
* Second approach was to just replace paths within all generated files. But as the
My working solution in the end was not to rely on next.js exporting static files differently, but instead I read all generated files, generate a hash over filename+filecontent then rename the file to said hash and move them to the same folder.
Additionally I save the generated mapping to a file like
in my webserver I then check if the request url matches the original path and just deliver the appropriate file from the filesystem.
* My first approach was to use the webpack config to shorten the filenames. Output was fine in the
.next folder, but in out files went missing.* Second approach was to just replace paths within all generated files. But as the
_next-prefix is not always included in a full link, this only worked partially.My working solution in the end was not to rely on next.js exporting static files differently, but instead I read all generated files, generate a hash over filename+filecontent then rename the file to said hash and move them to the same folder.
Additionally I save the generated mapping to a file like
index.html;0bb714.html
index.txt;715e44.txt
_next/static/css/0492088fdf64cc52.css;610194.css
_next/static/css/8e3a559ba30ce919.css;12e42e.css
...in my webserver I then check if the request url matches the original path and just deliver the appropriate file from the filesystem.
1 Reply
To bring this to a conclusion (and not be that guy who just comments "I found a solution"), here's what I tried:
* My first approach was to use the webpack config to shorten the filenames. Output was fine in the
* Second approach was to just replace paths within all generated files. But as the
My working solution in the end was not to rely on next.js exporting static files differently, but instead I read all generated files, generate a hash over filename+filecontent then rename the file to said hash and move them to the same folder.
Additionally I save the generated mapping to a file like
in my webserver I then check if the request url matches the original path and just deliver the appropriate file from the filesystem.
* My first approach was to use the webpack config to shorten the filenames. Output was fine in the
.next folder, but in out files went missing.* Second approach was to just replace paths within all generated files. But as the
_next-prefix is not always included in a full link, this only worked partially.My working solution in the end was not to rely on next.js exporting static files differently, but instead I read all generated files, generate a hash over filename+filecontent then rename the file to said hash and move them to the same folder.
Additionally I save the generated mapping to a file like
index.html;0bb714.html
index.txt;715e44.txt
_next/static/css/0492088fdf64cc52.css;610194.css
_next/static/css/8e3a559ba30ce919.css;12e42e.css
...in my webserver I then check if the request url matches the original path and just deliver the appropriate file from the filesystem.
Answer