From 9943a329aee03a2fbf5a2be13e60070d28769cef Mon Sep 17 00:00:00 2001
From: Thuc Pham <51660321+thucpn@users.noreply.github.com>
Date: Wed, 24 Jul 2024 15:19:41 +0700
Subject: [PATCH] docs: update readme for new pdf version (#5)

---
 README.md | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/README.md b/README.md
index 2aa2fe316..beb98804e 100644
--- a/README.md
+++ b/README.md
@@ -51,6 +51,42 @@ function App() {
 </PdfFocusProvider>
 ```
 
+## Next.js
+
+NextJs applications may need to update their configuration to be compatible with react-pdf v9 and pdfjs v4
+If you have issues related to canvas, you can add the following to your `next.config.js`:
+
+```diff
+module.exports = {
++ webpack: (config) => {
++   config.resolve.alias.canvas = false;
+
++   return config;
++ },
+}
+```
+
+Another common issue is: `TypeError: Promise.withResolvers is not a function`
+To fix this issue, you need to use dynamic imports for the PDF component (to indicate to NextJs to use it for client-side rendering only).
+
+```diff
+- import { PDFViewer, PdfFocusProvider } from "@llamaindex/pdf-viewer";
+
++ import dynamic from "next/dynamic";
+
++ // Dynamic imports for client-side rendering only
++ const PDFViewer = dynamic(
++   () => import("@llamaindex/pdf-viewer").then((module) => module.PDFViewer),
++   { ssr: false },
++ );
+
++ const PdfFocusProvider = dynamic(
++   () =>
++     import("@llamaindex/pdf-viewer").then((module) => module.PdfFocusProvider),
++   { ssr: false },
++ );
+```
+
 ## 🙏 Thanks
 
 Thanks to the developers of the following dependencies that we're using: