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