Next.js: Cant find assets on next export

Created on 26 Nov 2019  路  3Comments  路  Source: vercel/next.js

Hello everyone Im pretty sure that this is a regular question here, but I've been using next for time now and I just want to make sure that I'm not missing nothing.

What I'm trying to do is:
I want to export static project that I have, but I need the structure legacy (each page should go inside a folder instead a file) becouse I'm hosting on a s3 bucket. But, when I'm doing this I have one index.html file in the out folder root that can find all assets, but the html files inside pages cant find the image assets and _next folder right :/ they are pointing for eg: basepath/out/about-us/_next when they should look on /out/_next I just try to use assetPrefix and stuffs like that but dont work. this should not be that hard.

What i'm missing?

my config:

module.exports = withCss({
  assetPrefix: "./",
  exportTrailingSlash: true,
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style\/css.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === "function") {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === "function" ? [] : origExternals)
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: "null-loader"
      });
    }
    return config;
  }
});

Most helpful comment

I'm having the same problem right now with nginx. When statically exporting with assetPrefix defined, Everything contained in _next and index.html has the proper base path, but the files copied over from the public folder (i.e. images and css folder) ignores my asset prefix and tries to find the file in the server root location.

All 3 comments

Your assetPrefix is probably incorrect but it's almost impossible to say based on the provided information. I'm going to close this issue as the issue template was not followed and a full reproduction wasn't provided.

Just to give some feedback:
My solution was: since I have staging and test enviroments to I just use env variables to set a absolute path for assets like image and setup him on a webpack variable. With some script that I made I was able to use something like:
<img src={pathAssets(/myImage.png)} /> to use the absolute path.

More explications about the problem:
When I have a static export build from next to be uploaded on amazon s3 bucket for example, I need the exportTrailingSlash: true to make a project structure that makes sense and my url does not be like mysite.com/index.html. But in my case I needed to upload this project in a folder inside the bucket then, was something like that mysite.com/folder based on that if I setup my assetPrefix to understand the folder on my path everything looks fine. but, just on my javascript files(_next dependencies) my images that I was using <img src="./static/img.png" /> or <img src="/img.png" /> using the public folder my images dont was affected by the assetsprefix and when I build they got lost. They should look at folder/static/img.png like js files but I got /static/img.png and If I setup the path on images in dev mode they broke. This looks like was related to the images was loaded on runtime. to solve that I just needed to use my paths for images and assets like I said before. If there is some other way, please let me know

I'm having the same problem right now with nginx. When statically exporting with assetPrefix defined, Everything contained in _next and index.html has the proper base path, but the files copied over from the public folder (i.e. images and css folder) ignores my asset prefix and tries to find the file in the server root location.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

pie6k picture pie6k  路  3Comments

swrdfish picture swrdfish  路  3Comments

YarivGilad picture YarivGilad  路  3Comments

renatorib picture renatorib  路  3Comments

havefive picture havefive  路  3Comments