Having trouble rendering a local PDF within a NextJS app-CodePudding

I'm trying to show my resume (local file) within a react component but have been running into issues importing it.

import myResume from '../assets/pdfs/myResume.pdf' just gives me the error:

Cannot find module '../assets/pdfs/myResume.pdf' or its corresponding type declarations.ts(2307)

and if I try to use the import like this:

import myResume from '../assets/pdfs/myResume.pdf'

function Resume() {
  return (
    <div>
      <iframe src={myResume} />
    </div>
  )
}

export default Resume

It gives me a failed to compile error:

./assets/pdfs/myResume.pdf Module parse failed: Unexpected token (1:0) 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 (Source code omitted for this binary file)

I've also tried using the React-pdf package, but with the same results.

CodePudding user response：

Next js looks for the files in the public folder put your assets folder in the public folder then use like this: src = "/assets/pdfs/myResume.pdf". and don't include public folder in path because it automatically looks for it inside the public folder.

CodePudding user response：

Actually figured out a workaround, not sure if this is the correct way, but I was able to get it to work by just putting the src right in the iframe.

So instead of

import myResume from '../assets/pdfs/myResume.pdf'

function Resume() {
  return (
    <div>
      <iframe src={myResume} />
    </div>
  )
}

I just did

function Resume() {
  return (
    <iframe src='/assets/pdfs/myResume.pdf' />
  )
}

which seems to work well.