NEXTJS - How to load webm, mp4 files?

Question

I am using NextJS and on my website I have some webm, mp4 files and I want to display it. Somehow everytime I try to build or start next dev, I get this error. I tried to use withVideos, webpack4, file-loader, url-loader, nothing is working as expected.

info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
info  - Creating an optimized production build  
Failed to compile.

./assets/media/video/feature1.webm
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)


> Build error occurred
Error: > Build failed because of webpack errors
    at /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/build/index.js:17:924
    at async Span.traceAsyncFn (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/telemetry/trace/trace.js:6:584)
error Command failed with exit code 1.

my next.config.js

const nextConfig = {
  future: {
    webpack5: true,
  },
  //   distDir: "./dist/functions/next",
  webpack: (config, { isServer, webpack }) => {
    // Note: we provide webpack above so you should not `require` it
    // Perform customizations to webpack config

    config.plugins.push(new webpack.EnvironmentPlugin(process.env));
    config.optimization.minimize = false;

    config.module.rules.push(
      {
        test: /\.svg$/,
        issuer: {
          test: /\.(js|ts)x?$/,
        },
        use: ["@svgr/webpack"],
      },
      {
        test: /\.(mp4|webm|ogg|swf|ogv)$/,
        use: [
          {
            loader: "file-loader",
            options: {
                publicPath: `./.next/static/videos/`,
                outputPath: `${isServer ? "../" : ""}static/videos/`,
              name: "[name]-[hash].[ext]",
            },
          },
        ],
      }
    );

    // Important: return the modified config
    return config;
  },
};

module.exports = withPlugins(
  [
    withImages({
      webpack(config, options) {
        return config;
      },
    }),
  ],
  nextConfig
);