I am creating an portfolio app from Tim Baker’s template in order to learn. I have zero TS experience and am overall new to developing with node.

My goal here is to “simply” open a PDF in my app/browser whose path is defined in data.tsx.

I am getting this compile error:

Build Error
Failed to compile

Next.js (14.2.3)
./src/assets/resume.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)

Import trace for requested module:
./src/assets/resume.pdf
./src/data/data.tsx
./src/pages/index.tsx

Here are snippets that I know to be relevant – there could be something that I don’t know about yet. I have included a similar pattern with JPG because the JPG images render just fine.

data.tsx

// data.tsx
import resumePDF from '../assets/resume.pdf';
import porfolioImage1 from '../images/portfolio/portfolio-1.jpg';

...

/**
 * Hero section
 */
export const heroData: Hero = {
  imageSrc: heroImage,
  name: `I'm freshflayedwaffle`,
  actions: [
    {
      href: resumePDF,
      text: 'Resume',
      primary: true,
      Icon: ArrowDownTrayIcon,
    }
  ],
};

...

/**
 * Portfolio section
 */
export const portfolioItems: PortfolioItem[] = [
  {
    title: 'Project title 1',
    description: 'Give a short description of your project here.',
    url: 'https://reactresume.com',
    image: porfolioImage1,
  },

hero.tsx

// partial hero component - hero.tsx
<div className="flex w-full justify-center gap-x-4">
  {actions.map(({href, text, primary, Icon}) => (
    <a
      className={classNames(
        'flex gap-x-2 rounded-full border-2 bg-none px-4 py-2 text-sm font-medium text-white ring-offset-gray-700/80 hover:bg-gray-700/80 focus:outline-none focus:ring-2 focus:ring-offset-2 sm:text-base',
        primary ? 'border-orange-500 ring-orange-500' : 'border-white ring-white',
      )}
      href={href}
      key={text}>
      {text}
      {Icon && <Icon className="h-5 w-5 text-white sm:h-6 sm:w-6" />}
    </a>
  ))}
</div>

dataDef.ts

// dataDef.ts
interface HeroActionItem {
  href: string;
  text: string;
  primary?: boolean;
  Icon?: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, 'ref'>>;
}

types.d.ts

// types.d.ts
declare module '*.jpg' {
  const value: string;
  export default value;
}

declare module '*.pdf' {
  const value: string;
  export default value;
}

What I tried

I mimicked the setup for the image imports and expected PDF to work but I get the aforementioned compile error.

I looked into webpack loaders but didn’t find any that seemed to apply to PDF. I also found a library react-pdf but my gut tells me that both of these are over-engineering and I’m missing something dumb.

I did a lot of googling and reading but I don’t know what I’m looking for.