A Webpack file loader that simplifies the import of video, audio, and other assets in Next.js applications.
npm install -D next-file-loader
# or
pnpm install -D next-file-loader
# or
yarn add -D next-file-loader
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
});This project is licensed under the MIT License.