Mobile Navbar using Framer Motion with Next.js SSR

A mobile Navbar I've built for my current real estate project using Framer Motion with Next.js SSR.
There are many animation libraries/frameworks we can use with the React.js environment. Though I often use GSAP or other libraries, I feel comfortable with Framer Motion. Because it is easy to implement and handle the animation states.
However, you will notice that I am using the "MotionDiv" component to use the framer motion animations in a div. Since framer motion components are built to work on CSR (Client Side Rendering) components, I created a file called "ClientComps" and put all the client-side HTML tags that I need to use with framer motion.
e.g. (export const MotionDiv = motion.div; .... and so on)
After that, I imported this "MotionDiv" component and used it across the application.
Want a video on how to use Framer Motion with Next.js SSR? drop a comment below. I will create another video if needed.
Happy Coding ✨
#webdevlopment #coding #navbar #nextjs #framermotion #ssr #csr #nextjsssr #website #realestate #real #estate #realestatewebsite #animations

[@_friyad]

Visit my website: www.friyad.site