我想使用react-pdf在我的下一个应用程序中显示公共文件夹中的PDF文件，但我一直收到PDF未找到错误-这是我的设置：

// pdf component
import { pdfjs, Document, Page } from "react-pdf";
import pdf from '../../public/document.pdf';

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/build/pdf.worker.min.js',
    import.meta.url,
  ).toString();
// pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;

const PDFViewer = () => (
    <Document  file={pdf}>
        <Page />
    </Document>
)

我导入这个组件用于我的主组件，如下所示：

import dynamic from "next/dynamic";
const PDFViewer = dynamic(() => import('@/components/PDFViewer'), { ssr: false })

export default function Main() {
    return (
        <div>
            <PDFViewer />
        </div>
    )
}

在next.config.js中，我尝试配置raw-loader包来加载PDF文件，如下所示：

const nextConfig = {
    webpack: (config) => {
        config.module.rules.push({
             test: /\.(pdf)$/i,
             loader: 'file-loader',
             options: {
                 name: './public/document.pdf'
             }
        })
    }
    return config
}

文件夹结构如下所示：

• 项目
• 组件
• 页
• 公共
• document.pdf
• 类型
• next.config.js

这是我在控制台得到的消息：
警告：MissingPDFException：缺少PDF“http：//localhost：3000/_next/public/document.pdf”。
如何纠正这种情况？