Componente simples de player, para adicionar nos projetos da imersão alura.

.js

import React, { useRef, useState } from "react";
import Song from "../../assets/audio/song.mp3";
import styled from "styled-components";

export const Container = styled.div`
	width: 50px;
	height: 50px;
	background-color: #fff;
	border-radius: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
`;

export function Player() {
	const audioTrack = useRef();
	const [song, setSong] = useState(true);

	function handlePlay() {
		setSong(false);
		audioTrack.current.play();
	}

	function handleSongPause() {
		audioTrack.current.pause();
		setSong(true);
	}

	return (
		<Container>
			<audio ref={audioTrack} src={Song} />
			{song && (
				<button type="button" onClick={handlePlay}>
					Play
				</button>
			)}

			{!song && (
				<button type="button" onClick={handleSongPause}>
					Pause
				</button>
			)}
		</Container>
	);
}

.tx

Agora é necessário criar um arquivo next.config.js na raiz do projeto.

Depois disso é necessário instalar duas dependências file-loader e o url-loader, 
para que o nextjs entenda que estamos executando um arquivo mp3.

yarn add file-loader url-loader ou npm install file-loader url-loader

Após a conclusão é necessário inserir configurações para o next.config.js

module.exports = {
	webpack: (config, options) => {
		config.module.rules.push({
			test: /\.mp3$/,
			use: [
				options.defaultLoaders.babel,
				{
					loader: "file-loader",
					loader: "url-loader",
				},
			],
		});

		return config;
	},
};

.txt

Depois de todos esses passos você precisa ter um audio mp3, dentro de uma pasta, eu criei uma pasta dentro de src chamada
assets e dentro dela outra pasta chama audio e coloquei o arquivo mp3 ai.

Por isso eu faço import Song from "../../assets/audio/song.mp3";

Obs: O nome do arquivo pode ser o que você preferir. :)