Generated static files html files have wrong assets paths
See original GitHub issueBug report
Describe the bug
I’m tried to generate a static site with Next js v9.0.2
and got assets linking by default to /_next/static/something/something.js
. But by default build and export create a folder .next
.
I think its related to: https://github.com/zeit/next.js/blob/4bcf6aabe7af477a8e58893f03622d84047abf2b/packages/next/pages/_document.tsx#L410
To Reproduce
- Create a static page
- Build it
- Open the html page generated
- See the source of every script inside the html page
Expected behavior
Generated path should begin with ./next/
Screenshots
System information
- OS: macOS
- Version of Next.js: 9.0.2
Issue Analytics
- State:
- Created 4 years ago
- Reactions:10
- Comments:34 (13 by maintainers)
Top Results From Across the Web
Next static html create wrong path for assets on nested pages
When I open page index. html it works well (path in html is out/_next/static/... ) , but when I open admin/user. html I...
Read more >Fixing next.js export path to assets issue - Andrew Zakordonets
The problem was that all static assets were linked in html under /_next/static/ folder path. After quite some googling and try outs I...
Read more >HTML and Static Assets - Vue CLI
By default, a Vue CLI app will automatically generate preload hints for all files that are needed for the initial rendering of your...
Read more >Working with Static Files - ASP.NET Core Documentation
Static files, such as HTML, CSS, image, and JavaScript, are assets that an ASP.NET Core app can serve directly to clients. View or...
Read more >Accessing static files in Jekyll - Made Mistakes
According to the official Jekyll documentation, “a static file is a ... if image.path contains 'assets/images/gallery-1' %} <img src="{{ ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks @cargallo 👍 Was trying to serve static exported files through an Electron app and was wondering why all the styles were missing. Post build-export find/replace will do for now.
[EDIT] After poking around a bit, there’s an attribute in the next.config.js called assetPrefix that lets you prefix a path to the static resources in the index.html (see https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix + https://github.com/vercel/next.js/pull/9916)
I’ve set my config to the following and it did the trick:
next.config.js
Generated output: index.html
@cargallo if you haven’t done so already, you might want to use this instead of npm: replace-in-files-cli method 👍
DO NOT USE THIS SOLUTION ANY MORE !!! USE THE SOLUTION BELOW INSTEAD https://github.com/vercel/next.js/issues/8158#issuecomment-687707467
To automate the steps commented above:
yarn add --dev replace-in-files-cli
Then, add this two scripts in your package.json
"build-static": "next build && next export && npm run build-static-repair-index",
"build-static-repair-index": "replace-in-files --string \"/_next/static\" --replacement \"./_next/static\" out/index.html"
Then just call
npm run build-static
Explanation: The build-static-repair-index script will replace /_next/static with ./_next/static in the index.html file inside out folder wich is generated when you export your entire site to plain html wich can run standalone without any server.
Hope this helps. Reggards,