deployment error

[hassanmehedi1]

it works fine in the local server as background image but after deployment it longer works. The video simply does not appears

[idootop]

I've encountered the same issue. It seems that the latest version of Next.js changes file paths during build. Here's a workaround:

const { isServer, dev } = options;

config.module.rules.push({
  test: /\.(mp4|webm|mov|ogg|swf|ogv)$/,
  use: [
    {
      loader: require.resolve('file-loader'),
      options: {
        publicPath: `${prefix || basePath}/_next/static/videos/`,
        // 🔥 Fix the relative path on production build
        outputPath: `${dev ? '' : '../'}${isServer ? '../' : ''}static/videos/`,
        name: '[name]-[hash].[ext]',
      },
    },
  ],
});

Alternatively, you can try using the next-file-loader I've just created. It's based on the official next-image-loader but generalized to support various asset types like video and audio. Here's an example:

// Install
npm install -D next-file-loader

// next.config.js
const withNextFileLoader = require('next-file-loader')([
  {
    // Video loader
    test: /\.(mp4|webm|mkv|ogg|ogv|wmv|avi|mov|flv|m4v|3gp)$/i,
    outputPath: 'static/videos/[name].[hash:8].[ext]',
  },
  {
    // Audio loader
    test: /\.(mp3|wav|flac|ogg|aac|m4a|wma|ape)$/i,
    outputPath: 'static/audios/[name].[hash:8].[ext]',
  },
  {
    // Custom file content resolution
    test: /\.(rar|zip)$/i,
    outputPath: 'static/other/[name].[hash:8].[ext]',
    resolve: ({ src, content, resourcePath }) => {
      return `export default {
        src: "${src}",
        fileSize: "100KB",
        resourcePath: "${resourcePath}"
      }`;
    },
  },
]);

module.exports = withNextFileLoader({
  // Your existing nextConfig
});