react-pdf

<iframe src="/document.pdf" width="100%" height="600px" />

npm install react-pdf

import { Document, Page } from 'react-pdf';

function PDFViewer() {
  const [numPages, setNumPages] = useState<number>(0);

  return (
    <Document
      file="/sample.pdf"
      onLoadSuccess={({ numPages }) => setNumPages(numPages)}
    >
      <Page pageNumber={1} />
    </Document>
  );
}

import { pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = 
  `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;

// node_modules에서 복사해서 public 폴더에 넣기
pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs';

// 또는 webpack의 worker-loader 활용
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min.mjs';
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

import dynamic from 'next/dynamic';

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

// next.config.ts
const nextConfig = {
  webpack: (config) => {
    config.resolve.alias.canvas = false;
    return config;
  },
};

if (typeof window !== 'undefined') {
  pdfjs.GlobalWorkerOptions.workerSrc = 
    `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
}

const options = {
  cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,
  cMapPacked: true,
};

<Document file={src} options={options}>
  <Page pageNumber={1} />
</Document>

function PDFViewer({ src }: { src: string }) {
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);

  return (
    <div>
      <Document
        file={src}
        onLoadSuccess={({ numPages }) => setTotalPages(numPages)}
      >
        <Page pageNumber={currentPage} />
      </Document>

      <div className="controls">
        <button
          onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
          disabled={currentPage <= 1}
        >
          이전
        </button>
        <span>{currentPage} / {totalPages}</span>
        <button
          onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
          disabled={currentPage >= totalPages}
        >
          다음
        </button>
      </div>
    </div>
  );
}

const [scale, setScale] = useState(1);

<Page pageNumber={currentPage} scale={scale} />

<button onClick={() => setScale(s => Math.max(0.5, s - 0.25))}>축소</button>
<button onClick={() => setScale(s => Math.min(3, s + 0.25))}>확대</button>

const onPageLoadSuccess = (page) => {
  const viewport = page.getViewport({ scale: 1 });
  // viewport.width, viewport.height = PDF 원본 크기
  
  const containerWidth = containerRef.current.clientWidth;
  const containerHeight = containerRef.current.clientHeight;
  
  const scaleX = containerWidth / viewport.width;
  const scaleY = containerHeight / viewport.height;
  const fitScale = Math.min(scaleX, scaleY); // 컨테이너에 딱 맞는 스케일
  
  setScale(fitScale);
};

import 'react-pdf/dist/Page/TextLayer.css';
import 'react-pdf/dist/Page/AnnotationLayer.css';

<Page
  pageNumber={1}
  renderTextLayer={true}
  renderAnnotationLayer={true}
/>

<Page
  pageNumber={1}
  renderTextLayer={false}
  renderAnnotationLayer={false}
/>

<Document
  file={src}
  loading={<Spinner />}
  onLoadSuccess={onDocumentLoad}
>
  <Page
    pageNumber={currentPage}
    loading={<PageSkeleton />}
    onLoadSuccess={onPageLoad}
  />
</Document>

<Document file={src} loading="">
  <Page pageNumber={1} loading="" onLoadSuccess={() => setLoading(false)} />
</Document>

<Document
  file={src}
  onLoadError={(error) => {
    console.error('PDF load failed:', error);
    setError('PDF 파일을 불러올 수 없습니다.');
  }}
  error={<div className="text-red-500">PDF 로드 실패</div>}
>

// ❌ 모든 페이지 한 번에 렌더링
{Array.from({ length: numPages }, (_, i) => (
  <Page key={i} pageNumber={i + 1} />
))}

// ✅ 현재 페이지만 렌더링
<Page pageNumber={currentPage} />

// ❌ 매 렌더링마다 새 객체
<Document options={{ cMapUrl: '...', cMapPacked: true }}>

// ✅ 상수로 분리
const PDF_OPTIONS = {
  cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,
  cMapPacked: true,
};

<Document options={PDF_OPTIONS}>

const onDocumentLoadSuccess = useCallback(
  ({ numPages }: { numPages: number }) => {
    setTotalPages(numPages);
  },
  [setTotalPages]
);