Next.js Reports tutorial with Microsoft Excel

Подписаться 327 тыс.

Просмотров 14 тыс.

50% 1

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
In this Next.js Reports tutorial with Microsoft Excel you will learn how to create and download reports in Next.js with MS Excel, csv, and text file formats. You will also learn how to provide the requested data as JSON or HTML.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
🔗 Source Code Example: github.com/gitdagray/nextjs-e...
🔗 Blog article for this video: www.davegray.codes/posts/how-...
👇 Follow Me On Social Media:
GitHub: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Next.js Reports tutorial with Microsoft Excel
(00:00) Intro
(00:10) Welcome
(00:34) Project Reports
(00:55) Example Project Demo
(03:19) Parent page component
(04:46) Export component
(06:16) Report route
(07:36) Install the Correct Version of xlsx
(10:08) Route Handler
📚 Tutorial References:
🔗 Next.js: nextjs.org/
🔗 Sheet.js (xlsx): docs.sheetjs.com/
Was this tutorial about creating and downloading Microsoft Excel reports in Next.js helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #reports #excel

Опубликовано:

5 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 72

@CindyLatta 5 месяцев назад

As always, brilliant content!

@mdsalahuddin46464 5 месяцев назад

Awesome , Dave. Thanks a lot

@joe_j 5 месяцев назад

Very rare unique content. Thank you Gray. I will use this one somewhere definitely

@DaveGrayTeachesCode 5 месяцев назад

Glad you enjoyed it!

@mrbilchalan 5 месяцев назад

Thank you, Dave.

@nro337 5 месяцев назад

Really cool video!

@user-hm4jh8tv6d 5 месяцев назад

Hi, Dave. I'm web developer from Russia. I have experience approximately 8 years. I started with JS (vanilla and jQuery) and now I try to see all your videos because it help me be aware of new ways in front end developing. What you're doing is amazing. Thanks for it.

@DaveGrayTeachesCode 5 месяцев назад

You're welcome!

@dev-akeel 5 месяцев назад

Wow that's awesome, me and jquery are of approximately same age🎉 Happy birthday to me & jquery🎂

@saeedkhazalvand4821 5 месяцев назад

my instructor ❤

@saeedkhazalvand4821 5 месяцев назад

Dave , I wanna send my project to you for some check but as you discord is ban in my country ... I need some consultant and some advice from you

@PanosPitsi 5 месяцев назад

@@saeedkhazalvand4821what country bans discord 😂

@ABHIJITKARMAKARrkmania 5 месяцев назад

This is very helpful ❤ Thank you

@DaveGrayTeachesCode 5 месяцев назад

Glad it was helpful!

@7doors847 5 месяцев назад

Superb!

@Techwithgenz 4 месяца назад

Thanks for reminder @dAveGray , just subscribed

@Rutthawit 5 месяцев назад

Thank you.

@Victor-lb5cv Месяц назад

Thank you very much!!

@DaveGrayTeachesCode Месяц назад

Welcome!

@HtetMyat79 5 месяцев назад

Thanks 💚

@DaveGrayTeachesCode 5 месяцев назад

You're welcome!

@kumargupta7149 5 месяцев назад

Have a great day ❤

@nazarshvets7501 5 месяцев назад

Great video! Didn't know what XLSX can render into csv and other formats :writing_hand: Astonished about instalation process tho, on other projects we used it from npm, I guess we need to fix that vulnerability now. Thanks for your knowledge

@DaveGrayTeachesCode 5 месяцев назад

Glad it helped!

@lifelessalarm 3 месяца назад

What do you think would be the best way of implementing error handling on both the frontend and backend here? For instance if an error was thrown at the api level?

@APEDUCO 4 месяца назад

how can i use streams to export as xlsx as i am working with very large data set

@leebobtheblob87 3 месяца назад

Hi Dave, Thank you for the intuitive tutorial. One question: 15:35 mentioned need to create buffer for xlsx why do you need to create buffer ? And emphasise that this is a nodejs? What is link between the buffer and nodejs? Thanks!

@CodeZakk 5 месяцев назад

Hi dave can you create short video on revalidation tag in nextjs. Last time I tried it it throws error when I try to create a revalidation tag with fetch request. Thanks!!❤❤

@rammehar5531 5 месяцев назад

great, thank you Dave for this video it will helps me in my project. Please also create a video on ReactQuill Editor and File Manager with s3 backet or is there any good editor which has inbuild File Manager

@DaveGrayTeachesCode 5 месяцев назад

Great suggestion!

@shakapaker 5 месяцев назад

I usually use XLSX to export data to Excel on the front end, why did you choose the back end for that, are there any advantages to this?

@DaveGrayTeachesCode 5 месяцев назад

Biggest advantage is that dependency doesn't get sent to the client. These days I'm doing what I can on the server with Next.js and keeping the JS sent minimal. That makes the listing page I used static as well which will load faster.

@manikantaprasadlopinti8375 5 месяцев назад

a small doubt .. can we use next server actions similar to api routes ?? can we use node js modules like fs and all other backend stuff

@MerkieAE 5 месяцев назад

