How to serve static content from node modules

[willwill96]

First off, I'd like to say that I'm new to Next.js now, but have been loving it so far.

Right now I'm having trouble integrating with Cesium. I started off with the default next.js template. Then I started editing the next.config.js file to include the same configs from the Cesium webpack example here: https://github.com/CesiumGS/cesium-webpack-example/blob/master/webpack.config.js

I'm having trouble having access to the static files though. Every request to Workers/Assets/Widgets, etc. gets a 404, which I assume is a side effect of next.js being opinionated and is probably intended behavior.

I saw the next.js documentation on static file serving, but it only explains how to serve a single file at a time.

I'm curious if anyone has any ideas on how I could serve an entire directory from node modules via the public directory (or any other directory).

This is what my current next.config.js looks like:

const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  webpack: (config, { webpack }) => {
    config.node = { ...config.node, fs: "empty" };

    config.plugins = [
      ...config.plugins,
      new CopyWebpackPlugin([
        { from: "node_modules/cesium/Build/Cesium/Workers", to: "Workers" }
      ]),
      new CopyWebpackPlugin([
        {
          from: "node_modules/cesium/Build/Cesium/ThirdParty",
          to: "ThirdParty"
        }
      ]),
      new CopyWebpackPlugin([
        { from: "node_modules/cesium/Build/Cesium/Assets", to: "Assets" }
      ]),
      new CopyWebpackPlugin([
        { from: "node_modules/cesium/Build/Cesium/Widgets", to: "Widgets" }
      ]),
      new webpack.DefinePlugin({
        // Define relative base path in cesium for loading assets
        CESIUM_BASE_URL: JSON.stringify("")
      })
    ];
    return config;
  }
};

I have also tried getting around it by making the cesium base url public and copying them there instead, but I had no luck there.

Does anyone have any ideas?

[willwill96]

I was able to get this working by pre-pending "../public" to each of the "to" arguments in the copy webpack plugins. e.g. to: "../public/Workers". I suppose this makes sense because the build directory is .next, but this seems like a strange convention to me. Is there a cleaner way to accomplish this?

[willwill96]

This isn't a great solution because it requires me to add directories within /public to my .gitignore

[kristojorg]

I also have this question, as I have a service worker file in a node module that I need to serve somehow. Did you find any better way?

[jernkuan]

It seems that copying to static/ is a good option.
the request to these files will be found at _next/static/ etc.

[kristojorg]

FYI I have resorted to using an inline webpack import:

import cssInjectableUrl from '!file-loader?{"publicPath":"/_next/static","outputPath":"static"}!extract-loader!css-loader!@nypl/web-reader/dist/injectable-html-styles.css';

This copies it to my public directory and gives me the url to it

[kenorb]

I think you're missing patterns property (if you're using Webpack v5).

The following code syntax worked for me:

/** @type {import('next').NextConfig} */
const CopyPlugin = require('copy-webpack-plugin')
const nextConfig = {
  reactStrictMode: true,
  // Perform customizations to webpack config.
  webpack: function (config, options) {
    config.experiments = {...config.experiments, asyncWebAssembly: true};
    config.plugins = [
      ...config.plugins,
      new CopyPlugin({
        patterns: [
          {
            from: "./node_modules/somemodule/somefile",
            to: "./static/chunks/"
          }
        ],
      }),
    ];
    return config;
  },
}
module.exports = nextConfig