Video Belajar
Tonton dan pelajari berbagai topik menarik melalui video pembelajaran eksklusif dari Channel Dave Gray.
Dave Gray
10485
Next.js Template vs Layout with Page Transition Animations
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Next.js Template vs Layout files - learn the difference in this tutorial as we apply custom page transition animations to a Next.js project. We'll use ShadCN/ui and the example code is available in the link below.
💖 Support me on Patreon ➜ https://patreon.com/davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: https://bit.ly/CompNextJSDev
- Advanced React: https://bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
📬 Course Updates ➜ https://courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ https://discord.gg/neKghyefqh
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
🔗 Source Code Example: https://github.com/gitdagray/nextjs-template-vs-layout
🔗 My Next.js Videos: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Pk-QJIdGd1tGZEzy9RTgtj
👇 Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Next.js Template vs Layout with Page Transition Animations
(00:00) Intro
(00:14) Welcome
(00:35) Example Project Overview
(01:36) ShadCN/ui and TailwindCSS
(04:10) View the Example Website
(05:22) Add an Animation to the Layout
(08:37) How is a Template different?
(09:32) Adding a Template file
(10:07) Add an Animation to the Template
(13:18) Add Breadcrumbs with a Template
(16:17) Wrap-up
📚 Tutorial References:
🔗 Next.js: https://nextjs.org
🔗 Next.js Layout: https://nextjs.org/docs/app/api-reference/file-conventions/layout
🔗 Next.js Template: https://nextjs.org/docs/app/api-reference/file-conventions/template
🔗 ShadCN/ui: https://ui.shadcn.com/
Was this tutorial about Next.js Template vs Layout files with ShadCN/ui and page transition animations helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #template #layout
Next.js Template vs Layout files - learn the difference in this tutorial as we apply custom page transition animations to a Next.js project. We'll use ShadCN/ui and the example code is available in the link below.
💖 Support me on Patreon ➜ https://patreon.com/davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: https://bit.ly/CompNextJSDev
- Advanced React: https://bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
📬 Course Updates ➜ https://courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ https://discord.gg/neKghyefqh
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
🔗 Source Code Example: https://github.com/gitdagray/nextjs-template-vs-layout
🔗 My Next.js Videos: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Pk-QJIdGd1tGZEzy9RTgtj
👇 Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Next.js Template vs Layout with Page Transition Animations
(00:00) Intro
(00:14) Welcome
(00:35) Example Project Overview
(01:36) ShadCN/ui and TailwindCSS
(04:10) View the Example Website
(05:22) Add an Animation to the Layout
(08:37) How is a Template different?
(09:32) Adding a Template file
(10:07) Add an Animation to the Template
(13:18) Add Breadcrumbs with a Template
(16:17) Wrap-up
📚 Tutorial References:
🔗 Next.js: https://nextjs.org
🔗 Next.js Layout: https://nextjs.org/docs/app/api-reference/file-conventions/layout
🔗 Next.js Template: https://nextjs.org/docs/app/api-reference/file-conventions/template
🔗 ShadCN/ui: https://ui.shadcn.com/
Was this tutorial about Next.js Template vs Layout files with ShadCN/ui and page transition animations helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #template #layout