Next.js导入public目录MP3文件报错Module not found求助

错误原因 #

Next.js的模块解析规则和纯React项目不同：在纯React中，绝对路径/audio/intro.mp3会指向public/audio目录，但Next.js里模块导入的绝对路径/是从项目根目录的源码文件夹（如components、pages）开始解析，而非public目录，所以找不到目标文件。

解决方案 #

方案1：直接使用静态资源URL（推荐）

Next.js会将public目录下的文件暴露为根路径的静态资源，因此无需导入音频文件，直接把资源路径字符串传给useSound即可：

import React from "react";
import { Button, Flex, Box, WrapItem } from "@chakra-ui/react";
import useSound from "use-sound";

export default function Introduction() {
    // 直接传入public下的资源路径
    const [play, { stop }] = useSound("/audio/intro.mp3");

    return (
        <>
            <Flex>
                <Box>
                    <Button
                        variant="ghost"
                        p="4"
                        size="lg"
                        onMouseEnter={() => play()}
                        onMouseLeave={() => stop()}>
                        Welcome to Interactive Learning Application
                    </Button>
                </Box>
            </Flex>
        </>
    );
}

方案2：使用相对路径导入

如果坚持要通过导入方式引用文件，可使用相对路径指向public目录下的音频文件（你的Introduction.js在components/目录，所以相对路径为../public/audio/intro.mp3）：

import React from "react";
import { Button, Flex, Box, WrapItem } from "@chakra-ui/react";
import useSound from "use-sound";
// 使用相对路径导入
import Intro from "../public/audio/intro.mp3";

export default function Introduction() {
    const [play, { stop }] = useSound(Intro);

    return (
        <>
            <Flex>
                <Box>
                    <Button
                        variant="ghost"
                        p="4"
                        size="lg"
                        onMouseEnter={() => play()}
                        onMouseLeave={() => stop()}>
                        Welcome to Interactive Learning Application
                    </Button>
                </Box>
            </Flex>
        </>
    );
}

方案3：配置绝对路径别名（适合大型项目）

在项目根目录创建jsconfig.json文件，配置路径别名让/audio指向public/audio，这样原导入语句可正常使用：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "/audio/*": ["public/audio/*"]
    }
  }
}

内容的提问来源于stack exchange，提问作者Zahwa27