Next.Js Exported static HTML file does not find CSS & JS files, incorrect path is set-CodePudding

Exporting static html files on Next.Js, the href and src directory on HTML is not going to the "_next" folder. If I set it manually by adding ../../ in the index.html, then it works fine. Same for JS files.

Any idea where to pre-configure this before it is exported.

Thanks!

P.s I have a webpack config.

const config = {
  mode: isProd ? "production" : "development",
  entry: {
    index: "./src/index.tsx"
  },
  output: {
    path: `${__dirname}/dist`,
    publicPath: '/',
    filename: "[name].js"
  },
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
    alias: resolveTsAliases(__dirname   "/tsconfig.json")
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.s[ac]ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.(jpg|png)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 25000
          }
        }
      },
      {
        test: /\.svg$/,
        use: "file-loader"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html"
    }),
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
    })
  ]
};

I found another stack overflow thread, but they also manually set their directory, but I need it to work due to a lot of files being exported.

Tried researching on documentations couldn't find the possibility of pre-configuring CSS/JS path for exported files.

CodePudding user response：

The problem was that it required to run on a live server, so if you host the "/out" folder with all the required files, and running a live server fixes the issue.

Opening the index.html on it owns won't recognize the CSS nor jess files,so just run on a server.

Test on Surge.sh easy as 123.

CodePudding user response：

By adding

module.exports = { basePath: './subfolder', }

this will fix it! If you need to navigate within a subfolder and your css/js not working, this is what your missing in your next.config.js.