For Next.js 14 only write "use client" on top of your page.js file, before the import lines, below these lines, write const styles and const MyDocument functions ,inside page, write the useState and useEffect and inside the return the pdfViewer, to this tag add style={{ 'width': '100%', 'height': '100v' }} so that the PDFViewer is the full size on the page, with this you eliminate the need to place dynamic and create two different components, it works for me :D
Thank you, if you want to display the pdf with a larger height and width, just add a class to pdfViewer and set the desired width and height in the class. For small screen use media query to transition
Great tutorial! A useful alternative I found was to 'screenshot' whatever component I wanted rendered and render it as an image with react-pdf, with this I could add everything I wanted.
FYI: you'll need to run npm i next for your project to find dynamic, not npm i @next-tools/dynamic. As for the tiny PDF Viewer, try adding in some styles like so in your PDFView component (the one below where you have the as the root component):
Dude you dont even know how large problem it was for me load image to my pdf. it's always said it cant get to it. Then I remembered that I week ago I watched this video and you said to use folder ...publick/assets. you saved me.
Thanks for making this! I still have to rework this a bit for my use case at work, but thanks for helping me get started! I tried using react-to-pdf but I couldn't get it to work; it makes use of a componentRef and it was just complicating things for me with what I'm doing.
Hey, can you continue explainin g the styling , taking values from an d api and stuff like that?, this is the best video on the creation of PDF in NEXTjs
I am getting this error Any idea to fix this ./node_modules/@react-pdf/font/lib/index.browser.es.js Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit').
Hi thanks for help can you help me with challenge I would really appreciate I want to create content table page like we have in books, problem is I don't know how to assign page number to in content table because I don't know how many pages chapter 1 will take and chapter 2 will start at what
I finally got it to work but it is a hideous mess. It shows the original page as well as a raw text version and then the nav buttons are displayed on a third page. Going to take a look at your code.
After git clone, if you see in the left corner white square try to change the font to some default like Font.register({ family: "Helvetica", src: "/path/to/helvetica.ttf" });
hi, when run "npm run build", I get this error "PDFViewer is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build " any solution please.
i got this err : Error: PDFViewer is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build. This error happened while generating the page. Any console logs will be displayed in the terminal window.
Error: PDFDownloadLink is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build. getting this error in production but works fine on local i did ll the steps same as shown in video i am using next js 13
Amazing bro! Did you have the error: PDFViewer is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build. When building the application? I`m having problems with that Thanks for the help!
I had an issue with fs not defined or some issues ,this code worked for me module.exports = { webpack: (config, { isServer }) => { if (!isServer) { // Exclude 'fs' module from client-side bundle config.resolve.fallback = { ...config.resolve.fallback, fs: false, }; } return config; }, };
![Digital Circus Episode 4 [TRAILER]](http://i.ytimg.com/vi/abZtsmMUbJo/mqdefault.jpg)
![ROSÉ(로제) - APT. (Band VER.) (With. 이영지) [더 시즌즈-이영지의 레인보우] | KBS 241129 방송](http://i.ytimg.com/vi/IW8qaemx74g/mqdefault.jpg)
“I don’t know what that means, I just know that this works” - The stranger that saved my job.
"This knowledge has been passed down for generations" vibe
got laughing harder than I want to admit 🤣🤣
For Next.js 14 only write "use client" on top of your page.js file, before the import lines, below these lines, write const styles and const MyDocument functions ,inside page, write the useState and useEffect and inside the return the pdfViewer, to this tag add style={{ 'width': '100%', 'height': '100v' }} so that the PDFViewer is the full size on the page, with this you eliminate the need to place dynamic and create two different components, it works for me :D
Thanx a lot
i did this but I am getting error 404: page not found can you help please?
I love the enthusiasm and how you're so fired up to share your knowledge. You earned a sub :)
Thank you, if you want to display the pdf with a larger height and width, just add a class to pdfViewer and set the desired width and height in the class. For small screen use media query to transition
bro you literally saved my life - i downloaded the video just in case you ever take it down i have some refference
Great tutorial!
A useful alternative I found was to 'screenshot' whatever component I wanted rendered and render it as an image with react-pdf, with this I could add everything I wanted.
I don't even need to use this packaging, but I stayed to watch because you are awesome! Can feel the 'pain' you went through, thanks for sharing.
Hello there. Thank you for this wonderful video. i have struggled over this bug for a month.Thank You and more videos
If you guys wondering why your custom font doesn’t work. Just try on style on component, not component.
FYI: you'll need to run npm i next for your project to find dynamic, not npm i @next-tools/dynamic. As for the tiny PDF Viewer, try adding in some styles like so in your PDFView component (the one below where you have the as the root component):
dude legit kekw's in a dev tutorial at 6:23
Thanks for the vid defo let me know of a few pitfalls I didn't realise I was already in
Dude it worked!!!!!
thanks a bunch 🔥🔥🔥
Dude you dont even know how large problem it was for me load image to my pdf. it's always said it cant get to it. Then I remembered that I week ago I watched this video and you said to use folder ...publick/assets. you saved me.
That was the best ending. Yaaah. Anyway, thanks for this. Can’t wait to try it out.
Great video, was incredibly helpful. The fix to the size I found is adjusting the width and height in a global stylesheet on the Iframes.
I had a lot of issues trying to get this work yesterday!
Thanks for making this! I still have to rework this a bit for my use case at work, but thanks for helping me get started! I tried using react-to-pdf but I couldn't get it to work; it makes use of a componentRef and it was just complicating things for me with what I'm doing.
You are a life-saver ! Thanks a lot 👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾
Thank you! react-pdf is hard to use for real when used with nextjs
may your days be long and filled with the lustfully desires of all neards and developers all over the world. you just saved my ass.
Thank you so much. Wow this is a big help.
That was really helpful, thank you.
Ssr false is just removing server side rendering. You are making it a client component. In the new nextjs you don't need to do this. Just "use client"
Hey, can you continue explainin g the styling , taking values from an d api and stuff like that?, this is the best video on the creation of PDF in NEXTjs
hugeee dose of knowledge
you can style the PDFViewer component with 100% width or anything you want.
Awesome! Do you know how to open a PDF in a new tab?
Thanks for letting me out the gutter, budd
I am getting this error Any idea to fix this
./node_modules/@react-pdf/font/lib/index.browser.es.js
Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit').
I love how you explain everything haha
can you import pdf like you've done with an Image?
Thank you so much. You save me
Hi. Do you know how to turn a PDF into a Blob?
i cant take anymore.....
Please, new Tutorial with Next - 14 !!
Hi thanks for help can you help me with challenge I would really appreciate I want to create content table page like we have in books, problem is I don't know how to assign page number to in content table because I don't know how many pages chapter 1 will take and chapter 2 will start at what
How to create table?
Thanks alot man, is it possible to create PDFs with dynamic content, like a receipt or something?
this is what i need to know
Thank you, it was very helpful
I finally got it to work but it is a hideous mess. It shows the original page as well as a raw text version and then the nav buttons are displayed on a third page. Going to take a look at your code.
Gracias por el video.
Para la comunidad latina
Almost shot myself, this was driving me crazy lmao
thank you
After git clone, if you see in the left corner white square try to change the font to some default like Font.register({ family: "Helvetica", src: "/path/to/helvetica.ttf" });
hi, when run "npm run build", I get this error "PDFViewer is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build " any solution please.
Watch the hole video. The trick is to generate a second view to display the document with disabled SSR
@@MarkSchewe I did that and still get the error while building my next.js app
i got this err : Error: PDFViewer is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
I'm sorry it's been so long since I've done anything with this. If I were you I'd ask chatGPT lol, it legit might know exactly how to fix this
Error: PDFDownloadLink is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build.
getting this error in production but works fine on local
i did ll the steps same as shown in video
i am using next js 13
Hello Bro, Amazing tutorial
in latest next js do this work
thanks! you save me
can you please share the git link of the above tutorial?
github.com/bbois1999/react-pdf
@@brendanbois5365 thank you🙂
Amazing bro! Did you have the error:
PDFViewer is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build.
When building the application? I`m having problems with that
Thanks for the help!
Hi. Do you know how to turn a PDF into a Blob?
i cant take anymore.....
@@nevajnosovsem2369 got no idea how to do it. If you know how to i will be really thankful.
@@nevajnosovsem2369 I found the solution! On your next.config file you should add:
const nextConfig = {
/* all your config */
swcMinify: false,
}
Awesome help +++++++++++++++++ Thank You 😀
Is there a way to make it bigger? Instead of zooming in the pdf? It's pretty hard
I use tailwind,
global.css set an iFrame css declaration and give the height and width you want, the Document tag fills it up.
make more vids bro
I had an issue with fs not defined or some issues ,this code worked for me
module.exports = {
webpack: (config, { isServer }) => {
if (!isServer) {
// Exclude 'fs' module from client-side bundle
config.resolve.fallback = {
...config.resolve.fallback,
fs: false,
};
}
return config;
},
};