<p>I was able to run the following code successfully, <em>however</em> it requires additional steps</p>
<ol>
<li>Install the babel runtime - <code>yarn add @babel/runtime</code> - courtesy <a href="https://stackoverflow.com/a/66264883/13749957">this</a> post.</li>
<li>Material UI icon gives an error, so similarly add the material UI dependencies</li>
</ol>
<p>Assuming this is what you want:
<a href="https://i.stack.imgur.com/Yzjoa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yzjoa.png" alt="enter image description here" /></a></p>
<p>Stackblitz -  <strong><a href="https://stackblitz.com/edit/nextjs-utkd32?file=pages%2Findex.js" rel="nofollow noreferrer">https://stackblitz.com/edit/nextjs-utkd32?file=pages%2Findex.js</a></strong></p>
<pre><code>import Head from 'next/head';
import styles from '../styles/Home.module.css';
import PDFViewer from 'pdf-viewer-reactjs';

export default function Home() {
  return (
    &lt;div className={styles.container}&gt;
      &lt;Head&gt;
        &lt;title&gt;Create Next App&lt;/title&gt;
      &lt;/Head&gt;

      &lt;main className={styles.main}&gt;
        &lt;PDFViewer
          document={{
            url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf',
          }}
        /&gt;
      &lt;/main&gt;

      &lt;footer className={styles.footer}&gt;
        &lt;a
          href=&quot;https://vercel.com?utm_source=create-next-app&amp;utm_medium=default-template&amp;utm_campaign=create-next-app&quot;
          target=&quot;_blank&quot;
          rel=&quot;noopener noreferrer&quot;
        &gt;
          Powered by{' '}
        &lt;/a&gt;
      &lt;/footer&gt;
    &lt;/div&gt;
  );
}
</code></pre>
<h3>Dynamic Imports</h3>
<p>If you want to do a <code>dynamic</code> import as you were trying to do above, the export of the individual module maybe need to linked to - potentially <code>pdf-viewer-reactjs/pdf-viewer-reactjs</code> - This needs more to be looked into.</p>
Getting error while using pdf-viewer-reactjs module in Next.js
<p>I have used <a href="https://www.npmjs.com/package/pdf-viewer-reactjs" rel="nofollow noreferrer">pdf-viewer-reactjs</a> into my <code>Next.js</code> project. But getting following error.</p>
<pre><code>error - ./node_modules/pdfjs-dist/build/pdf.js 2094:26
Module parse failed: Unexpected token (2094:26)
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
|   async destroy() {
|     this.destroyed = true;
&gt;     await this._transport?.destroy();
|     this._transport = null;
|

</code></pre>
<hr />
<p><strong>So far I've tried following both ways but nothing worked for me!</strong></p>
<p><strong>How to use this <code>npm</code> into my project without any errors?</strong></p>
<p>The code (Way 1):</p>
<pre><code>import React from 'react';
import StudentPortalLayout from &quot;../../../components/Layout/StudentLayout&quot;;

import dynamic from &quot;next/dynamic&quot;;

const PDFViewer = dynamic(() =&gt; import(&quot;pdf-viewer-reactjs&quot;), {
    ssr: false
});

function PDFView() {
    return (
        &lt;StudentPortalLayout hideSidebar={true}&gt;
            &lt;PDFViewer
                document={{
                    url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf',
                }}
            /&gt;
        &lt;/StudentPortalLayout&gt;
    )
}

export default PDFView;
</code></pre>
<p>The code (Way 2):</p>
<pre><code>import React from 'react';
import StudentPortalLayout from &quot;../../../components/Layout/StudentLayout&quot;;

import PDFViewer from 'pdf-viewer-reactjs'

function PDFView() {
    return (
        &lt;StudentPortalLayout hideSidebar={true}&gt;
            &lt;PDFViewer
                document={{
                    url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf',
                }}
            /&gt;
        &lt;/StudentPortalLayout&gt;
    )
}

export default PDFView;
</code></pre>