How to Use Motion Animations With Next.js Server Components?
👉 Don't forget to SUBSCRIBE: / tapasadhikary
👉 Join as a Member: / @tapasadhikary
👉 Follow tapaScript GitHub: https://github.com/tapascript
Let us learn how to use motion animation and Framer Motion with Next.js Server Components. In this video, I will show you all the approaches to integrate motion animation(framer motion) with a Next.js App(Next.js 15) for various components, like Server components, client components, or a wrapper.
As a side effect, you are also going to learn some React 19 features.
Do not miss it.
Let's GO 🚀
I put much effort into providing you with the best quality content. Please SUBSCRIBE to the channel to show your support. Also, could you like/comment on this video so that it reaches others?
Thanks! 🫶
Timecodes
0:00 - What Will We Learn?
00:40 - What is Motion and Framer Motion?
01:42 - Motion Animation Next.js Client Component
06:35 - Wrapper For Server Components
11:58 - Motion Animation in Server Components
14:17 - Framer Motion Scroll Animation
21:35 - Wrap-Up and Resources
Join tapaScript Discord
Join Discord: / discord
Source Code on GitHub
https://github.com/tapascript/nextjs-... (Please give the repo a STAR if you find it helpful)
Also Follow tapaScript on GitHub: https://github.com/tapascript
Links mentioned
https://motion.dev/docs
• 5 Fundamentals Of CSS Animations: Explaine...
🤝 My Links:
Blog: https://blog.greenroots.info/
Follow on X(Twitter): / tapasadhikary
Connect on LinkedIn: / tapasadhikary
Follow My Work on GitHub: https://github.com/atapas
Follow on Facebook: / tapasadhi
👋 Like my work? Thank You. You can sponsor me from here:
Sponsor Me: https://github.com/sponsors/atapas
Sponsor my Blog: https://blog.greenroots.info/sponsor
About Me:
Tapas Adhikary is an Educator at tapaScript, Tech enthusiast, Writer, YouTuber, and Open Source projects maintainer/contributor. He is a full-stack developer with vast experience in building SaaS solutions. He is the founder of the ReactPlay platform, which is driven by open-source projects and a fast-growing community.
You can find more about him at https://tapasadhikary.com.
#nextjstutorial
#next
#nextjs15
#animation
#framermotion
#motion
#nextjs
#nextjs14
#nextjsapprouter
#thinkinginnextjs
#nextjstutorial
#prerendering
#designpatterns