Initial commit

Author: phbernard

.codesandbox/workspace.json

@@ -0,0 +1,20 @@
+{
+  "responsive-preview": {
+    "Mobile": [
+      320,
+      675
+    ],
+    "Tablet": [
+      1024,
+      765
+    ],
+    "Desktop": [
+      1400,
+      800
+    ],
+    "Desktop  HD": [
+      1920,
+      1080
+    ]
+  }
+}

.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

README.md

@@ -1,2 +1 @@
-# nextjs-react-pdf-sandbox
-Created with CodeSandbox
+# react-pdf + next js example

components/pdf-viewer.js

@@ -0,0 +1,41 @@
+import { useState } from "react";
+// import default react-pdf entry
+import { Document, Page, pdfjs } from "react-pdf";
+// import pdf worker as a url, see `next.config.js` and `pdf-worker.js`
+import workerSrc from "../pdf-worker";
+
+pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
+
+export default function PDFViewer() {
+  const [file, setFile] = useState("./sample.pdf");
+  const [numPages, setNumPages] = useState(null);
+
+  function onFileChange(event) {
+    setFile(event.target.files[0]);
+  }
+
+  function onDocumentLoadSuccess({ numPages: nextNumPages }) {
+    setNumPages(nextNumPages);
+  }
+
+  return (
+    <div>
+      <div>
+        <label htmlFor="file">Load from file:</label>{" "}
+        <input onChange={onFileChange} type="file" />
+      </div>
+      <div>
+        <Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
+          {Array.from({ length: numPages }, (_, index) => (
+            <Page
+              key={`page_${index + 1}`}
+              pageNumber={index + 1}
+              renderAnnotationLayer={false}
+              renderTextLayer={false}
+            />
+          ))}
+        </Document>
+      </div>
+    </div>
+  );
+}

next.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+  future: {
+    webpack5: true
+  },
+  webpack: (config) => {
+    // load worker files as a urls with `file-loader`
+    config.module.rules.unshift({
+      test: /pdf\.worker\.(min\.)?js/,
+      use: [
+        {
+          loader: "file-loader",
+          options: {
+            name: "[contenthash].[ext]",
+            publicPath: "_next/static/worker",
+            outputPath: "static/worker"
+          }
+        }
+      ]
+    });
+
+    return config;
+  }
+};

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "react-pdf-next-js",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "post-update": "yarn upgrade --latest"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-pdf": "^5.2.0"
+  },
+  "devDependencies": {
+    "file-loader": "^6.2.0"
+  },
+  "license": "MIT",
+  "keywords": [],
+  "description": ""
+}

pages/index.js

@@ -0,0 +1,9 @@
+import dynamic from "next/dynamic";
+
+const PDFViewer = dynamic(() => import("../components/pdf-viewer"), {
+  ssr: false
+});
+
+export default function PDF() {
+  return <PDFViewer />;
+}

pdf-worker.js

@@ -0,0 +1,6 @@
+if (process.env.NODE_ENV === "production") {
+  // use minified verion for production
+  module.exports = require("pdfjs-dist/build/pdf.worker.min.js");
+} else {
+  module.exports = require("pdfjs-dist/build/pdf.worker.js");
+}