Next File Loader

A Webpack file loader that simplifies the import of video, audio, and other assets in Next.js applications.

⚡️ Installation

npm install -D next-file-loader

# or
pnpm install -D next-file-loader

# or
yarn add -D next-file-loader

🔥 Usage

Here's an example configuration:

// 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
});

Or ESM module:

// next.config.mjs
import createNextFileLoader from 'next-file-loader';

const withNextFileLoader = createNextFileLoader([
  // ... your file load rules
]);

export default withNextFileLoader({
  // Your existing nextConfig
});

⚡ Turbopack

The same withNextFileLoader(...) config works under Turbopack (next dev --turbopack / next build --turbopack) — no extra setup. When Turbopack is active, the plugin injects turbopack.rules instead of a webpack loader, emitting matched files natively and resolving imports to { src }, just like webpack mode:

import video from './demo.mp4';

video.src; // "/_next/static/..."

Requirements and limitations:

• Requires Next.js 16.2+ (uses Turbopack's rules condition and type: 'asset').
• resolve and outputPath are webpack only. Turbopack emits assets natively and cannot run a custom resolve function (loader options must be JSON serializable) or honor a custom outputPath. These options are ignored under Turbopack, with a console warning.

To silence that warning, pass { ignoreWarnings: true } as the second argument (defaults to false):

const withNextFileLoader = createNextFileLoader(
  [
    // ... your file load rules
  ],
  { ignoreWarnings: true },
);

📖 License

This project is licensed under the MIT License.