🔴 Responsive dashboard design with Next.js from scratch

Absolute beginner responsive dashboard project with next.js from scratch. Also, we talked about adding font-awesome icons to the project as well as different types of charts from the charts.js library.
source code - github.com/Streamline6/next-d...
Subscribe for new videos every week - / @streamline13
Practice File - drive.google.com/file/d/18o2I...
TimeStamps
00:00 Introduction
00:27 Setting up the development Environment
05:50 Specifying components
08:15 Working on LeftNavbar
14:00 Adding font-awesome icons
26:30 Working on Header Section
36:00 Working on Content Section
41:00 Setting chart.js package
Tools used in this video
Canva (for graphics)- www.canva.com
Bensound (for music)- www.bensound.com/royalty-free...
#dashboard-design #responsive #next.js
Stay Connected
linktr.ee/Streamline6
Please do leave a like and Subscribe to stay updated
drop a comment and share if you liked it.

[@vinogiri2923]

Thanks for the tutorial!

[@Rubenjr005]

Awesome Thanks for taking the time to create this. this helps a begginer out like me big time

[@Streamline13]

Glad it was helpful!

[@qamarabbas322]

bhi keya hva hy?
git hub pay wrong source code add ki hy

[@yousuze]

Looking forward for more tutorials

[@Streamline13]

Sure

[@nabinsaud4688]

Which presentation are you using to show presentation

[@timdeitz3170]

Thanks for the great video! Quick question. How would one handle routing in this context (i.e. clicking on items in the sidebar should produce different content in the main area)? In react we use react-router-dom and map to components, but I'm wondering what the best approach is here? I could use next Link to route to new pages but that would mean duplicating on each page.

[@tech_ashwinikumar]

did you get the answer to your question? i am also looking for an answer. I started learning this stuff just a few days back

[@kevinchase127]

create a Layout.js file and bring it into app.js file that holds components and pageprops. wrap your home page component in Layout then add it as a child to your Layout file. now your layout will be on every page . so put your nav and footer and whatever else in your Layout

[@g62c4]

nice work but navbar links is just for display

[@alitonoliveira1700]

For some reason, gap attribute in css is not working and neither the importing of image watermark.png.

[@Streamline13]

Join our discord community we can solve your doubts 1-1.

[@luisbarbosa5597]

wow

[@abc_cba]

i get this error "./images/watermark.png
TypeError: unsupported file type: undefined (file: undefined)"

[@Streamline13]

Because you are working on the latest version of next.js and this static part is not supported on your version it worked on the previous version below 11.0.1.
To solve this problem just disable the static images feature in next.config.js
module.exports = {
images: {
disableStaticImages: true
}
}

[@abc_cba]

@@Streamline13 Hi, Thanks for responding, when i tried making the changes, I received the following errors on my browser
"./pages/components/Header.js
Error:
x the name `Image` is defined multiple times
,-[3:1]
3 | import Image from "../../images/watermark.png";
: ^^|^^
: `-- previous definition of `Image` here
4 | import Image from 'next/image';
: ^^|^^
: `-- `Image` redefined here
`----"