question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Generated static files html files have wrong assets paths

See original GitHub issue

Bug 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

  1. Create a static page
  2. Build it
  3. Open the html page generated
  4. See the source of every script inside the html page

Expected behavior

Generated path should begin with ./next/

Screenshots

Screen Shot 2019-07-29 at 12 25 54

System information

  • OS: macOS
  • Version of Next.js: 9.0.2

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:10
  • Comments:34 (13 by maintainers)

github_iconTop GitHub Comments

74reactions
spudmashmediacommented, Sep 8, 2020

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

module.exports = {
  assetPrefix: ".",
};

Generated output: index.html

    <script
      src="./_next/static/SAfl4nj0fgiMC88TrHu7s/_ssgManifest.js"
      async=""
    ></script>

@cargallo if you haven’t done so already, you might want to use this instead of npm: replace-in-files-cli method 👍

24reactions
cargallocommented, Apr 13, 2021

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,

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found