Next.js Template vs Layout with Page Transition Animations

Опубликовано: 05 Октябрь 2024
на канале: Dave Gray

8,769

504

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 ➜   / 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 ➜   / discord

☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray

🔗 Source Code Example: https://github.com/gitdagray/nextjs-t...

🔗 My Next.js Videos:    • Next.js Tutorials for Beginners

👇 Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter:   / yesdavidgray
LinkedIn:   / 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-refer...
🔗 Next.js Template: https://nextjs.org/docs/app/api-refer...
🔗 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