Accepted answer

Since your PDF file is located in the public folder, you can reference the image's path directly in the filePath prop.

You also need to make sure react-file-viewer is only imported in the browser as it depends on window being present to work properly. You can do so by dynamically importing the component through next/dynamic with ssr: false.

import dynamic from 'next/dynamic';

const FileViewer = dynamic(() => import('react-file-viewer'), {
    ssr: false

export default function Index() {
    return (
        <FileViewer fileType="pdf" filePath="/pdf.pdf" />

Related Query

More Query from same tag