I am using NextJS (https://nextjs.org/) Version 9.0.6.

My next.config.js looks like this:

/* eslint-disable */
const withLess = require("@zeit/next-less");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
);

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables // make your antd custom effective
  },
  webpack: (config, {
    isServer,
    defaultLoaders
  }) => {
    const originalEntry = config.entry;
    config.entry = async() => {
      const entries = await originalEntry();

      if (
        entries["main.js"] &&
        !entries["main.js"].includes("./polyfills.js")
      ) {
        entries["main.js"].unshift("./polyfills.js");
      }

      return entries;
    };

    config.module.rules.push({
      test: /.scss$/,
      use: [
        defaultLoaders.babel,
        {
          loader: require("styled-jsx/webpack").loader,
          options: {
            type: "scoped",
            javascriptEnabled: true
          }
        },
        "sass-loader"
      ]
    });

    if (isServer) {
      const antStyles = /antd/.*?/style.*?/;
      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;
  }
});

My package.json looks like this:

{
  "name": "test",
  "version": "0.0.1beta",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  },
  "dependencies": {
    "@material/react-chips": "^0.15.0",
    "@zeit/next-less": "^1.0.1",
    "antd": "^3.24.3",
    "babel-plugin-import": "^1.12.2",
    "less": "3.10.3",
    "less-vars-to-js": "1.3.0",
    "next": "9.0.6",
    "null-loader": "3.0.0",
    "react": "^16.11.0",
    "react-country-flag": "^1.1.0",
    "react-device-detect": "^1.9.10",
    "react-dom": "^16.11.0",
    "react-proptypes": "^1.0.0",
    "react-redux": "^7.1.1",
    "react-string-replace": "^0.4.4",
    "redux": "^4.0.4",
    "redux-devtools-extension": "^2.13.8",
    "redux-persist": "^6.0.0"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "eslint": "^6.6.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.16.0",
    "node-sass": "^4.13.0",
    "prettier": "^1.18.2",
    "prettier-eslint": "^9.0.0",
    "sass-loader": "8.0.0"
  },
  "license": "ISC"
}

What I did:

-Deleted the out and the .next folder.

Then:

yarn build
yarn export

The pages will be generated, but they are broken (CSS not loaded, no Javascript).

This worked at the beginning of the project, but no it does not.

Is here someone who has an idea why it could be broken ?

1

I just came across the same issue and landed on this question. I think Taha explained the problem correctly, but for me a small adaptation in the next.config.js did the trick:

module.exports = {
  assetPrefix: './'
}

The topic is also described in the NextJS docs.

1

I came across this question when I had the same problem, I’ve figured it out.

Inside your index.html file (in the out directory), find the link tag at the beginning of the file:

<link
      rel="preload"
      href="https://stackoverflow.com/_next/static/css/d849fb1b42015bc13208.css"
      as="style"
/>

<link
      rel="stylesheet"
      href="https://stackoverflow.com/_next/static/css/d849fb1b42015bc13208.css"
      data-n-g=""
/>

Just add a dot “.“at the beginning of href attribute, like this:

<link
      rel="preload"
      href="https://stackoverflow.com/questions/58784444/./_next/static/css/d849fb1b42015bc13208.css"
      as="style"
/>
<link
      rel="stylesheet"
      href="https://stackoverflow.com/questions/58784444/./_next/static/css/d849fb1b42015bc13208.css"
      data-n-g=""
/>

This fixed it for me.

I do not know why the “.is not included by default.

4

I had the same issue recently while trying to export a static version of my app, and was surprised to see no recent issue about that on Next.js repository.

Actually when run through a web server, the use of absolute path for CSS/Js files works correctly. When run as local files in the browser, you have to change them to relative paths yourself.

As for why Next.js team do not provide an option to export with local path, Tim Neutkens (the lead maintainer) states in this issue that “it would involve a lot of work for very minimal gains”.

2

Apart from @Philipp Schmels answer if anyone is using custom fonts via FontSource with StyledComponents, The built CSS file will not point to the correct font files, You will have to manually change those URLs,

The browser console should print a descriptive error which you can use to identify the CSS files that are causing the issue. Custom fonts are usually put in out/_next/static/media

Since I can not reply on comments, but adding the following resolve the js issue and images worked fine on the production, for some reason images are not loaded on when index.html is opened.

module.exports = {
  assetPrefix: './'
}

The above helped. Please add this config in the next.config.js which if not available should be created in the root project directory

1