audio files in Next js

[khan03148]

How to add audio files in next js. i tried loader but its not working showing me error. Screenshot (90)

[jamesmosier]

Hi @khan03148. You can load audio files like this in your next.config.js:

npm install file-loader url-loader --save-dev

module.exports = {
  webpack(config, options) {
    const { isServer } = options;
    config.module.rules.push({
      test: /\.(ogg|mp3|wav|mpe?g)$/i,
      exclude: config.exclude,
      use: [
        {
          loader: require.resolve('url-loader'),
          options: {
            limit: config.inlineImageLimit,
            fallback: require.resolve('file-loader'),
            publicPath: `${config.assetPrefix}/_next/static/images/`,
            outputPath: `${isServer ? '../' : ''}static/images/`,
            name: '[name]-[hash].[ext]',
            esModule: config.esModule || false,
          },
        },
      ],
    });

    return config;
  },
};

---

Also the public folder might not be the best place for these files. The public folder is meant to be accessible to users via your-website.com/audio/click1.wav.

[khan03148]

hey thanks but i need some thing like this. check this project i am working on metronome project but i am not able to do it. can you help me how to get same concept in Next js.
https://codesandbox.io/s/52x4v953ml?file=/package.json:181-239

[khan03148]

Hey waiting for your response?

[jamesmosier]

what error are you seeing? do you have a sample repository you could share?

[bgryks18]

Thank you so much!
By the way, if anyone gets an error like "isServer is not defined", it's because is that it must be config.isServer.

[ragnaroks]

this solution broken after next@^13，maybe earlier，seems like next.js not copy files without allowed extension。

may helps someone on [email protected] and above：

next.config.js

/** @type {import('next').NextConfig} */
const config = {
  ...,
  webpack:function(config,options){
    config.module.rules.push({
      test:/\.(mp4|mp3|ogv|oga|webm)$/i,
      type: 'asset/resource',
      generator: {
        emit:true,
        filename: (options.isServer?'../':'') + 'static/media/[name].[contenthash:8][ext]',
        publicPath: (config.assetPrefix??config.basePath??'') + '/_next/static/media/',
      }
    });
    return config;
  }
};

module.exports = config;

package.json

{
  ...,
  "scripts": {
    "dev": "next dev",
    "build:windows": "next build && xcopy \".next/server/static/media\" \"out/_next/static/media\" /S /I /Q /Y && explorer out",
    "build:linux": "next build && cp --recursive --update \".next/server/static/media\" \"out/_next/static/media\""
  },
  ...
}

assets.d.ts

declare module '*.bin' {
  const src:string;
  export default src;
};

declare module '*.dat' {
  const src:string;
  export default src;
};

declare module '*.mp4' {
  const src:string;
  export default src;
};

...

[atissedrescaleway]

If it can help somebody, here's how I made it work with Next 15

To bundle PDF files inside the /_next/static/pdf/ folder (I couldn't use the public folder for other reasons).

const nextConfig: NextConfig = {
  ..., // rest of the config
  output: 'export', // My app is statically exported, not sure if that changes anything for this use case
  webpack: (config, { isServer }) => {
    config.module.rules.push({
      test: /\.pdf/,
      type: 'asset/resource',
      generator: {
        filename: '[name].[hash][ext]',
        publicPath: `/_next/static/pdf/`,
        outputPath: `${isServer ? '../' : ''}static/pdf/`,
      },
    });
    return config;
  },
 ... // rest of the config

Without the isServer condition, PDF files are bundled into /_next/server/static/pdf/ instead of /_next/static/pdf/, which makes them unaccessible from the browser