NextJS - export is broken (no CSS, no JS)

Question

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 ?

Answer 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 adaption in the next.config.js did the trick:

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

The topic is also described in the NextJS docs.

Answer 2

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".

Answer 3

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="/_next/static/css/d849fb1b42015bc13208.css"
      as="style"
/>

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

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

<link
      rel="preload"
      href="./_next/static/css/d849fb1b42015bc13208.css"
      as="style"
/>
<link
      rel="stylesheet"
      href="./_next/static/css/d849fb1b42015bc13208.css"
      data-n-g=""
/>

This fixed it for me.

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