Usar archivos mp3 en React con Next.js

Tiempo de lectura: < 1 minuto

Hoy vamos a aprender a importar y utilizar nuestros archivos .mp3 con Next y React.

Cuando intentamos importar un archivo .mp3 nos devuelve este error:

./src/assets/sounds/ .mp3
Module parse failed: Unexpected character '' (1:3)
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)

Import trace for requested module:
./src/assets/sounds/ .mp3
./src/util/Sound.tsx
./src/components/widgets/perfil/Creditos.tsx
./src/pages/dashboard/[path].tsx

Para solucionarlo tenemos que instalar file-loader:

npm i url-loader --save

Y configurarlo dentro de nuestro module.exports

/** @type {import('next').NextConfig} */

const nextConfig = {
  //distDir: 'build'

  webpack(config, options) {
    config.module.rules.push({
      test: /\.mp3$/,
      use: {
        loader: "url-loader",
      },
    });
    return config;
  },

};

export default nextConfig;

Y para que la importacón de *.mp3 no de problema con TypeScript añadiremos dentro de declarations.d.ts (si no lo tenemos lo creamos)

declare module "*.mp3" {
  const src: string;
  export default src;
}

Y se importa dentro de tsconfig.json con el resto de includes.

{
  "include": ["declarations.d.ts"]
}