server actions are basically turned into api routes by the NextJS compiler so yeah they can use server-side modules. However if you're running your project on Vercel you probably cant use most features of fs since your project is compiled as edge functions. So if you're thinking "I'll write the spreadsheet to a file then send that file to the user" don't do that, instead make the file but don't write it, and send that file straight to the user. That'll keep the file only in memory and it'll work on Vercel's edge functions. But also there's a size limit per request of like 4MB so keep that in mind too.

@DaveGrayTeachesCode 5 месяцев назад

As I mentioned in the video, I believe this is one of those few situations where you would prefer a route handler to a server action. Server actions process data and interact with the database. However, they don't usually issue responses like a route handler does.

@davidmukoro1166 5 месяцев назад

Great Tutorial. Thanks so much. Please can we have the one that we can download as pdf as well?

@DaveGrayTeachesCode 5 месяцев назад

Great request!

@kevl7129 5 месяцев назад

Couldn't you test if the required format is json first and return that, before any of the other conditional logic requiring you to create a worksheet? As it is now you create a new worksheet using xlsx but it's redundant if you're just returning the json?

@DaveGrayTeachesCode 5 месяцев назад

Sure!

@ahmad-murery 5 месяцев назад

I like to rely on response headers to force downloading a file, but since the Link component extends the anchor tag, can we just use the *download* attribute to do the same thing (although I don't prefer that)? Thanks Dave!

@DaveGrayTeachesCode 5 месяцев назад

That's a great question. I didn't try it, but my guess is it would have no impact here. That's because we need to trigger the functions in the route handler. The route handler is what truly sends the response. But until I would actually try it, I can't be for certain and I can always be wrong.

@ahmad-murery 5 месяцев назад

@@DaveGrayTeachesCode Thank you👍

@lifelessalarm 4 месяца назад

Great tutorial! Thanks Dave. In your API route where you return the file you currently have 'Content-Type': 'text/csv' when returning a .txt file. Should this instead be 'Content-Type': 'text/plain'?

@DaveGrayTeachesCode 4 месяца назад

I think you could use that. I used CSV because it was really a tab separated value file that I was delivering.

@lifelessalarm 4 месяца назад

Great, thanks! One behaviour I did notice was that when I tried to download the .txt file on a mobile device (in my case, an android tablet) the file automatically appended .csv at the end when using 'Content-Type': 'text/csv'. So the file ended up being something like 'test.txt.csv'. Interestingly, this didn't happen on a desktop browser. When I changed the content type to 'Content-Type': 'text/plain' then test.txt downloaded correctly across all devices. @@DaveGrayTeachesCode

@_singledev 5 месяцев назад

Hello Dave. I want to use a text editor like Tiptap in my next.js project, but I keep getting errors. I want to use the SSG and SSR power of next.js, but I cannot succeed. Can you make a sample project on this subject?😊

@DaveGrayTeachesCode 5 месяцев назад

I will look into text editors. Good request!

@abdellahhatouchi 4 месяца назад

Hi Dave thank you for this video but I have I question what's about for generate format PDF !?

@DaveGrayTeachesCode 4 месяца назад

There will be a different solution for that.

@abdellahhatouchi 4 месяца назад

@@DaveGrayTeachesCode can you share with me 🙂

@kouroshrstn 3 месяца назад

Thanks a lot for this Tutorial! How did you hide all classNames with a Tailwind icon? 🤔

@DaveGrayTeachesCode 3 месяца назад

The Tailwind Fold extension

@kouroshrstn 3 месяца назад

@@DaveGrayTeachesCode Thanks

@jellyfish1772 5 месяцев назад

It would be so much awesome if you created your nextjs course now. Everything is mostlt stable now. Too bad you had to create the playlist with the unstable version. Because people were too impatient 😅

@DaveGrayTeachesCode 5 месяцев назад

I'm waiting just a little while yet.

@jellyfish1772 5 месяцев назад

@@DaveGrayTeachesCode wow a new updated course from you? This is so cool

@dev-akeel 5 месяцев назад

2:00 Maybe .tsv ?

@DaveGrayTeachesCode 5 месяцев назад

I considered that. It's not as widely recognized or used. The resulting file is the same either way.

@dev-akeel 5 месяцев назад

@@DaveGrayTeachesCode yes you mentioned that afterwards, in the video.

@Odidi_Bee6ix 5 месяцев назад

How about pdf?

@DaveGrayTeachesCode 5 месяцев назад

Good request!

@internetexplorer7880 5 месяцев назад

Please do a pdf tutorial next

@DaveGrayTeachesCode 5 месяцев назад

Great request!

@tidyjii7348 5 месяцев назад

for generating + downloading excel files i think an alternative approach is to create an endpoint in next js that uses xlxs-populate. it can read an existing excel file (even with styling already) and put data to it. Then the call this api in the same project on the frontend side, supply data on it and use file-saver to download the excel file

@DaveGrayTeachesCode 5 месяцев назад

Interesting! I'll explore that. I'd like to keep XLSX on the server though instead of sending the dependency to the client. In this video, my report page is static.