Next.js: Generated static files html files have wrong assets paths

[emuraton]

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

System information

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

[Timer]

Hey @emuraton!

The /_next/ path is actually a value handled by the Next.js server. This path is mounted to .next/, or whatever distDir is customized to.

Sorry for the confusion!

[emuraton]

Hey @Timer,

Thanks for the clarification, but right now after build time, I try to handle the static files with serve and so I guess because its not handled by Next.js server it fails.

I will set distDir to fix my issue. But would it not be more practical that both values match by default?

[Timer]

@emuraton You should not set distDir -- sorry if my suggestion came off this way.

It sounds like you're trying to do something non-standard, you do not need to handle serving any of these files yourself.

Can you please explain what you're trying to accomplish more?

[emuraton]

I want Next.js to output static files for me, and then I want to serve my static files with https://www.npmjs.com/package/serve.
And when I do, I get /404 on my assets because of /_next/ path.

[Timer]

It sounds like you're looking for the next export command!

https://github.com/zeit/next.js#static-html-export

[emuraton]

Sorry forgot to mention Im using the export cmd from Next.js.
(from the /out directory)

[Timer]

@emuraton sorry, but we cannot provide further support without a reproducible demo provided.

[emuraton]

Ok thanks for your time 👍

[Piets0n]

Hi,

i came across the same Problem as @emuraton mentioned.

After i do the basic export command and open the generated index.html i get this error

(this error comes straight from the basic export example)

If i add a ./ in front of all /_next/static... , the file is working as intended.

[keroloswilliam]

we are hitting the same issue here

to fix this issue from our side we had to set distDir to _next we were following the instructions inside the docs

just clarification that I am not saying this is the standard i am just this was a fix to issue appeared

[keidarcy]

next export will generate all js src path like /_next/.., I manually changed it to ./_next/.., it's kind of confusing.

[cargallo]

Hi, why is this issue closed? It's still happening!!!

[timneutkens]

@cargallo not sure what you're referring to, this issue has a reply: https://github.com/vercel/next.js/issues/8158#issuecomment-516010976

It's impossible to help you based on "Why is this closed" without a full reproduction or even any information about your issue.

[cargallo]

Hi @timneutkens I followed the start learning of the oficial nextjs web. If you run "next build && next export" the resulting html site (_that command is for generating just a static site wich not requires nodejs server or whatever server_) the links of the css and js resources attached by nextjs, their path is in this way

<link rel="stylesheet" href="/_next/static/css/97614410f90d914be5ee.css"/>

The problem is not in wich name the folder has but in the way that it is referenced since in plain HTML it has to have a dot before the first slash, like this

<link rel="stylesheet" href="./_next/static/css/97614410f90d914be5ee.css"/>

I think that if nextjs can refer the files in this way it could be run in both, plain HTML and nodejs server or vercel environment.

Reggards,

[cargallo]

Hi @timneutkens , could you check the detailed infromation? Thanks in advance!

[timneutkens]

The out directory has to be hosted through a web server, we currently do not support using the html standalone

[cargallo]

I don't understand therefore what is _next export_ command for? And it's just easy to implement it has no sense at all.

[cargallo]

For otherones wich have this same issue just do this manual step after doing
next build && next export
edit the result html file and replace all "/_next/static" with "./_next/static" until they have the time and desire of fixing the issue

[cargallo]

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,

[asos-albinotonnina]

@cargallo it does yes, thank you. And it works just fine.

Shame, this should be a very prominent configuration setting IMO.
It doesn't look so uncommon to have the need to host say a static app in a subfolder.
I appreciate there is a base option to be used but that doesn't solve the issue entirely, or at least it creates others.

Gracias :)

[stevenmunro]

I experienced a similar issue all of a sudden which I thought was extremely weird. After next export and uploading the out folder to the server, no matter how many times I ran yarn build there were always 404 errors.

Then I emptied my bin (or trashcan on Windows)... and then it started working again as expected.

[attack-monkey]

I don't understand how more people are not complaining about this.
@cargallo - thank you for the work around 👍

[spudmashmedia]

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 👍

[crzurita]

I hosted the content of "out" folder on a free server like 000webhost (doesn't have node) and works pretty well.

But... the first time I had this trouble with a laragon server. After that I maked a tool for fix this.

Right now, after to host on a php server, I know that the tool is useless, but if it is util for you, use it tool

[Aagbator]

With Sass I configured my next.config.js as follows

const withPlugins = require("next-compose-plugins");
const withImages = require('next-images');
const withSass = require('@zeit/next-sass')

module.exports = withPlugins([[withSass({
assetPrefix: ".",
}), withImages()]]);