Hello, my friends and fellow developers!

In this video, we cover how you can build a Twitter Sidebar using Next.js 14 app router, React, shadcn/ui, and Tailwind CSS!

Let me know in the comments below if you want more Next.js content or something else.

Timestamps

00:00 - Intro & Sidebar Demo
00:36 - Create Next App
01:18 - Setup shadcn/ui and theme
02:53 - Home Page & darkmode
04:08 - Adding components from shadcn/ui
05:30 - Sidebar component
09:34 - Sidebar Button component
17:03 - Adding sidebar links
19:42 - Use Link component for navigation
20:17 - Fix a bug caused by client-server components
22:28 - Adding all sidebar links
25:10 - Adding additional sidebar items
28:05 - Sidebar footer with popover
33:22 - Adding page with dynamic routes
35:15 - Highlighting active link in sidebar
36:13 - Conclusion

Other Tutorials: 
    ⚛️ React and Material UI Todo App: https://bit.ly/reactmattodo
    🟨 Other JavaScript videos: https://bit.ly/jstutorials
    📘 Visual Studio Code videos: https://bit.ly/vscodevids
    🔋 Build a Battery App in JS: https://youtu.be/J8_hwKSeffY

Connect 🔗 :
    Twitter: https://twitter.com/MaxProgramming1
    Facebook: https://www.facebook.com/Max-Programming-103081931147293    
    Github: https://github.com/max-programming/

Suggest, ask doubts in the comments, and share these videos to help!
Thanks for Watching!

#nextjs14 #reactjs #javascript

Max Programming 🇵🇸

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Learn how to build a Twitter sidebar using Next.js, React, shadcn/ui, and Tailwind CSS. Customize the sidebar, make it responsive, and highlight the active link.

Build A Twitter Sidebar using Next.js 14, React, shadcn/ui, and Tailwind CSS