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

Question

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.

Julius'Web · Accepted Answer · 2022-11-09 13:13:22Z

2

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.

answered Nov 9, 2022 at 13:13

Julius'Web

1031 gold badge2 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ARGOUBI Sofien · Accepted Answer · 2023-01-10 12:17:39Z

2

you have to add this to your next.config.js

module.exports = {   
assetPrefix: "." 
}

hope this help :)

answered Jan 10, 2023 at 12:17

ARGOUBI Sofien

763 bronze badges

Comments

Julius'Web · Accepted Answer · 2022-11-14 17:21:13Z

0

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.

answered Nov 14, 2022 at 17:21

Julius'Web

1031 gold badge2 silver badges13 bronze badges

Comments

miken32 · Accepted Answer · 2024-04-22 14:37:42Z

0

module.exports = {   
assetPrefix: "https://www.yoursite.com" 
}

assetPrefix

edited Apr 22, 2024 at 14:37

miken32

42.5k16 gold badges127 silver badges177 bronze badges

answered Mar 24, 2024 at 17:35

Leandro

412 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related